Magnus Effect: Spinning Ball in Flight

// Magnus effect: spinning ball through air. Lift F_L ∝ ω×v, drag F_D = -½ρCdA|v|v.
// Mouse Y sets spin ω; cursor X,Y aims; click launches. 3 ghost trails compare spins.

const G = 9.81, RHO = 1.225, CD = 0.35, R = 0.04, MASS = 0.058;
const A = Math.PI * R * R;
const S_COEFF = 8e-5;          // Magnus lift coefficient (tuned for visibility)
const SUBSTEPS = 6;

let scaleM, originX, originY, spin, speed, angleDeg, live, ghosts, resetFlash;

function worldToPx(x, y) { return [originX + x * scaleM, originY - y * scaleM]; }
function pxToWorld(px, py) { return [(px - originX) / scaleM, (originY - py) / scaleM]; }

function step(b, dt) {
  const v = Math.hypot(b.vx, b.vy) || 1e-6;
  const dragK = 0.5 * RHO * CD * A * v / MASS;
  // Magnus accel: rotate v by +90° times sign(ω). +ω = backspin (lifts up for rightward shot).
  const m = S_COEFF * b.omega * v / MASS;
  const ax = -dragK * b.vx - m * b.vy;
  const ay = -dragK * b.vy + m * b.vx - G;
  b.vx += ax * dt; b.vy += ay * dt;
  b.x += b.vx * dt; b.y += b.vy * dt;
  b.t += dt;
}

function makeShot(spinVal, speedVal, ang) {
  return { x: 0, y: 0.2, vx: Math.cos(ang) * speedVal, vy: Math.sin(ang) * speedVal,
           omega: spinVal, t: 0, alive: true };
}

function simulateGhost(spinVal, speedVal, ang) {
  const b = makeShot(spinVal, speedVal, ang);
  const out = [{ x: b.x, y: b.y }];
  const dt = 1 / 240;
  for (let i = 0; i < 1500 && b.y > 0 && b.x < 35; i++) {
    step(b, dt);
    if ((i & 1) === 0) out.push({ x: b.x, y: b.y });
  }
  return out;
}

function init({ width, height }) {
  const worldW = 30, worldH = 12;
  scaleM = Math.min(width / worldW, height / worldH) * 0.92;
  originX = 30; originY = height - 30;
  spin = 200; speed = 22; angleDeg = 18;
  live = null; resetFlash = 0;
  ghosts = [
    { spin: -400, color: "hsl(200,90%,65%)", label: "−400 rad/s backspin", trail: null },
    { spin:    0, color: "hsl(0,0%,80%)",    label: "0 rad/s no spin",     trail: null },
    { spin:  400, color: "hsl(20,95%,60%)",  label: "+400 rad/s topspin",  trail: null },
  ];
}

