Magnetic dot grid

// A grid of dots, each remembering its home position.
export function makeGrid(w, h, gap) {
  const dots = [];
  for (let y = gap / 2; y < h; y += gap)
    for (let x = gap / 2; x < w; x += gap)
      dots.push({ hx: x, hy: y, x, y });
  return dots;
}

// Dots near the pointer are pulled toward it, then ease back home.
// `pull` is how far they travel, as a share of the distance to the pointer.
export function attract(dots, pointer, radius, pull = 0.35) {
  for (const d of dots) {
    const dx = pointer.x - d.hx, dy = pointer.y - d.hy;
    const dist = Math.hypot(dx, dy);
    const k = dist < radius ? (1 - dist / radius) ** 2 * pull : 0;
    const tx = d.hx + dx * k, ty = d.hy + dy * k;
    d.x += (tx - d.x) * 0.18;
    d.y += (ty - d.y) * 0.18;
    d.k = k / pull; // 0 at rest, 1 under the pointer
  }
}