Throw a stone into orbit on Deimos: at jogging pace it hits you in the back

// game.js: throw a stone from the surface of Deimos and see where it ends up.
// Units: m, m/s, s. The frame turns with Deimos's orbit around Mars, so the ground stands still
// in it: x points away from Mars, y along the orbit, and the astronaut stands under Mars at (-R, 0).
// The notebook writes the constants, the preset throw, and the warp steps into #data.
"use strict";

const DATA = JSON.parse(document.getElementById("data").textContent);
const {mu: MU, r: R, omega: OMEGA, h0: H0, h_astro: H_ASTRO, r_hill: R_HILL, r_lost: R_LOST, dt: DT} = DATA;
const DEG = Math.PI / 180;
const UP = [-1, 0], WITH = [0, -1];        // toward Mars; along the ground with the rotation

// ---- the model: Hill's equations
function accel(r, v, tide) {
  const [x, y] = r, r3 = Math.hypot(x, y) ** 3;
  let ax = -MU * x / r3 + 2 * OMEGA * v[1] + OMEGA ** 2 * x;   // Deimos, Coriolis, centrifugal
  let ay = -MU * y / r3 - 2 * OMEGA * v[0] + OMEGA ** 2 * y;
  if (tide) { ax += 2 * OMEGA ** 2 * x; ay -= OMEGA ** 2 * y; }  // Mars pulls the near side harder
  return [ax, ay];
}

const axpy = (a, k, b) => [a[0] + k * b[0], a[1] + k * b[1]];   // a + k b

function rk4(r, v, dt, tide) {             // the classic fourth-order Runge-Kutta step
  const k1r = v, k1v = accel(r, v, tide);
  const k2r = axpy(v, dt / 2, k1v), k2v = accel(axpy(r, dt / 2, k1r), axpy(v, dt / 2, k1v), tide);
  const k3r = axpy(v, dt / 2, k2v), k3v = accel(axpy(r, dt / 2, k2r), axpy(v, dt / 2, k2v), tide);
  const k4r = axpy(v, dt, k3v), k4v = accel(axpy(r, dt, k3r), axpy(v, dt, k3v), tide);
  const mix = (a, b, c, d) => [(a[0] + 2 * b[0] + 2 * c[0] + d[0]) / 6, (a[1] + 2 * b[1] + 2 * c[1] + d[1]) / 6];
  return {r: axpy(r, dt, mix(k1r, k2r, k3r, k4r)), v: axpy(v, dt, mix(k1v, k2v, k3v, k4v))};
}

function starEnergy(r, v) {                // J/kg relative to the stars, for Deimos alone
  const vs = [v[0] - OMEGA * r[1], v[1] + OMEGA * r[0]];
  return 0.5 * (vs[0] ** 2 + vs[1] ** 2) - MU / Math.hypot(r[0], r[1]);
}

const along = (r) => R * Math.atan2(-r[1], -r[0]);   // m along the ground from the astronaut, + with the rotation
const height = (r) => Math.hypot(r[0], r[1]) - R;
const hours = (t) => `${(t / 3600).toFixed(2)} h`;