function tick({ ctx, dt, width, height, input }) {
  const newScale = Math.min(width / 30, height / 12) * 0.92;
  if (Math.abs(newScale - scaleM) > 0.5) {
    scaleM = newScale; originX = 30; originY = height - 30;
  }

  const cx = input.mouseX, cy = input.mouseY;
  spin = ((1 - cy / height) - 0.5) * 1600;          // -800..+800 rad/s
  speed = Math.max(8, Math.min(40, 10 + (cx / width) * 30));
  const [wx, wy] = pxToWorld(cx, cy);
  angleDeg = Math.max(-10, Math.min(70,
    Math.atan2(Math.max(0.5, wy), Math.max(2, wx)) * 180 / Math.PI));

  for (const g of ghosts) g.trail = simulateGhost(g.spin, speed, angleDeg * Math.PI / 180);

  if (input.consumeClicks().length > 0) {
    const ang = angleDeg * Math.PI / 180;
    live = {
      ball: makeShot(spin, speed, ang),
      trail: [],
      color: `hsl(${((spin + 800) / 1600 * 280) | 0},100%,65%)`,
      spinVal: spin,
    };
    resetFlash = 1;
  }

  if (live && live.ball.alive) {
    const sub = Math.min(dt, 1 / 30) / SUBSTEPS;
    for (let i = 0; i < SUBSTEPS; i++) {
      step(live.ball, sub);
      live.trail.push({ x: live.ball.x, y: live.ball.y });
      if (live.ball.y <= 0 || live.ball.x > 35 || live.ball.x < -2) {
        live.ball.alive = false; break;
      }
    }
  }

  // background
  ctx.fillStyle = "rgb(10,14,24)";
  ctx.fillRect(0, 0, width, height);
  const [, gy0] = worldToPx(0, 0);
  ctx.fillStyle = "rgba(40,60,50,0.55)";
  ctx.fillRect(0, gy0, width, height - gy0);
  ctx.strokeStyle = "rgba(140,200,170,0.6)"; ctx.lineWidth = 1;
  ctx.beginPath(); ctx.moveTo(0, gy0); ctx.lineTo(width, gy0); ctx.stroke();

  // grid
  ctx.strokeStyle = "rgba(120,140,180,0.12)";
  for (let x = 0; x <= 30; x += 5) {
    const [px] = worldToPx(x, 0);
    ctx.beginPath(); ctx.moveTo(px, 0); ctx.lineTo(px, gy0); ctx.stroke();
  }
  for (let y = 0; y <= 12; y += 2) {
    const [, py] = worldToPx(0, y);
    ctx.beginPath(); ctx.moveTo(0, py); ctx.lineTo(width, py); ctx.stroke();
  }

  // ghost trails
  ctx.lineWidth = 1.2;
  ctx.setLineDash([4, 4]);
  for (const g of ghosts) {
    if (!g.trail) continue;
    ctx.strokeStyle = g.color.replace("hsl", "hsla").replace(")", ",0.55)");
    ctx.beginPath();
    for (let i = 0; i < g.trail.length; i++) {
      const [px, py] = worldToPx(g.trail[i].x, g.trail[i].y);
      if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
    }
    ctx.stroke();
  }
  ctx.setLineDash([]);

  // live trail + ball
  if (live) {
    ctx.lineWidth = 2.4; ctx.strokeStyle = live.color;
    ctx.beginPath();
    for (let i = 0; i < live.trail.length; i++) {
      const [px, py] = worldToPx(live.trail[i].x, live.trail[i].y);
      if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
    }
    ctx.stroke();
    const [bx, by] = worldToPx(live.ball.x, live.ball.y);
    ctx.fillStyle = live.color;
    ctx.beginPath(); ctx.arc(bx, by, 6, 0, Math.PI * 2); ctx.fill();
    const sa = (live.ball.t * live.spinVal) % (Math.PI * 2);
    ctx.strokeStyle = "rgba(255,255,255,0.85)"; ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.moveTo(bx, by); ctx.lineTo(bx + Math.cos(sa) * 6, by + Math.sin(sa) * 6);
    ctx.stroke();
  }

  // aim preview + ball at origin
  const [ox, oy] = worldToPx(0, 0.2);
  const ang = angleDeg * Math.PI / 180;
  const previewLen = Math.min(80, speed * 2.5);
  ctx.strokeStyle = "rgba(255,220,100,0.6)"; ctx.lineWidth = 1.5;
  ctx.setLineDash([2, 4]);
  ctx.beginPath();
  ctx.moveTo(ox, oy);
  ctx.lineTo(ox + Math.cos(ang) * previewLen, oy - Math.sin(ang) * previewLen);
  ctx.stroke();
  ctx.setLineDash([]);
  ctx.fillStyle = `hsl(${((spin + 800) / 1600 * 280) | 0},100%,65%)`;
  ctx.beginPath(); ctx.arc(ox, oy, 7, 0, Math.PI * 2); ctx.fill();
  ctx.strokeStyle = "rgba(255,255,255,0.9)"; ctx.lineWidth = 1.5;
  ctx.beginPath();
  ctx.arc(ox, oy, 11, 0, Math.PI * 1.5 * Math.min(1, Math.abs(spin) / 800), spin < 0);
  ctx.stroke();

  // HUD
  ctx.fillStyle = "rgba(220,230,255,0.92)";
  ctx.font = "12px system-ui, sans-serif";
  ctx.fillText(`spin ω = ${spin.toFixed(0)} rad/s  (mouse Y)`, 12, 18);
  ctx.fillText(`speed v₀ = ${speed.toFixed(1)} m/s   angle θ = ${angleDeg.toFixed(0)}°`, 12, 34);
  ctx.fillText(`click to launch`, 12, 50);
  ctx.font = "11px system-ui, sans-serif";
  let ly = 18;
  for (const g of ghosts) {
    ctx.fillStyle = g.color;
    ctx.fillRect(width - 170, ly - 8, 14, 2);
    ctx.fillStyle = "rgba(220,230,255,0.8)";
    ctx.fillText(g.label, width - 150, ly);
    ly += 16;
  }

  if (resetFlash > 0) {
    ctx.fillStyle = `rgba(255,255,255,${resetFlash * 0.15})`;
    ctx.fillRect(0, 0, width, height);
    resetFlash = Math.max(0, resetFlash - dt * 4);
  }
}