Whip-Crack Chain

// Verlet rope/whip — released from a horizontal hold; the wave concentrates
// kinetic energy at the free tip as it travels down the chain.
const N = 64, SEG = 9, ITERS = 24, SUBSTEPS = 3;
const G = 1400, DAMP = 0.0008, MAX_V = 6000;
let px, py, qx, qy, vx, vy;
let anchorX, anchorY, crackFlash, lastW, lastH;

function releasePose(width, height) {
  anchorX = width * (0.18 + Math.random() * 0.18);
  anchorY = height * (0.30 + Math.random() * 0.18);
  // Held nearly horizontal with a slight curl; release hands it to gravity.
  // A tiny upward velocity at the tip seeds the wave that propagates down.
  const tipKick = 18 + Math.random() * 14;
  const curl = (Math.random() - 0.5) * 0.35;
  for (let i = 0; i <= N; i++) {
    const t = i / N;
    const x = anchorX + i * SEG;
    const y = anchorY + Math.sin(t * Math.PI) * curl * SEG * N * 0.08;
    px[i] = x; py[i] = y;
    qx[i] = x; qy[i] = y - t * tipKick * 0.02;
  }
  crackFlash = 1;
}

function init({ width, height }) {
  px = new Float32Array(N + 1);
  py = new Float32Array(N + 1);
  qx = new Float32Array(N + 1);
  qy = new Float32Array(N + 1);
  vx = new Float32Array(N + 1);
  vy = new Float32Array(N + 1);
  lastW = width; lastH = height;
  releasePose(width, height);
}

function step(dt, width, height) {
  // Verlet integration with gravity
  for (let i = 0; i <= N; i++) {
    if (i === 0) continue; // anchor pinned
    const x = px[i], y = py[i];
    const ox = qx[i], oy = qy[i];
    let nx = x + (x - ox) * (1 - DAMP) + 0;
    let ny = y + (y - oy) * (1 - DAMP) + G * dt * dt;
    qx[i] = x; qy[i] = y;
    px[i] = nx; py[i] = ny;
  }

  // pin anchor
  px[0] = anchorX; py[0] = anchorY;
  qx[0] = anchorX; qy[0] = anchorY;

  // stiff distance constraints — many passes => near-inextensible
  for (let k = 0; k < ITERS; k++) {
    for (let i = 0; i < N; i++) {
      let ax = px[i], ay = py[i];
      let bx = px[i + 1], by = py[i + 1];
      let dx = bx - ax, dy = by - ay;
      const d = Math.sqrt(dx * dx + dy * dy) || 1e-6;
      const diff = (d - SEG) / d;
      if (i === 0) {
        // anchor immovable, push only b
        px[i + 1] = bx - dx * diff;
        py[i + 1] = by - dy * diff;
      } else {
        const hx = dx * diff * 0.5;
        const hy = dy * diff * 0.5;
        px[i] = ax + hx;
        py[i] = ay + hy;
        px[i + 1] = bx - hx;
        py[i + 1] = by - hy;
      }
    }
    // re-pin anchor each iteration
    px[0] = anchorX; py[0] = anchorY;
  }
}