// ---- one step, and the three things that can end a throw
function step(s) {
  const old = s.r, next = rk4(s.r, s.v, DT, s.tide);
  s.r = next.r; s.v = next.v; s.t += DT;
  if (old[0] < 0 && s.r[0] < 0 && s.t > 600 && Math.sign(old[1]) !== Math.sign(s.r[1])) {
    const f = old[1] / (old[1] - s.r[1]);             // over the astronaut: interpolate the height
    const p = axpy(old, f, [s.r[0] - old[0], s.r[1] - old[1]]), h = height(p);
    if (h < H_ASTRO) {
      Object.assign(s, {r: p, t: s.t - (1 - f) * DT});  // stop the stone where it meets the astronaut
      return end(s, "hit", `hit you in the back after ${hours(s.t)}`);
    }
    s.note = `passed over you ${h < 1000 ? `${h.toFixed(0)} m` : `${(h / 1000).toFixed(1)} km`} up after ${hours(s.t)}`;
  }
  if (height(s.r) < 0) {
    const d = along(s.r), side = d >= 0 ? "with" : "against";
    return end(s, "ground", `landed ${(Math.abs(d) / 1000).toFixed(1)} km from you, ${side} the rotation, after ${hours(s.t)}`);
  }
  if (Math.hypot(s.r[0], s.r[1]) > R_LOST && (s.tide || starEnergy(s.r, s.v) >= 0)) {
    return end(s, "lost", s.tide ? `lost to Mars after ${hours(s.t)}` : `gone for good after ${hours(s.t)}`);
  }
  if (s.t >= s.nextDot) { s.trail.push(s.r); s.nextDot += DATA.trail_every; }
}

function end(s, outcome, text) {
  s.trail.push(s.r);
  Object.assign(s, {flying: false, outcome, note: text});
}

function tick(s, dtReal) {
  const until = s.t + Math.min(dtReal, 0.05) * DATA.warps[s.warp];   // the cap stops jumps
  while (s.flying && s.t < until) step(s);
}

// ---- the state: everything that changes, in one object
function fresh() {
  return {speed: DATA.preset.speed, angle: DATA.preset.angle, tide: true, warp: DATA.warp_start,
    running: true, flying: false, thrown: false, outcome: null, note: "press Throw",
    t: 0, r: release(), v: [0, 0], trail: [], ghost: null, nextDot: 0, aim: null, zoom: DATA.zoom_min};
}
function release() { return [UP[0] * (R + H0), UP[1] * (R + H0)]; }

function throwStone(s = state) {
  const a = s.angle * DEG, d = [Math.cos(a) * WITH[0] + Math.sin(a) * UP[0], Math.cos(a) * WITH[1] + Math.sin(a) * UP[1]];
  const ghost = s.trail.length ? {pts: s.trail, tide: s.lastTide} : s.ghost;
  Object.assign(s, {t: 0, r: release(), v: [s.speed * d[0], s.speed * d[1]], trail: [release()], ghost,
    flying: true, thrown: true, outcome: null, note: "in flight", nextDot: DATA.trail_every, lastTide: s.tide});
  render();
}

function advance(seconds) {                // for stills from the console: fly ahead without drawing
  const until = state.t + seconds;
  while (state.flying && state.t < until) step(state);
  render();
}

// ---- drawing
const $ = (id) => document.getElementById(id);
const color = (name) => getComputedStyle(document.documentElement).getPropertyValue(`--${name}`).trim();
const FONT = "14px system-ui, sans-serif";
const views = {near: {id: "near"}, far: {id: "far"}};

function fit(v) {                          // size a canvas to its box, sharp on any screen
  const c = $(v.id), box = c.parentElement.getBoundingClientRect(), dpr = window.devicePixelRatio || 1;
  c.width = Math.round(box.width * dpr);
  c.height = Math.round(box.height * dpr);
  v.ctx = c.getContext("2d");
  v.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  Object.assign(v, {w: box.width, h: box.height});
}

function layout() {
  const W = document.documentElement.clientWidth, H = document.documentElement.clientHeight;
  document.body.className = H > W ? "upright" : "wide";
  fit(views.near);
  fit(views.far);
  render();
}

function line(ctx, pts, style, width, dash = []) {
  ctx.beginPath();
  pts.forEach((p, k) => (k ? ctx.lineTo(p[0], p[1]) : ctx.moveTo(p[0], p[1])));
  ctx.strokeStyle = style;
  ctx.lineWidth = width;
  ctx.setLineDash(dash);
  ctx.stroke();
  ctx.setLineDash([]);
}

