Gravity assist past Jupiter: faster in the Sun's frame, not in Jupiter's

// game.js: aim a probe past Jupiter and watch its speed in two frames. Units: km, km/s, s.
// The Sun sits fixed far above the views; Jupiter moves along +x on a circle; the probe
// feels both. The notebook writes the constants and the gain curve into the #data element.
"use strict";

const DATA = JSON.parse(document.getElementById("data").textContent);
const {gm_sun: GM_SUN, gm_j: GM_J, r_j: R_J, a_j: A_J, v_inf: V_INF} = DATA;
const V_J = Math.sqrt(GM_SUN / A_J), OMEGA = V_J / A_J;
const R_START = DATA.r_start * R_J;                       // the flight starts and ends this far out
const DAY = 86400;
const WARPS = [1 / 24, 3 / 24, 0.5, 1, 2, 4];             // days of flight per second of play
const PHI = (-DATA.approach_deg * Math.PI) / 180;         // direction of v∞,in; 0 is Jupiter's motion
const U_IN = [Math.cos(PHI), Math.sin(PHI)];
const N_AIM = [Math.cos(PHI - Math.PI / 2), Math.sin(PHI - Math.PI / 2)];   // the side "behind"

// ---- small vector helpers
const add = (a, b) => [a[0] + b[0], a[1] + b[1]];
const sub = (a, b) => [a[0] - b[0], a[1] - b[1]];
const scale = (a, k) => [a[0] * k, a[1] * k];
const len = (a) => Math.hypot(a[0], a[1]);

// ---- the state: everything that changes, in one object
const DEFAULTS = {aim: DATA.aim_voyager, warp: 3, t: 0, r: [0, 0], v: [0, 0], running: false, done: false,
  hit: false, rmin: Infinity, speeds: null, trail: [], dots: []};
const state = {...DEFAULTS, dots: []};

function jupiter(t) {                                     // position and velocity on the circle
  const th = -Math.PI / 2 + OMEGA * t;                    // at t = 0 Jupiter is at (0, -a), moving along +x
  return {p: [A_J * Math.cos(th), A_J * Math.sin(th)], v: [-V_J * Math.sin(th), V_J * Math.cos(th)]};
}

function closest(aim) {                                   // closest approach and turn for an aim in R_J
  const b = Math.max(Math.abs(aim), 0.05) * R_J, k = V_INF ** 2 / GM_J;
  const rp = (Math.sqrt(1 + (b * k) ** 2) - 1) / k;       // from b v∞ = r_p v_p and the energy
  const vp = Math.sqrt(V_INF ** 2 + 2 * GM_J / rp);
  const delta = 2 * Math.asin(1 / (1 + rp * k));          // sin(δ/2) = 1/e
  return {rp, vp, delta};
}

const stepSize = (d, w) => Math.min(3600, 0.01 * len(d) / len(w));   // s; short where it is close and fast

function accel(r, t) {                                    // the Sun's pull plus Jupiter's
  const d = sub(r, jupiter(t).p);
  return add(scale(r, -GM_SUN / len(r) ** 3), scale(d, -GM_J / len(d) ** 3));
}

// ---- the launch: start at closest approach, run Jupiter's pull alone backward to 300 R_J
function launch(aim) {
  const {rp, vp, delta} = closest(aim), s = aim >= 0 ? 1 : -1;
  const psi = PHI + s * delta / 2;                        // v∞,in turned by half the turn
  let v = [vp * Math.cos(psi), vp * Math.sin(psi)];
  let r = scale([Math.cos(psi - s * Math.PI / 2), Math.sin(psi - s * Math.PI / 2)], rp);   // at right angles
  let t = 0;
  while (len(r) < R_START) {
    const h = -stepSize(r, v);                            // the same step, backward in time
    v = add(v, scale(r, -0.5 * h * GM_J / len(r) ** 3));
    r = add(r, scale(v, h));
    v = add(v, scale(r, -0.5 * h * GM_J / len(r) ** 3));
    t += h;
  }
  const J = jupiter(t);
  return {t, r: add(J.p, r), v: add(J.v, v)};
}

