Projectile Motion: Vacuum vs Air Drag

// Projectile motion: vacuum vs quadratic drag vs linear (Stokes) drag.
// Click + drag back from the cannon and release to fire (slingshot aim).
// Three ghost trajectories overlay so the user can see how drag changes range / height / time.

const G = 9.81;                    // m/s^2
const MASS = 0.145;                // baseball-ish
const K_QUAD = 0.0013;             // quadratic drag coeff (≈ ½ρCdA), tuned for visible separation
const K_LIN  = 0.045;              // Stokes-like linear drag coeff (low-Re regime)
const SUBSTEPS = 6;
const MAX_T = 12;                  // sim time cap

let scaleM, originX, originY;
let prevDown, dragging, dragStartX, dragStartY;
let aim;                           // { vx, vy, speed, angle } current preview
let ghosts;                        // [{ mode, color, label, trail, range, height, tof }]
let live;                          // active fired shot

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

// integrate one model: mode 0 = vacuum, 1 = quadratic, 2 = linear
function stepModel(b, dt, mode) {
  let ax = 0, ay = -G;
  if (mode === 1) {
    const v = Math.hypot(b.vx, b.vy);
    const c = K_QUAD * v / MASS;
    ax -= c * b.vx;
    ay -= c * b.vy;
  } else if (mode === 2) {
    const c = K_LIN / MASS;
    ax -= c * b.vx;
    ay -= c * b.vy;
  }
  b.vx += ax * dt; b.vy += ay * dt;
  b.x  += b.vx * dt; b.y += b.vy * dt;
  b.t  += dt;
  if (b.y > b.maxY) b.maxY = b.y;
}

function simulate(vx, vy, mode) {
  const b = { x: 0, y: 0, vx, vy, t: 0, maxY: 0 };
  const trail = [{ x: 0, y: 0 }];
  const dt = 1 / 240;
  let last = { x: 0, y: 0, t: 0 };
  for (let i = 0; i < MAX_T * 240; i++) {
    last = { x: b.x, y: b.y, t: b.t };
    stepModel(b, dt, mode);
    if ((i & 1) === 0) trail.push({ x: b.x, y: b.y });
    if (b.y <= 0 && b.vy < 0) {
      // linear interpolate to ground for clean stats
      const t = last.y / (last.y - b.y);
      const rx = last.x + (b.x - last.x) * t;
      trail.push({ x: rx, y: 0 });
      return { trail, range: rx, height: b.maxY, tof: last.t + (b.t - last.t) * t };
    }
  }
  return { trail, range: b.x, height: b.maxY, tof: b.t };
}

function init({ width, height }) {
  const worldW = 60, worldH = 24;
  scaleM = Math.min(width / worldW, height / worldH) * 0.9;
  originX = 36;
  originY = height - 28;
  prevDown = false;
  dragging = false;
  dragStartX = 0; dragStartY = 0;
  aim = { vx: 18, vy: 14, speed: Math.hypot(18, 14), angle: Math.atan2(14, 18) };
  ghosts = [
    { mode: 0, color: "hsl(50,100%,70%)",  label: "vacuum (no drag)",  trail: null, range: 0, height: 0, tof: 0 },
    { mode: 1, color: "hsl(15,95%,62%)",   label: "quadratic drag",    trail: null, range: 0, height: 0, tof: 0 },
    { mode: 2, color: "hsl(195,90%,65%)",  label: "linear (Stokes)",   trail: null, range: 0, height: 0, tof: 0 },
  ];
  recomputeGhosts();
  live = null;
}

function recomputeGhosts() {
  for (const g of ghosts) {
    const r = simulate(aim.vx, aim.vy, g.mode);
    g.trail = r.trail; g.range = r.range; g.height = r.height; g.tof = r.tof;
  }
}