function disk(ctx, [x, y], r, fill, stroke) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI);
  if (fill) { ctx.fillStyle = fill; ctx.fill(); }
  if (stroke) { ctx.strokeStyle = stroke; ctx.lineWidth = 2; ctx.stroke(); }
}

function label(ctx, text, x, y, style, align = "left") {
  ctx.font = FONT;
  ctx.textAlign = align;
  ctx.fillStyle = style;
  ctx.fillText(text, x, y);
}

function arrow(ctx, [x0, y0], [x1, y1], style, width = 2) {
  const a = Math.atan2(y1 - y0, x1 - x0), tip = 9;
  line(ctx, [[x0, y0], [x1, y1]], style, width);
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x1 - tip * Math.cos(a - 0.4), y1 - tip * Math.sin(a - 0.4));
  ctx.lineTo(x1 - tip * Math.cos(a + 0.4), y1 - tip * Math.sin(a + 0.4));
  ctx.closePath();
  ctx.fillStyle = style;
  ctx.fill();
}

// The near view: the astronaut on the ground under Mars, about 16 m across. Mars and the bend of the
// ground are drawn larger than they are, so that both fit; the stone is to scale with the astronaut.
function nearGeometry(v) {
  const k = Math.min(v.w / 16, v.h / 9);                  // px per m
  // the feet high enough that the ground's edges stay above the two labels at the bottom
  const foot = [v.w / 2, Math.min(0.82 * v.h, v.h - 28 - v.w / 17.6)];
  return {k, foot, hand: [foot[0], foot[1] - H0 * k], speedPx: 0.4 * Math.min(v.w, v.h) / DATA.speed_max};
}

function drawNear(v, c) {
  const {ctx, w, h} = v, {k, foot, hand, speedPx} = nearGeometry(v);
  ctx.clearRect(0, 0, w, h);
  // Mars overhead, as large as the 16.6° it spans from Deimos would look with the head at the bottom edge
  const mr = 0.5 * h * Math.tan(DATA.mars_deg / 2 * DEG) * 2.2, mars = [w / 2, 4 + mr];
  disk(ctx, mars, mr, state.tide ? c.mars : c.globe);
  label(ctx, state.tide ? "Mars" : "Mars off", mars[0], mars[1] + 5, state.tide ? c.ink : c.muted, "center");
  // the ground, bent more than it is
  const bend = 2.2 * w;
  ctx.beginPath();
  ctx.arc(foot[0], foot[1] + bend, bend, 0, 2 * Math.PI);
  ctx.fillStyle = c.globe;
  ctx.fill();
  ctx.strokeStyle = c.ink;
  ctx.lineWidth = 1.5;
  ctx.stroke();
  label(ctx, "rotation →", w - 8, h - 10, c.muted, "right");
  label(ctx, "drag from the hand to throw", 8, h - 10, c.muted);       // on the ground, clear of Mars
  // the astronaut: 2 m tall, a stick figure facing the way Deimos turns
  const head = [foot[0], foot[1] - 1.75 * k];
  line(ctx, [[foot[0] - 0.25 * k, foot[1]], [foot[0], foot[1] - 0.9 * k], [foot[0] + 0.25 * k, foot[1]]], c.ink, 3);
  line(ctx, [[foot[0], foot[1] - 0.9 * k], [foot[0], foot[1] - 1.55 * k]], c.ink, 3);
  line(ctx, [[foot[0] - 0.35 * k, foot[1] - 1.1 * k], [foot[0], foot[1] - 1.4 * k], hand], c.ink, 3);
  disk(ctx, head, 0.22 * k, c.bg, c.ink);
  // the throw: the aim while dragging, else the loaded throw
  const a = (state.aim ? state.aim.angle : state.angle) * DEG, sp = state.aim ? state.aim.speed : state.speed;
  if (!state.flying || state.aim) {
    const tip = [hand[0] + sp * speedPx * Math.cos(a), hand[1] - sp * speedPx * Math.sin(a)];
    arrow(ctx, hand, tip, c.accent, 3);
    const text = `${sp.toFixed(2)} m/s`;
    if (Math.sin(a) > 0.7) {                // steep: beside the shaft, so the number stays clear of Mars
      label(ctx, text, Math.max(hand[0], tip[0]) + 8, (hand[1] + tip[1]) / 2, c.accent);
    } else {
      label(ctx, text, tip[0] + (Math.cos(a) >= 0 ? 6 : -6), tip[1] - 6, c.accent, Math.cos(a) >= 0 ? "left" : "right");
    }
  }
  // the stone, when it is within the view
  if (state.thrown) {
    const s = along(state.r), z = height(state.r);
    const p = [foot[0] + s * k, foot[1] - z * k];
    if (p[0] > -10 && p[0] < w + 10 && p[1] > -10) disk(ctx, p, 5, c.accent, c.bg);
  }
}