function prepare() {                                      // the probe at its start, nothing flown yet
  const L = launch(state.aim);
  const rel = sub(L.v, jupiter(L.t).v);
  Object.assign(state, {t: L.t, r: L.r, v: L.v, running: false, done: false, hit: false, rmin: Infinity,
    speeds: {sunIn: len(L.v), jupIn: len(rel)}, trail: []});
  record();
}

function record() {                                       // one point of the path, in both frames, in R_J
  const J = jupiter(state.t), J0 = jupiter(0).p;
  state.trail.push([...scale(sub(state.r, J0), 1 / R_J), ...scale(sub(state.r, J.p), 1 / R_J)]);
}

// ---- one Verlet step, and one tick of play
function step() {
  const J = jupiter(state.t);
  const h = stepSize(sub(state.r, J.p), sub(state.v, J.v));
  state.v = add(state.v, scale(accel(state.r, state.t), h / 2));   // half a kick
  state.r = add(state.r, scale(state.v, h));                        // a drift
  state.t += h;
  state.v = add(state.v, scale(accel(state.r, state.t), h / 2));   // half a kick
  const d = len(sub(state.r, jupiter(state.t).p));
  state.rmin = Math.min(state.rmin, d);
  record();
  if (d < R_J) Object.assign(state, {running: false, hit: true});
  else if (state.t > 0 && d >= R_START) {
    Object.assign(state, {running: false, done: true});
    state.dots.push([state.aim, len(state.v) - state.speeds.sunIn]);
  }
}

function tick(dt) {
  const end = state.t + Math.min(dt, 0.05) * WARPS[state.warp] * DAY;   // the cap stops jumps
  while (state.running && state.t < end) step();
}

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

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

function layout() {
  const W = document.documentElement.clientWidth, H = document.documentElement.clientHeight;
  document.body.className = H > W ? "upright" : "wide";
  for (const id of ["sun", "jup", "strip"]) views[id] = fit(id);
  const [x0, x1, y0, y1] = DATA.sun_view, s = views.sun;
  s.k = Math.min((s.w - 8) / (x1 - x0), (s.h - 24) / (y1 - y0));   // px per R_J; room for the title
  s.cx = s.w / 2 - ((x0 + x1) / 2) * s.k;
  s.cy = 22 + (s.h - 22) / 2 + ((y0 + y1) / 2) * s.k;
  const j = views.jup;
  j.k = Math.min(j.w, j.h) / 90;                          // ±45 R_J in the shorter direction
  j.cx = j.w / 2;
  j.cy = j.h / 2;
  render();
}

const px = (v, x, y) => [v.cx + x * v.k, v.cy - y * v.k];

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

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

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

function drawSun(c) {                                     // the Sun's frame: the scene
  const v = views.sun, ctx = v.ctx, J0 = jupiter(0).p;
  ctx.clearRect(0, 0, v.w, v.h);
  const at = (p) => px(v, (p[0] - J0[0]) / R_J, (p[1] - J0[1]) / R_J);
  const track = [];
  for (let x = -1.2; x <= 1.2; x += 0.05) track.push(at(jupiter((x * v.w / v.k * R_J) / V_J).p));
  line(ctx, track, c.muted, 1);
  const J = jupiter(state.t);
  ctx.beginPath();
  ctx.arc(...at(J.p), R_START / R_J * v.k, 0, 2 * Math.PI);   // where the flight starts and ends
  ctx.strokeStyle = c.muted;
  ctx.lineWidth = 1;
  ctx.setLineDash([4, 4]);
  ctx.stroke();
  ctx.setLineDash([]);
  line(ctx, state.trail.map((p) => px(v, p[0], p[1])), c.accent, 2);
  disk(ctx, at(J.p), Math.max(5, v.k), c.ink);            // not to scale here: at least 5 px
  if (!state.hit) disk(ctx, at(state.r), 4, c.accent);
  label(ctx, "Sun's frame", 6, 16, c.fg);
  label(ctx, "↑ to the Sun", v.w - 6, 16, c.muted, "right");
}

