The Moon's path around the Sun: no loops, and the Sun pulls it twice as hard

// game.js: the Sun, the Earth, and the Moon, integrated live, seen from the Earth out to the Sun.
// Units: m, m/s, s. The frame does not turn, and the center of mass of the three bodies rests at
// the origin. The notebook writes the constants, the preset distance, and the warp steps into #data.
"use strict";

const DATA = JSON.parse(document.getElementById("data").textContent);
const GM = [DATA.gm_sun, DATA.gm_earth, DATA.gm_moon];   // m³/s²: the Sun, the Earth, the Moon
const {au: AU, dt: DT, r_hill: R_HILL, r_lost: R_LOST, zoom_min: HALF_MIN, zoom_max: HALF_MAX} = DATA;
const DAY = 86400;
const SUN = 0, EARTH = 1, MOON = 2;

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

// ---- the model: three bodies and Newton's gravity
function accelerations(p) {
  const a = [[0, 0], [0, 0], [0, 0]];
  for (let i = 0; i < 3; i++) {
    for (let j = i + 1; j < 3; j++) {
      const d = sub(p[j], p[i]), r3 = len(d) ** 3;
      a[i][0] += GM[j] * d[0] / r3; a[i][1] += GM[j] * d[1] / r3;   // i is pulled toward j
      a[j][0] -= GM[i] * d[0] / r3; a[j][1] -= GM[i] * d[1] / r3;   // and j toward i
    }
  }
  return a;
}

function step(s) {                         // one velocity Verlet step: half kick, drift, half kick
  for (let i = 0; i < 3; i++) {
    s.v[i][0] += 0.5 * DT * s.a[i][0]; s.v[i][1] += 0.5 * DT * s.a[i][1];
    s.p[i][0] += DT * s.v[i][0]; s.p[i][1] += DT * s.v[i][1];
  }
  s.a = accelerations(s.p);
  for (let i = 0; i < 3; i++) { s.v[i][0] += 0.5 * DT * s.a[i][0]; s.v[i][1] += 0.5 * DT * s.a[i][1]; }
  s.t += DT;
  s.steps += 1;
  if (s.lostDay === null && len(sub(s.p[MOON], s.p[EARTH])) > R_LOST) s.lostDay = s.t / DAY;
  if (s.steps % DATA.trail_every === 0) {
    s.trail.push(s.p.map((q) => [...q]));
    if (s.trail.length > DATA.trail_max) s.trail.shift();
  }
}

// The start: the Earth and Moon's center of mass on a circle around the Sun at 1 AU, the Moon at
// distance r on the Sun's side (new moon), on a circle around the Earth, going the same way round.
function start(r) {
  const [mS, mE, mM] = GM, V = Math.sqrt((mS + mE + mM) / AU), v = Math.sqrt((mE + mM) / r);
  const fE = mM / (mE + mM), fM = mE / (mE + mM);
  const p = [[0, 0], [AU + fE * r, 0], [AU - fM * r, 0]];
  const u = [[0, 0], [0, V + fE * v], [0, V - fM * v]];
  for (const q of [p, u]) {                // move to the center of mass, at rest
    const c = [0, 1].map((k) => (mS * q[0][k] + mE * q[1][k] + mM * q[2][k]) / (mS + mE + mM));
    q.forEach((x) => { x[0] -= c[0]; x[1] -= c[1]; });
  }
  return {p, v: u, a: accelerations(p), t: 0, steps: 0, lostDay: null, trail: [p.map((q) => [...q])]};
}

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

// ---- the state: everything that changes, in one object
function fresh() {
  return {...start(DATA.r_moon), distance: DATA.r_moon, zoom: 0, warp: DATA.warp_start, running: true};
}

function restart(s) { Object.assign(s, start(s.distance)); }

// ---- the readouts: the two pulls on the Moon
function pulls(s) {
  const toSun = len(sub(s.p[SUN], s.p[MOON])), toEarth = len(sub(s.p[EARTH], s.p[MOON]));
  return {sun: GM[SUN] / toSun ** 2, earth: GM[EARTH] / toEarth ** 2, r: toEarth};
}

// ---- the zoom: the slider runs from 0 (the Earth) to 1 (the Sun)
function view(s) {
  const half = HALF_MIN * (HALF_MAX / HALF_MIN) ** s.zoom;   // m, half the view, logarithmic in the slider
  const w = (half - HALF_MIN) / (HALF_MAX - HALF_MIN);      // where the center sits from the Earth to the Sun
  return {half, w};
}
const center = (p, w) => [p[EARTH][0] + w * (p[SUN][0] - p[EARTH][0]), p[EARTH][1] + w * (p[SUN][1] - p[EARTH][1])];

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

