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.
//
// Extra controls:
//   - When not dragging, mouseY sets horizontal wind in [-10, +10] m/s
//     (top of canvas = strong leftward, bottom = strong rightward). Wind only
//     affects the drag terms (the apparent-wind velocity changes), not vacuum.
//   - Idle for ~6s → auto-fire a preset shot every ~4s so the feed shows motion.
//   - Arrow Up/Down or "[" / "]" tweak gravity g in [3, 20] m/s² (moon ↔ jupiter).

let G = 9.81;                      // m/s^2, mutable via keys
const MIN_G = 3, MAX_G = 20;
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

const WIND_MAX = 10;               // m/s
const IDLE_BEFORE_AUTO = 6;        // seconds without aim → start auto-firing
const AUTO_INTERVAL = 4;           // seconds between auto-fires
const AUTO_PRESETS = [
  { speed: 30, angle: 55 * Math.PI / 180 },
  { speed: 24, angle: 40 * Math.PI / 180 },
  { speed: 36, angle: 70 * Math.PI / 180 },
];

let scaleM, originX, originY;
let prevDown, dragging, dragStartX, dragStartY;
let aim;                           // { vx, vy, speed, angle } current preview
let ghosts;                        // [{ mode, color, colorAlpha, label, trail, range, height, tof }]
let live;                          // active fired shot
let wind;                          // horizontal wind in m/s (world frame, +x to the right)
let idleTimer;                     // seconds since last user aim/fire activity
let autoTimer;                     // seconds since last auto-fire
let autoIdx;                       // which preset to fire next
let gPlusBtn, gMinusBtn;           // on-screen gravity tweak buttons (mobile-friendly)

// Scratch tuple to avoid per-call array allocation. NOT reentrant —
// caller must read both elements before the next worldToPx call.
const _wp = [0, 0];
function worldToPx(x, y) {
  _wp[0] = originX + x * scaleM;
  _wp[1] = originY - y * scaleM;
  return _wp;
}

// integrate one model: mode 0 = vacuum, 1 = quadratic, 2 = linear
// Wind is applied as an apparent-wind shift: drag acts on (v - wind), not v.
function stepModel(b, dt, mode, w) {
  let ax = 0, ay = -G;
  if (mode === 1) {
    const rvx = b.vx - w;
    const rvy = b.vy;
    const rv = Math.hypot(rvx, rvy);
    const c = K_QUAD * rv / MASS;
    ax -= c * rvx;
    ay -= c * rvy;
  } else if (mode === 2) {
    const c = K_LIN / MASS;
    ax -= c * (b.vx - w);
    ay -= c * b.vy;
  }
  // mode 0 (vacuum) ignores wind entirely
  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, w) {
  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, w);
    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%)",  colorAlpha: "hsla(50,100%,70%,0.55)",  label: "vacuum (no drag)",  trail: null, range: 0, height: 0, tof: 0 },
    { mode: 1, color: "hsl(15,95%,62%)",   colorAlpha: "hsla(15,95%,62%,0.55)",   label: "quadratic drag",    trail: null, range: 0, height: 0, tof: 0 },
    { mode: 2, color: "hsl(195,90%,65%)",  colorAlpha: "hsla(195,90%,65%,0.55)",  label: "linear (Stokes)",   trail: null, range: 0, height: 0, tof: 0 },
  ];
  wind = 0;
  idleTimer = 0;
  autoTimer = 0;
  autoIdx = 0;
  gPlusBtn = null;
  gMinusBtn = null;
  recomputeGhosts();
  live = null;
}

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

