Particles that spell a word

// Draw the text off-screen and keep one target point every `gap` pixels.
// Line breaks in `text` stack the words, which suits a 9:16 frame.
export function textTargets(text, w, h, gap) {
  const c = document.createElement('canvas');
  c.width = w;
  c.height = h;
  const g = c.getContext('2d', { willReadFrequently: true });
  const lines = text.split('\n');
  const font = (s) => `800 ${s}px "Inter Variable", system-ui, sans-serif`;
  g.font = font(100);
  const widest = Math.max(...lines.map((l) => g.measureText(l).width));
  const size = Math.min((h * 0.62) / lines.length, (100 * w * 0.86) / widest);
  g.font = font(size);
  g.textAlign = 'center';
  g.textBaseline = 'middle';
  lines.forEach((l, i) => g.fillText(l, w / 2, h / 2 + (i - (lines.length - 1) / 2) * size));
  const alpha = g.getImageData(0, 0, w, h).data;
  const points = [];
  for (let y = 0; y < h; y += gap)
    for (let x = 0; x < w; x += gap)
      if (alpha[(y * w + x) * 4 + 3] > 140) points.push({ x, y });
  return points;
}

// Each particle springs to its target and is pushed away from the pointer.
export function step(particles, pointer) {
  for (const p of particles) {
    let ax = (p.tx - p.x) * 0.05;
    let ay = (p.ty - p.y) * 0.05;
    const dx = p.x - pointer.x, dy = p.y - pointer.y;
    const d = Math.hypot(dx, dy) || 1;
    if (d < pointer.r) {
      const push = (1 - d / pointer.r) * 7;
      ax += (dx / d) * push;
      ay += (dy / d) * push;
    }
    p.vx = (p.vx + ax) * 0.84;
    p.vy = (p.vy + ay) * 0.84;
    p.x += p.vx;
    p.y += p.vy;
  }
}