function layout() {
  const W = document.documentElement.clientWidth, H = document.documentElement.clientHeight;
  document.body.className = H > W ? "upright" : H < 480 ? "wide short" : "wide";   // short: a phone held sideways
  const c = $("scene"), box = c.parentElement.getBoundingClientRect(), dpr = window.devicePixelRatio || 1;
  c.width = Math.round(box.width * dpr);
  c.height = Math.round(box.height * dpr);
  scene.ctx = c.getContext("2d");
  scene.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  Object.assign(scene, {w: box.width, h: box.height});
  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);
  ctx.fillStyle = fill;
  ctx.fill();
  if (stroke) { ctx.strokeStyle = stroke; ctx.lineWidth = 1.5; ctx.stroke(); }
}

function label(ctx, text, x, y, style, align = "left") {
  ctx.font = FONT;
  ctx.textAlign = align;
  ctx.lineJoin = "round";
  ctx.lineWidth = 4;
  ctx.strokeStyle = scene.bg;              // a halo in the background color keeps text clear of the trails
  ctx.strokeText(text, x, y);
  ctx.fillStyle = style;
  ctx.fillText(text, x, y);
}

function arrow(ctx, from, dir, length, style) {   // from a point, along a unit vector, length in px
  const to = [from[0] + dir[0] * length, from[1] + dir[1] * length], a = Math.atan2(dir[1], dir[0]), tip = 8;
  line(ctx, [from, to], style, 2.5);
  ctx.beginPath();
  ctx.moveTo(to[0], to[1]);
  ctx.lineTo(to[0] - tip * Math.cos(a - 0.45), to[1] - tip * Math.sin(a - 0.45));
  ctx.lineTo(to[0] - tip * Math.cos(a + 0.45), to[1] - tip * Math.sin(a + 0.45));
  ctx.closePath();
  ctx.fillStyle = style;
  ctx.fill();
}

function scaleBar(half, px) {              // a round length that is at most a quarter of the view
  const m = 0.5 * half;
  const base = 10 ** Math.floor(Math.log10(m)), nice = [5, 2, 1].map((k) => k * base).find((x) => x <= m);
  const text = nice >= 1e9 ? `${nice / 1e9} million km` : `${(nice / 1e3).toLocaleString("en-US")} km`;
  return {length: nice * px, text};
}

function drawScene(c) {
  const {ctx, w, h} = scene, s = state, {half, w: frac} = view(s);
  const px = Math.min(w, h) / (2 * half), cx = w / 2, cy = h / 2;
  // every point is drawn relative to the view's center at its own time
  const at = (q, p) => { const o = center(p, frac); return [cx + (q[0] - o[0]) * px, cy - (q[1] - o[1]) * px]; };
  ctx.clearRect(0, 0, w, h);
  scene.bg = c.bg;

  const E = at(s.p[EARTH], s.p), M = at(s.p[MOON], s.p), S = at(s.p[SUN], s.p);
  const hill = R_HILL * px;
  if (hill > 3) {
    line(ctx, Array.from({length: 121}, (_, k) => [E[0] + hill * Math.cos(k * Math.PI / 60),
      E[1] + hill * Math.sin(k * Math.PI / 60)]), c.muted, 1.2, [5, 5]);
    if (hill > 60) label(ctx, "Hill sphere", E[0], E[1] - hill - 6, c.muted, "center");
  }
  line(ctx, s.trail.map((p) => at(p[EARTH], p)), c.second, 1.5);
  line(ctx, [...s.trail.map((p) => at(p[MOON], p)), M], c.accent, 1.5);

  const inside = (q) => q[0] > 0 && q[0] < w && q[1] > 0 && q[1] < h;
  if (inside(S)) {
    disk(ctx, S, 9, c.ink);
    label(ctx, "Sun", S[0], S[1] + 26, c.ink, "center");
  } else {                                 // the Sun out of view: a pointer at the edge
    const d = sub(S, [cx, cy]), u = [d[0] / len(d), d[1] / len(d)];
    const r = Math.min((w / 2 - 16) / Math.abs(u[0] || 1e-9), (h / 2 - 34) / Math.abs(u[1] || 1e-9));   // clear of the scale bar
    const tipAt = [cx + u[0] * r, cy + u[1] * r];
    arrow(ctx, [tipAt[0] - 24 * u[0], tipAt[1] - 24 * u[1]], u, 24, c.ink);
    label(ctx, "Sun", tipAt[0] - 40 * u[0], tipAt[1] - 40 * u[1] + 5, c.ink, "center");
  }
  disk(ctx, E, 6, c.second, c.bg);
  // the label sits down and right of the Earth, just outside the Moon's orbit while that is small on screen
  const orbit = len(sub(M, E)), off = orbit < 90 ? Math.max(orbit, 6) + 8 : 10;
  label(ctx, "Earth", E[0] + 0.6 * off, E[1] + 0.8 * off + 12, c.second);
  disk(ctx, M, 4.5, c.accent, c.bg);

  // the two pulls on the Moon, to one scale: the Sun's in ink, the Earth's in the Earth's color
  const g = pulls(s), k = 0.025 * Math.min(w, h) / 1e-3;   // px per mm/s²
  const toS = sub(s.p[SUN], s.p[MOON]), toE = sub(s.p[EARTH], s.p[MOON]);
  const unit = (d) => [d[0] / len(d), -d[1] / len(d)];      // screen y points down
  arrow(ctx, M, unit(toS), g.sun * k, c.ink);
  arrow(ctx, M, unit(toE), g.earth * k, c.second);

  const bar = scaleBar(half, px);
  line(ctx, [[12, h - 14], [12 + bar.length, h - 14]], c.muted, 2);
  label(ctx, bar.text, 18 + bar.length, h - 9, c.muted);
}