function tick({ ctx, dt, width, height, input }) {
  // re-derive scale on resize
  const ns = Math.min(width / 60, height / 24) * 0.9;
  if (Math.abs(ns - scaleM) > 0.5) {
    scaleM = ns; originX = 36; originY = height - 28;
  }

  // drag-to-aim interaction
  const down = input.mouseDown;
  const [ox, oy] = worldToPx(0, 0);
  if (down && !prevDown) {
    dragging = true;
    dragStartX = input.mouseX;
    dragStartY = input.mouseY;
  }
  if (dragging) {
    // slingshot: pull AWAY from the target. velocity = (start - current) scaled.
    const dx = (dragStartX - input.mouseX);
    const dy = (input.mouseY - dragStartY); // screen-y inverted => world-y positive when dragging down
    const pull = Math.hypot(dx, dy);
    const maxPull = Math.min(width, height) * 0.45;
    const norm = Math.min(pull, maxPull) / maxPull;
    const speed = 6 + norm * 38;        // 6..44 m/s
    let ang = Math.atan2(dy, dx);
    if (!isFinite(ang)) ang = Math.PI / 4;
    // restrict to upper half so it always launches up-and-forward
    if (ang < 0) ang = 0;
    if (ang > Math.PI) ang = Math.PI;
    aim = { vx: Math.cos(ang) * speed, vy: Math.sin(ang) * speed, speed, angle: ang };
    recomputeGhosts();
  }
  if (!down && prevDown && dragging) {
    dragging = false;
    // fire
    live = {
      shots: ghosts.map(g => ({
        b: { x: 0, y: 0, vx: aim.vx, vy: aim.vy, t: 0, maxY: 0, alive: true },
        mode: g.mode, color: g.color, trail: [{ x: 0, y: 0 }],
      })),
    };
  }
  prevDown = down;

  // advance live shots
  if (live) {
    const sub = Math.min(dt, 1 / 30) / SUBSTEPS;
    for (const s of live.shots) {
      if (!s.b.alive) continue;
      for (let i = 0; i < SUBSTEPS; i++) {
        stepModel(s.b, sub, s.mode);
        if (s.b.y <= 0 && s.b.vy < 0) { s.b.y = 0; s.b.alive = false; break; }
      }
      s.trail.push({ x: s.b.x, y: s.b.y });
      if (s.trail.length > 1200) s.trail.shift();
    }
    if (live.shots.every(s => !s.b.alive)) {
      // hold the result on screen but allow re-fire on next drag
    }
  }

  // ---- render ----
  ctx.fillStyle = "rgb(8,12,20)";
  ctx.fillRect(0, 0, width, height);

  // ground
  const [, gy] = worldToPx(0, 0);
  ctx.fillStyle = "rgba(35,55,45,0.55)";
  ctx.fillRect(0, gy, width, height - gy);
  ctx.strokeStyle = "rgba(140,200,170,0.55)"; ctx.lineWidth = 1;
  ctx.beginPath(); ctx.moveTo(0, gy); ctx.lineTo(width, gy); ctx.stroke();

  // grid
  ctx.strokeStyle = "rgba(120,140,180,0.10)";
  for (let x = 0; x <= 60; x += 10) {
    const [px] = worldToPx(x, 0);
    ctx.beginPath(); ctx.moveTo(px, 0); ctx.lineTo(px, gy); ctx.stroke();
  }
  for (let y = 0; y <= 24; y += 4) {
    const [, py] = worldToPx(0, y);
    ctx.beginPath(); ctx.moveTo(0, py); ctx.lineTo(width, py); ctx.stroke();
  }

  // ghost (preview) trajectories — dashed
  ctx.lineWidth = 1.3;
  ctx.setLineDash([5, 5]);
  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 trails — solid, brighter
  if (live) {
    ctx.lineWidth = 2.2;
    for (const s of live.shots) {
      ctx.strokeStyle = s.color;
      ctx.beginPath();
      for (let i = 0; i < s.trail.length; i++) {
        const [px, py] = worldToPx(s.trail[i].x, s.trail[i].y);
        if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
      }
      ctx.stroke();
      // ball head
      const [bx, by] = worldToPx(s.b.x, s.b.y);
      ctx.fillStyle = s.color;
      ctx.beginPath(); ctx.arc(bx, by, 4, 0, Math.PI * 2); ctx.fill();
    }
  }

  // cannon + drag indicator
  ctx.fillStyle = "rgba(220,230,255,0.95)";
  ctx.beginPath(); ctx.arc(ox, oy, 7, 0, Math.PI * 2); ctx.fill();
  // aim arrow
  const aLen = Math.min(110, aim.speed * 3.2);
  const ax2 = ox + Math.cos(aim.angle) * aLen;
  const ay2 = oy - Math.sin(aim.angle) * aLen;
  ctx.strokeStyle = dragging ? "rgba(255,220,100,0.95)" : "rgba(255,220,100,0.55)";
  ctx.lineWidth = 2;
  ctx.beginPath(); ctx.moveTo(ox, oy); ctx.lineTo(ax2, ay2); ctx.stroke();
  // arrowhead
  const ah = 7;
  ctx.beginPath();
  ctx.moveTo(ax2, ay2);
  ctx.lineTo(ax2 - Math.cos(aim.angle - 0.4) * ah, ay2 + Math.sin(aim.angle - 0.4) * ah);
  ctx.moveTo(ax2, ay2);
  ctx.lineTo(ax2 - Math.cos(aim.angle + 0.4) * ah, ay2 + Math.sin(aim.angle + 0.4) * ah);
  ctx.stroke();

  // drag pullback visual
  if (dragging) {
    ctx.strokeStyle = "rgba(255,255,255,0.35)";
    ctx.setLineDash([3, 3]);
    ctx.beginPath();
    ctx.moveTo(dragStartX, dragStartY);
    ctx.lineTo(input.mouseX, input.mouseY);
    ctx.stroke();
    ctx.setLineDash([]);
  }

  // HUD: aim + stats table
  ctx.fillStyle = "rgba(0,0,0,0.45)";
  ctx.fillRect(8, 8, 220, 58);
  ctx.fillStyle = "rgba(220,230,255,0.95)";
  ctx.font = "12px system-ui, sans-serif";
  ctx.fillText(`v₀ = ${aim.speed.toFixed(1)} m/s   θ = ${(aim.angle * 180 / Math.PI).toFixed(0)}°`, 16, 26);
  ctx.fillText(dragging ? "release to fire" : "click + drag back to aim", 16, 44);
  ctx.fillText(`F_d (quad) = -k|v|v   F_d (lin) = -k v`, 16, 60);

  // stats panel
  const panelW = 230, panelX = width - panelW - 8;
  ctx.fillStyle = "rgba(0,0,0,0.45)";
  ctx.fillRect(panelX, 8, panelW, 76);
  ctx.fillStyle = "rgba(220,230,255,0.85)";
  ctx.font = "11px system-ui, sans-serif";
  ctx.fillText("model          range    h_max   t_flight", panelX + 8, 22);
  let ly = 38;
  for (const g of ghosts) {
    ctx.fillStyle = g.color;
    ctx.fillRect(panelX + 8, ly - 8, 10, 2);
    ctx.fillStyle = "rgba(220,230,255,0.9)";
    const name = g.mode === 0 ? "vacuum" : g.mode === 1 ? "quadratic" : "linear";
    ctx.fillText(name.padEnd(11, " "), panelX + 22, ly);
    ctx.fillText(`${g.range.toFixed(1)}m`, panelX + 100, ly);
    ctx.fillText(`${g.height.toFixed(1)}m`, panelX + 148, ly);
    ctx.fillText(`${g.tof.toFixed(2)}s`, panelX + 192, ly);
    ly += 16;
  }
}