function tick({ ctx, dt, width, height, input }) {
  if (width !== lastW || height !== lastH) {
    lastW = width; lastH = height;
    releasePose(width, height);
  }

  const clicks = input.consumeClicks();
  if (clicks.length > 0) releasePose(width, height);

  const step_dt = Math.min(dt, 1 / 45) / SUBSTEPS;
  for (let s = 0; s < SUBSTEPS; s++) step(step_dt, width, height);

  // velocities (for color) from Verlet difference
  const invDt = 1 / Math.max(dt, 1e-4);
  let tipSpeed = 0;
  for (let i = 0; i <= N; i++) {
    vx[i] = (px[i] - qx[i]) * invDt;
    vy[i] = (py[i] - qy[i]) * invDt;
    if (i === N) tipSpeed = Math.hypot(vx[i], vy[i]);
  }

  // background — slight trail so the crack reads as motion
  ctx.fillStyle = "rgba(8, 10, 18, 0.55)";
  ctx.fillRect(0, 0, width, height);

  // floor line
  ctx.strokeStyle = "rgba(60, 70, 100, 0.35)";
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(0, height - 6);
  ctx.lineTo(width, height - 6);
  ctx.stroke();

  // draw chain as colored segments — hue from speed
  ctx.lineCap = "round";
  ctx.lineJoin = "round";
  for (let i = 0; i < N; i++) {
    const sA = Math.hypot(vx[i], vy[i]);
    const sB = Math.hypot(vx[i + 1], vy[i + 1]);
    const sMid = 0.5 * (sA + sB);
    const t = Math.min(1, sMid / MAX_V);
    // cool (cyan/blue ~200) -> hot (yellow/red ~10), through magenta
    const hue = 220 - t * 230;       // 220 -> -10
    const sat = 90;
    const light = 40 + t * 30;
    const width_seg = 4.5 - (i / N) * 2.8 + t * 1.5;
    ctx.strokeStyle = `hsla(${(hue + 360) % 360}, ${sat}%, ${light}%, ${0.85})`;
    ctx.lineWidth = Math.max(1.2, width_seg);
    ctx.beginPath();
    ctx.moveTo(px[i], py[i]);
    ctx.lineTo(px[i + 1], py[i + 1]);
    ctx.stroke();
  }

  // handle
  ctx.fillStyle = "rgba(220, 220, 235, 0.95)";
  ctx.beginPath();
  ctx.arc(anchorX, anchorY, 5, 0, Math.PI * 2);
  ctx.fill();
  ctx.strokeStyle = "rgba(140, 150, 180, 0.7)";
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(anchorX - 9, anchorY + 9);
  ctx.lineTo(anchorX, anchorY);
  ctx.stroke();

  // tip glow proportional to speed
  const tipT = Math.min(1, tipSpeed / MAX_V);
  if (tipT > 0.05) {
    const tipHue = (220 - tipT * 230 + 360) % 360;
    const r = 8 + tipT * 28;
    const g = ctx.createRadialGradient(px[N], py[N], 0, px[N], py[N], r);
    g.addColorStop(0, `hsla(${tipHue}, 100%, 65%, ${0.55 + 0.35 * tipT})`);
    g.addColorStop(1, `hsla(${tipHue}, 100%, 60%, 0)`);
    ctx.fillStyle = g;
    ctx.fillRect(px[N] - r, py[N] - r, r * 2, r * 2);
  }

  // crack flash decays — visual feedback when a click re-releases
  if (crackFlash > 0.01) {
    ctx.fillStyle = `rgba(255, 240, 220, ${0.08 * crackFlash})`;
    ctx.fillRect(0, 0, width, height);
    crackFlash *= 0.88;
  }

  // HUD: tip speed + legend
  ctx.fillStyle = "rgba(220, 230, 250, 0.85)";
  ctx.font = "12px system-ui, sans-serif";
  ctx.fillText(`tip |v|: ${Math.round(tipSpeed)} px/s`, 12, 18);
  ctx.fillText(`segments: ${N}`, 12, 34);

  // color legend bar
  const lx = width - 132, ly = 12, lw = 120, lh = 8;
  for (let i = 0; i < lw; i++) {
    const t = i / lw;
    const hue = (220 - t * 230 + 360) % 360;
    ctx.fillStyle = `hsl(${hue}, 90%, ${40 + t * 30}%)`;
    ctx.fillRect(lx + i, ly, 1, lh);
  }
  ctx.fillStyle = "rgba(220, 230, 250, 0.7)";
  ctx.fillText("slow", lx, ly + lh + 12);
  ctx.fillText("fast", lx + lw - 22, ly + lh + 12);

  // hint
  ctx.fillStyle = "rgba(180, 195, 225, 0.55)";
  ctx.fillText("click to crack", 12, height - 14);
}