function drawJupiter(c) {                                 // Jupiter's frame: the hyperbola and the aim
  const v = views.jup, ctx = v.ctx;
  ctx.clearRect(0, 0, v.w, v.h);
  const aimAt = (b) => px(v, b * N_AIM[0], b * N_AIM[1]);
  line(ctx, [aimAt(-DATA.aim_max), aimAt(DATA.aim_max)], c.muted, 1);
  const [bx, by] = aimAt(state.aim);
  line(ctx, [[bx - 200 * v.k * U_IN[0], by + 200 * v.k * U_IN[1]], [bx, by]], c.muted, 1.2, [5, 4]);
  disk(ctx, [v.cx, v.cy], Math.max(2, v.k), c.ink);       // to scale: 1 R_J
  line(ctx, state.trail.map((p) => px(v, p[2], p[3])), c.second, 2);
  const last = state.trail[state.trail.length - 1];
  if (!state.hit) disk(ctx, px(v, last[2], last[3]), 4, c.second);
  ctx.beginPath();
  ctx.arc(bx, by, 7, 0, 2 * Math.PI);
  ctx.strokeStyle = c.fg;
  ctx.lineWidth = 2;
  ctx.stroke();
  const end = (b, text) => {                              // a name just past each end of the aim line
    const [x0, y0] = aimAt(b), [x1, y1] = aimAt(b * 1.001), out = Math.sign(x1 - x0);
    ctx.textBaseline = "middle";
    label(ctx, text, x0 + out * 10, Math.min(v.h - 10, Math.max(30, y0 + Math.sign(y1 - y0) * 8)), c.muted,
      out > 0 ? "left" : "right");
    ctx.textBaseline = "alphabetic";
  };
  end(DATA.aim_max, "behind");
  end(-DATA.aim_max, "in front");
  label(ctx, "Jupiter's frame", 6, 16, c.fg);
  if (!state.running && !state.done && !state.hit) label(ctx, "drag to aim", v.w - 6, v.h - 6, c.muted, "right");
}

function drawStrip(c) {                                   // the gain for each aim: the notebook's curve, your launches
  const v = views.strip, ctx = v.ctx, g = DATA.gain_curve;
  ctx.clearRect(0, 0, v.w, v.h);
  const lo = Math.min(...g.gain) - 1, hi = Math.max(...g.gain) + 1, left = 70, right = 8;
  const at = (b, y) => [left + ((b + DATA.aim_max) / (2 * DATA.aim_max)) * (v.w - left - right),
    4 + ((hi - y) / (hi - lo)) * (v.h - 8)];
  line(ctx, [at(-DATA.aim_max, 0), at(DATA.aim_max, 0)], c.muted, 1);
  line(ctx, [at(-DATA.aim_max, 10), at(DATA.aim_max, 10)], c.muted, 1, [2, 3]);
  label(ctx, "gain 0", left - 6, at(0, 0)[1] + 5, c.muted, "right");
  label(ctx, "+10 km/s", left - 6, at(0, 10)[1] + 5, c.muted, "right");
  label(ctx, "in front", at(-9, 0)[0], v.h - 4, c.muted, "right");   // beside the gap where the probe hits
  label(ctx, "behind", at(9, 0)[0], v.h - 4, c.muted);
  for (const side of [-1, 1]) {                           // the hit band in the middle splits the curve
    const pts = g.aim.map((b, i) => [b, g.gain[i]]).filter(([b]) => b * side > 0);
    line(ctx, pts.map(([b, y]) => at(b, y)), c.ink, 1.5);
  }
  line(ctx, [at(state.aim, lo), at(state.aim, hi)], c.muted, 1, [3, 3]);   // your aim
  for (const [b, y] of state.dots) disk(ctx, at(b, y), 3.5, c.accent);
}