// The far view: Deimos to scale, the Hill sphere, and the stone's path
function drawFar(v, c) {
  const {ctx, w, h} = v, k = Math.min(w, h - 48) / (2 * state.zoom), cx = w / 2, cy = h / 2;   // 24 px for the keys
  const at = (p) => [cx - p[1] * k, cy + p[0] * k];       // screen right: with the rotation; up: toward Mars
  ctx.clearRect(0, 0, w, h);
  ctx.beginPath();
  ctx.arc(cx, cy, R_HILL * k, 0, 2 * Math.PI);
  ctx.strokeStyle = c.muted;
  ctx.lineWidth = 1.2;
  ctx.setLineDash([5, 5]);
  ctx.stroke();
  ctx.setLineDash([]);
  disk(ctx, [cx, cy], R * k, c.globe, c.ink);
  // the keys sit in the corners, clear of the circle at any zoom: Mars up at the top left,
  // the scale bar at the bottom left, the Hill sphere's dashes at the bottom right
  arrow(ctx, [14, 40], [14, 4], state.tide ? c.ink : c.muted, 1.5);
  label(ctx, state.tide ? "to Mars" : "to Mars (off)", 22, 18, state.tide ? c.ink : c.muted);
  const hill = `Hill sphere, ${(R_HILL / 1000).toFixed(1)} km`;
  ctx.font = FONT;
  const hx = w - 8 - ctx.measureText(hill).width;
  line(ctx, [[hx - 26, h - 14], [hx - 4, h - 14]], c.muted, 1.2, [5, 5]);
  label(ctx, hill, w - 8, h - 9, c.muted, "right");
  if (state.ghost) {
    ctx.globalAlpha = 0.35;
    line(ctx, state.ghost.pts.map(at), state.ghost.tide ? c.accent : c.second, 1.5);
    ctx.globalAlpha = 1;
  }
  if (state.thrown) {
    const col = state.lastTide ? c.accent : c.second;
    line(ctx, [...state.trail, state.r].map(at), col, 2);
    disk(ctx, at(state.r), 5, col, c.bg);
  }
  disk(ctx, at(release()), 3, c.ink);
  line(ctx, [[8, h - 14], [8 + 10000 * k, h - 14]], c.muted, 2);
  label(ctx, "10 km", 12 + 10000 * k, h - 9, c.muted);
}

function zoomTarget() {                    // half the far view: 15 % beyond the farthest point flown
  let far = 0;
  for (const p of state.trail) far = Math.max(far, Math.hypot(p[0], p[1]));
  far = Math.max(far, Math.hypot(state.r[0], state.r[1]));
  return Math.min(DATA.zoom_max, Math.max(DATA.zoom_min, 1.15 * far));
}