function render() {
  const c = Object.fromEntries(["bg", "ink", "accent", "second", "muted"].map((n) => [n, color(n)]));
  drawScene(c);
  const g = pulls(state), {half, w} = view(state);
  $("sun").textContent = `${(1e3 * g.sun).toFixed(2)} mm/s²`;
  $("earth").textContent = `${(1e3 * g.earth).toFixed(2)} mm/s²`;
  $("ratio").textContent = (g.sun / g.earth).toFixed(2);
  $("dist").textContent = `${(Math.round(g.r / 1e5) * 100).toLocaleString("en-US")} km`;
  $("day").textContent = (state.t / DAY).toFixed(0);
  $("status").textContent = state.lostDay === null ? "held by the Earth" : `lost after ${state.lostDay.toFixed(0)} days`;
  $("frame").textContent = w < 0.0005 ? "centered on the Earth" : w > 0.9995 ? "centered on the Sun"
    : `centered ${(100 * w).toFixed(1)} % of the way to the Sun`;
  const across = 2 * half / 1e9;
  $("width").textContent = `${across < 100 ? across.toPrecision(2) : across.toFixed(0)} million km`;
  $("zoom").value = Math.round(1000 * state.zoom);
  $("start-val").textContent = `${Math.round(state.distance / 1e3).toLocaleString("en-US")} km`;
  $("warp-val").textContent = DATA.warp_names[state.warp];
  $("go").textContent = state.running ? "Pause" : "Play";
}

// ---- controls, keys, and the loop
const clamp = (x, lo, hi) => Math.min(hi, Math.max(lo, x));
function set(partial) {
  Object.assign(state, partial);
  if ("distance" in partial) restart(state);
  render();
}
function advance(days) {                   // for stills from the console: run ahead without drawing
  const until = state.t + days * DAY;
  while (state.t + DT <= until) step(state);
  render();
}
const nudgeZoom = (sign) => set({zoom: clamp(Math.round(20 * state.zoom + sign) / 20, 0, 1)});
const nudgeWarp = (sign) => set({warp: clamp(state.warp + sign, 0, DATA.warps.length - 1)});
function nudgeMoon(sign) {                 // to the next multiple of the step, outward or inward
  const k = DATA.r_step, r = state.distance;
  const next = sign > 0 ? Math.floor(r / k + 1e-9) * k + k : Math.ceil(r / k - 1e-9) * k - k;
  set({distance: clamp(next, DATA.r_min, DATA.r_max)});
}
const go = () => set({running: !state.running});
const reset = () => set(fresh());

$("zoom").addEventListener("input", (e) => set({zoom: e.target.value / 1000}));
$("zoom-minus").addEventListener("click", () => nudgeZoom(-1));
$("zoom-plus").addEventListener("click", () => nudgeZoom(1));
$("start-minus").addEventListener("click", () => nudgeMoon(-1));
$("start-plus").addEventListener("click", () => nudgeMoon(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 = {z: () => nudgeZoom(-1), x: () => nudgeZoom(1), "[": () => nudgeWarp(-1),
    "]": () => nudgeWarp(1), " ": go, 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);
  render();
  requestAnimationFrame(frame);
}

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