function render() {
  const c = Object.fromEntries(["fg", "ink", "accent", "second", "muted"].map((n) => [n, color(n)]));
  drawSun(c);
  drawJupiter(c);
  drawStrip(c);
  const J = jupiter(state.t), sp = state.speeds;
  $("v-sun").textContent = `${len(state.v).toFixed(2)} km/s`;
  $("v-sun-in").textContent = `in ${sp.sunIn.toFixed(2)}`;
  $("v-jup").textContent = `${len(sub(state.v, J.v)).toFixed(2)} km/s`;
  $("v-jup-in").textContent = `in ${sp.jupIn.toFixed(2)}`;
  const close = state.hit ? "hit Jupiter" : `closest ${(state.rmin / R_J).toFixed(2)} ${RJ}`;
  $("closest").innerHTML = state.rmin < Infinity ? `${close} · ` : "";
  $("clock").textContent = `t ${state.t < 0 ? "−" : "+"}${Math.abs(state.t / DAY).toFixed(1)} d`;
  $("aim-val").innerHTML = `${Math.abs(state.aim).toFixed(1)} ${RJ} ${state.aim >= 0 ? "behind" : "in front"}`;
  $("warp-val").textContent = ["1 h", "3 h", "12 h", "1 day", "2 days", "4 days"][state.warp] + "/s";
  $("go").textContent = state.running ? "Pause" : state.done || state.hit || state.rmin === Infinity ? "Launch" : "Resume";
}

// ---- controls, keys, dragging, and the loop
function set(partial) {
  Object.assign(state, partial);
  if ("aim" in partial) {
    state.aim = Math.min(DATA.aim_max, Math.max(-DATA.aim_max, Math.round(state.aim * 20) / 20));
    prepare();
  }
  render();
}
const nudgeAim = (sign) => set({aim: state.aim + sign * DATA.aim_step});
const nudgeWarp = (sign) => set({warp: Math.min(WARPS.length - 1, Math.max(0, state.warp + sign))});
function go() {
  if (state.done || state.hit) prepare();
  set({running: !state.running});
}
const reset = () => set({...DEFAULTS, dots: []});

$("aim-minus").addEventListener("click", () => nudgeAim(-1));
$("aim-plus").addEventListener("click", () => nudgeAim(1));
$("warp-minus").addEventListener("click", () => nudgeWarp(-1));
$("warp-plus").addEventListener("click", () => nudgeWarp(1));
$("go").addEventListener("click", go);
$("reset").addEventListener("click", reset);
document.addEventListener("keydown", (e) => {
  const actions = {ArrowLeft: () => nudgeAim(-1), ArrowRight: () => nudgeAim(1), " ": go,
    "[": () => nudgeWarp(-1), "]": () => nudgeWarp(1), r: reset};
  const act = actions[e.key.length === 1 ? e.key.toLowerCase() : e.key];
  if (act && !(e.target instanceof HTMLButtonElement && e.key === " ")) {
    e.preventDefault();
    act();
  }
});

// A drag moves the aim by the pointer's motion along the aim line, geared down by half,
// so the finger never covers the handle it moves.
let drag = null;
const jup = $("jup");
jup.addEventListener("pointerdown", (e) => {
  drag = {x: e.clientX, y: e.clientY, aim: state.aim};
  jup.setPointerCapture(e.pointerId);
});
jup.addEventListener("pointermove", (e) => {
  if (!drag) return;
  const along = (e.clientX - drag.x) * N_AIM[0] - (e.clientY - drag.y) * N_AIM[1];
  set({aim: drag.aim + (0.5 * along) / views.jup.k});
});
for (const type of ["pointerup", "pointercancel"]) jup.addEventListener(type, () => { drag = null; });

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(dt);
    render();
  }
  requestAnimationFrame(frame);
}

window.addEventListener("resize", layout);
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", render);
prepare();
layout();
requestAnimationFrame(frame);
window.game = {state, set, render};