function fireShot() {
  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 }],
      // freeze the wind at fire time so a moving cursor doesn't warp the live arc
      w: wind,
    })),
  };
}

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;
  }

  // ---- on-screen gravity buttons (mobile-friendly) — laid out below HUD ----
  const gBtnSize = 26;
  const gBtnGap = 6;
  // Anchor under the HUD box (which is at 8,8 with size 248x90).
  gMinusBtn = { x: 16, y: 104, w: gBtnSize, h: gBtnSize, label: "−g" };
  gPlusBtn  = { x: 16 + gBtnSize + gBtnGap, y: 104, w: gBtnSize, h: gBtnSize, label: "+g" };

  // ---- keyboard: gravity tweaks ----
  let gChanged = false;
  if (input.justPressed("ArrowUp") || input.justPressed("]")) {
    G = Math.min(MAX_G, G + 1.5); gChanged = true;
  }
  if (input.justPressed("ArrowDown") || input.justPressed("[")) {
    G = Math.max(MIN_G, G - 1.5); gChanged = true;
  }

  // Consume clicks for the on-screen gravity buttons before the drag-aim
  // logic so that tapping them doesn't start a slingshot drag.
  const _clicks = input.consumeClicks ? input.consumeClicks() : [];
  for (let i = 0; i < _clicks.length; i++) {
    const c = _clicks[i];
    if (c.x >= gMinusBtn.x && c.x <= gMinusBtn.x + gMinusBtn.w &&
        c.y >= gMinusBtn.y && c.y <= gMinusBtn.y + gMinusBtn.h) {
      G = Math.max(MIN_G, G - 1.5); gChanged = true;
      idleTimer = 0; autoTimer = 0;
    } else if (c.x >= gPlusBtn.x && c.x <= gPlusBtn.x + gPlusBtn.w &&
               c.y >= gPlusBtn.y && c.y <= gPlusBtn.y + gPlusBtn.h) {
      G = Math.min(MAX_G, G + 1.5); gChanged = true;
      idleTimer = 0; autoTimer = 0;
    }
  }

  // ---- wind from mouseY when not dragging ----
  // top of canvas (y=0) → -WIND_MAX, bottom → +WIND_MAX
  let windChanged = false;
  if (!dragging && height > 0) {
    const my = Math.max(0, Math.min(height, input.mouseY));
    const newWind = (my / height) * 2 * WIND_MAX - WIND_MAX;
    if (Math.abs(newWind - wind) > 0.05) { wind = newWind; windChanged = true; }
  }

  if (gChanged || windChanged) recomputeGhosts();

  // ---- drag-to-aim interaction ----
  const down = input.mouseDown;
  const [ox, oy] = worldToPx(0, 0);
  // Suppress drag-start when the press lands on one of our buttons; otherwise
  // a button tap (on touch devices a tap fires both mousedown and click) would
  // start a slingshot drag and immediately fire a stray shot on release.
  function pressOnButton(x, y) {
    return (gMinusBtn && x >= gMinusBtn.x && x <= gMinusBtn.x + gMinusBtn.w &&
            y >= gMinusBtn.y && y <= gMinusBtn.y + gMinusBtn.h) ||
           (gPlusBtn  && x >= gPlusBtn.x  && x <= gPlusBtn.x  + gPlusBtn.w  &&
            y >= gPlusBtn.y  && y <= gPlusBtn.y  + gPlusBtn.h);
  }
  if (down && !prevDown && !pressOnButton(input.mouseX, input.mouseY)) {
    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();
    idleTimer = 0;
    autoTimer = 0;
  }
  if (!down && prevDown && dragging) {
    dragging = false;
    fireShot();
    idleTimer = 0;
    autoTimer = 0;
  }
  prevDown = down;

  // ---- idle / auto-fire bookkeeping ----
  if (!dragging) {
    idleTimer += dt;
    if (idleTimer >= IDLE_BEFORE_AUTO) {
      autoTimer += dt;
      if (autoTimer >= AUTO_INTERVAL) {
        autoTimer = 0;
        const p = AUTO_PRESETS[autoIdx % AUTO_PRESETS.length];
        autoIdx++;
        aim = {
          vx: Math.cos(p.angle) * p.speed,
          vy: Math.sin(p.angle) * p.speed,
          speed: p.speed,
          angle: p.angle,
        };
        recomputeGhosts();
        fireShot();
      }
    }
  }

  // ---- advance live shots (use each shot's frozen wind) ----
  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, s.w);
        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();
    }
  }

  // ---- 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();
  }

  // wind indicator: a faint horizontal arrow drawn mid-canvas
  if (Math.abs(wind) > 0.1) {
    const cy = Math.max(28, Math.min(height - 60, height * 0.32));
    const cx = width * 0.5;
    const mag = Math.abs(wind) / WIND_MAX;            // 0..1
    const len = 24 + mag * 140;
    const dir = wind > 0 ? 1 : -1;
    const ax1 = cx - dir * len / 2;
    const ax2 = cx + dir * len / 2;
    ctx.strokeStyle = `rgba(170,200,255,${0.18 + mag * 0.45})`;
    ctx.lineWidth = 2;
    ctx.beginPath(); ctx.moveTo(ax1, cy); ctx.lineTo(ax2, cy); ctx.stroke();
    // arrowhead at tip
    const head = 9;
    ctx.beginPath();
    ctx.moveTo(ax2, cy);
    ctx.lineTo(ax2 - dir * head, cy - head * 0.6);
    ctx.moveTo(ax2, cy);
    ctx.lineTo(ax2 - dir * head, cy + head * 0.6);
    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.colorAlpha;
    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, 248, 90);
  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);
  const windSign = wind >= 0 ? "+" : "";
  ctx.fillStyle = Math.abs(wind) > 0.1 ? "rgba(170,200,255,0.95)" : "rgba(220,230,255,0.65)";
  ctx.fillText(`wind: ${windSign}${wind.toFixed(1)} m/s   (move mouse ↕ to change)`, 16, 42);
  ctx.fillStyle = "rgba(220,230,255,0.95)";
  ctx.fillText(`g = ${G.toFixed(1)} m/s²   (tap ±g · or ↑/↓)`, 16, 58);
  ctx.fillStyle = "rgba(220,230,255,0.75)";
  ctx.fillText(dragging ? "release to fire" : (idleTimer >= IDLE_BEFORE_AUTO ? "auto-firing…" : "click + drag back to aim"), 16, 76);
  ctx.fillText(`F_d (quad) = -k|v−w|(v−w)`, 16, 92);

  // gravity tweak buttons (rendered just below the HUD)
  for (const gb of [gMinusBtn, gPlusBtn]) {
    if (!gb) continue;
    ctx.fillStyle = "rgba(40,46,68,0.85)";
    ctx.fillRect(gb.x, gb.y, gb.w, gb.h);
    ctx.strokeStyle = "rgba(200,210,255,0.45)";
    ctx.lineWidth = 1;
    ctx.strokeRect(gb.x + 0.5, gb.y + 0.5, gb.w - 1, gb.h - 1);
    ctx.fillStyle = "rgba(220,230,255,0.95)";
    ctx.font = "bold 13px system-ui, sans-serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(gb.label, gb.x + gb.w / 2, gb.y + gb.h / 2);
  }
  ctx.textAlign = "left";
  ctx.textBaseline = "alphabetic";

  // 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;
  }
}