function render() {
  const c = Object.fromEntries(["bg", "fg", "ink", "accent", "second", "muted", "globe", "mars"].map((n) => [n, color(n)]));
  drawNear(views.near, c);
  drawFar(views.far, c);
  const sp = state.aim ? state.aim.speed : state.speed, an = state.aim ? state.aim.angle : state.angle;
  $("speed").textContent = `${sp.toFixed(2)} m/s`;
  $("angle").textContent = `${an.toFixed(0)}°`;
  $("height").textContent = `${(Math.max(0, height(state.r)) / 1000).toFixed(2)} km`;
  $("clock").textContent = hours(state.t);
  $("note").textContent = state.note;
  $("mars").textContent = state.tide ? "Mars on" : "Mars off";
  $("go").textContent = state.running ? "Pause" : "Play";
  $("warp-val").textContent = DATA.warp_names[state.warp];
}

// ---- controls, keys, and the loop
function set(partial) {
  Object.assign(state, partial);
  render();
}
const clamp = (x, lo, hi) => Math.min(hi, Math.max(lo, x));
const nudgeSpeed = (sign) => { set({speed: clamp(state.speed + sign * DATA.speed_step, 0, DATA.speed_max)}); throwStone(); };
const nudgeWarp = (sign) => set({warp: clamp(state.warp + sign, 0, DATA.warps.length - 1)});
const toggleMars = () => set({tide: !state.tide});
const go = () => set({running: !state.running});
const reset = () => set(fresh());

function aimAt(e) {                        // the drag from the hand sets speed and direction
  const v = views.near, box = $("near").getBoundingClientRect(), {hand, speedPx} = nearGeometry(v);
  const dx = e.clientX - box.left - hand[0], dy = hand[1] - (e.clientY - box.top);
  const angle = dy > 0 ? Math.atan2(dy, dx) / DEG : (dx >= 0 ? 0 : 180);   // only the upper half
  const speed = clamp(Math.round(100 * Math.hypot(dx, Math.max(dy, 0)) / speedPx) / 100, 0, DATA.speed_max);
  state.aim = {speed, angle: Math.round(angle)};
  render();
}
$("near").addEventListener("pointerdown", (e) => { $("near").setPointerCapture(e.pointerId); aimAt(e); });
$("near").addEventListener("pointermove", (e) => { if (state.aim) aimAt(e); });
$("near").addEventListener("pointerup", () => {
  if (!state.aim) return;
  Object.assign(state, {speed: state.aim.speed, angle: state.aim.angle, aim: null});
  throwStone();
});
$("throw").addEventListener("click", () => throwStone());
$("speed-minus").addEventListener("click", () => nudgeSpeed(-1));
$("speed-plus").addEventListener("click", () => nudgeSpeed(1));
$("mars").addEventListener("click", toggleMars);
$("go").addEventListener("click", go);
$("warp-minus").addEventListener("click", () => nudgeWarp(-1));
$("warp-plus").addEventListener("click", () => nudgeWarp(1));
$("reset").addEventListener("click", reset);
document.addEventListener("keydown", (e) => {
  const actions = {t: () => throwStone(), " ": go, "-": () => nudgeSpeed(-1), "=": () => nudgeSpeed(1),
    "+": () => nudgeSpeed(1), m: toggleMars, "[": () => nudgeWarp(-1), "]": () => nudgeWarp(1), r: reset};
  const act = actions[e.key.toLowerCase()];
  if (act && !(e.target instanceof HTMLButtonElement && e.key === " ")) {
    e.preventDefault();
    act();
  }
});

const state = fresh();
let last = null;
function frame(now) {                      // called by the browser once per screen refresh
  const dt = last === null ? 0 : (now - last) / 1000;
  last = now;
  if (state.running) tick(state, dt);
  state.zoom += (zoomTarget() - state.zoom) * Math.min(1, 3 * dt);   // ease toward the new size in about 1 s
  render();
  requestAnimationFrame(frame);
}

window.addEventListener("resize", layout);
new ResizeObserver(layout).observe($("farbox"));   // the boxes also change when the readouts rewrap
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", render);
layout();
requestAnimationFrame(frame);
window.game = {state, set, render, throwStone, advance};