daemon-sec-lotl

icon-targets.ts (3307B)

---

 /**
  * From an icon's outline to a landing spot for every particle.
  *
  * The icon arrives as SVG markup (a lucide component's `outerHTML`),
  * is drawn once into a small offscreen canvas, and its alpha becomes a
  * grid of "ink here" cells. Each particle then needs the nearest inked
  * cell to its own resting place: a multi-source flood fill from every
  * inked cell gives that for the whole grid at once, in a millisecond,
  * which is near enough to true nearest at this resolution. The spot is
  * jittered inside its cell so a stroke does not read as a row of beads.
  *
  * Coordinates are icon-local: `[-0.5, 0.5]` on both axes, y up. The
  * field places and scales them per frame.
  */
 
 export const GRID = 128;
 const PAD = 8;
 const INK = 96;
 
 /** Draw the markup and read its alpha. Async: image decode. */
 export async function rasterise(svg: string, canvas: HTMLCanvasElement): Promise<Uint8Array> {
   const img = new Image();
   img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
   await img.decode();
   canvas.width = GRID;
   canvas.height = GRID;
   const ctx = canvas.getContext("2d", { willReadFrequently: true });
   if (!ctx) throw new Error("no 2d context");
   ctx.clearRect(0, 0, GRID, GRID);
   ctx.drawImage(img, PAD, PAD, GRID - PAD * 2, GRID - PAD * 2);
   const { data } = ctx.getImageData(0, 0, GRID, GRID);
   const out = new Uint8Array(GRID * GRID);
   for (let i = 0; i < out.length; i++) out[i] = data[i * 4 + 3] > INK ? 1 : 0;
   return out;
 }
 
 /** For every cell, the index of the nearest inked cell (8-connected BFS). */
 export function nearestInked(ink: Uint8Array): Int32Array {
   const n = GRID * GRID;
   const src = new Int32Array(n).fill(-1);
   const queue = new Int32Array(n);
   let head = 0;
   let tail = 0;
   for (let i = 0; i < n; i++) {
     if (ink[i]) {
       src[i] = i;
       queue[tail++] = i;
     }
   }
   while (head < tail) {
     const c = queue[head++];
     const cx = c % GRID;
     const cy = (c - cx) / GRID;
     for (let dy = -1; dy <= 1; dy++) {
       const y = cy + dy;
       if (y < 0 || y >= GRID) continue;
       for (let dx = -1; dx <= 1; dx++) {
         const x = cx + dx;
         if (x < 0 || x >= GRID) continue;
         const i = y * GRID + x;
         if (src[i] >= 0) continue;
         src[i] = src[c];
         queue[tail++] = i;
       }
     }
   }
   return src;
 }
 
 /**
  * Landing spots for `rest` (icon-local pairs), one per particle, from
  * the nearest-ink map. Returns icon-local pairs, y up.
  */
 export function targetsFor(rest: Float32Array, nearest: Int32Array, hash: (i: number) => number): Float32Array {
   const count = rest.length / 2;
   const out = new Float32Array(rest.length);
   for (let i = 0; i < count; i++) {
     const rx = rest[i * 2];
     const ry = rest[i * 2 + 1];
     const cx = Math.min(GRID - 1, Math.max(0, Math.floor((rx + 0.5) * GRID)));
     const cy = Math.min(GRID - 1, Math.max(0, Math.floor((0.5 - ry) * GRID)));
     const s = nearest[cy * GRID + cx];
     if (s < 0) {
       out[i * 2] = rx;
       out[i * 2 + 1] = ry;
       continue;
     }
     const sx = s % GRID;
     const sy = (s - sx) / GRID;
     const jx = hash(i * 2) - 0.5;
     const jy = hash(i * 2 + 1) - 0.5;
     out[i * 2] = (sx + 0.5 + jx * 0.9) / GRID - 0.5;
     out[i * 2 + 1] = 0.5 - (sy + 0.5 + jy * 0.9) / GRID;
   }
   return out;
 }