Upload app.js

static/app.js

@@ -25,6 +25,7 @@ const CLICK_T = 2;                  // … over 2 seconds
 const STROKES_PER_FRAME = 18;
 const CYCLE_MS = 5000;
 const N = 5;                        // pairs in the ring (3 visible)
+const BG = [22, 22, 24];            // canvas seed color (#161618)
 
 const SLOTS = [
   { y: 0,    op: 1,  scale: 1    }, // r0  mid  · active
@@ -41,6 +42,10 @@ let mouse = { down: false, x: 0, y: 0, target: null, startSize: GLOBAL_START };
 const expSize = (s0, s1, t, T) => Math.max(1, Math.round(s0 * Math.pow(s1 / s0, Math.min(t, T) / T)));
 const globalSizeNow = () => expSize(GLOBAL_START, GLOBAL_END, (performance.now() - activeStart) / 1000, GLOBAL_T);
 
+function resetBuf(p) {
+  for (let i = 0; i < p.buf.length; i += 3) { p.buf[i] = BG[0]; p.buf[i + 1] = BG[1]; p.buf[i + 2] = BG[2]; }
+}
+
 function makePair() {
   const el = document.createElement("div");
   el.className = "pair";
@@ -51,7 +56,9 @@ function makePair() {
   const ctx = cv.getContext("2d");
   ctx.fillStyle = "#161618";
   ctx.fillRect(0, 0, CANVAS, CANVAS);
-  return { el, img: el.querySelector("img"), canvas: cv, ctx, srcData: null };
+  const p = { el, img: el.querySelector("img"), canvas: cv, ctx, srcData: null, buf: new Uint8ClampedArray(CANVAS * CANVAS * 3) };
+  resetBuf(p);
+  return p;
 }
 
 function proceduralFallback(p, seed) {
@@ -80,6 +87,7 @@ function loadSource(p) {
   const seed = srcCursor++;
   p.ctx.fillStyle = "#161618";
   p.ctx.fillRect(0, 0, CANVAS, CANVAS);
+  resetBuf(p);
   const im = new Image();
   im.crossOrigin = "anonymous";
   im.onload = () => {
@@ -119,19 +127,38 @@ function tick() {
   activeStart = performance.now();
 }
 
+// Places a stroke only if the source-area average lowers the error over that area
+// (just like PBC discarding a stroke whose best multiplier is 0).
 function fillStroke(p, x, y, size) {
   x = Math.max(0, Math.min(CANVAS - size, Math.round(x)));
   y = Math.max(0, Math.min(CANVAS - size, Math.round(y)));
-  const data = p.srcData;
-  if (!data) return;
-  let r = 0, g = 0, b = 0, n = 0;
+  const src = p.srcData, buf = p.buf;
+  if (!src) return;
+
+  let sR = 0, sG = 0, sB = 0, sq = 0, before = 0;
+  for (let yy = y; yy < y + size; yy++) {
+    for (let xx = x; xx < x + size; xx++) {
+      const si = (yy * CANVAS + xx) * 4, bi = (yy * CANVAS + xx) * 3;
+      const r = src[si], g = src[si + 1], b = src[si + 2];
+      const cr = buf[bi], cg = buf[bi + 1], cb = buf[bi + 2];
+      sR += r; sG += g; sB += b;
+      sq += r * r + g * g + b * b;
+      before += (r - cr) * (r - cr) + (g - cg) * (g - cg) + (b - cb) * (b - cb);
+    }
+  }
+  const n = size * size;
+  // error after filling with the area average == variance of the source area
+  const after = sq - (sR * sR + sG * sG + sB * sB) / n;
+  if (after >= before) return; // would not improve → skip
+
+  const mr = Math.round(sR / n), mg = Math.round(sG / n), mb = Math.round(sB / n);
   for (let yy = y; yy < y + size; yy++) {
     for (let xx = x; xx < x + size; xx++) {
-      const i = (yy * CANVAS + xx) * 4;
-      r += data[i]; g += data[i + 1]; b += data[i + 2]; n++;
+      const bi = (yy * CANVAS + xx) * 3;
+      buf[bi] = mr; buf[bi + 1] = mg; buf[bi + 2] = mb;
     }
   }
-  p.ctx.fillStyle = `rgb(${r / n | 0},${g / n | 0},${b / n | 0})`;
+  p.ctx.fillStyle = `rgb(${mr},${mg},${mb})`;
   p.ctx.fillRect(x, y, size, size);
 }