Orbital decay: why drag makes a satellite fly faster as it falls

// game.js: a space station circles the Earth in thin air, and drag brings it down.
// Units: m, m/s, s. The orbit lies in the x-y plane with the Earth at the origin; the station
// starts on the +x axis and circles counterclockwise. The notebook writes the constants and the
// density tables from NRLMSIS 2.0 into #data.
"use strict";

const DATA = JSON.parse(document.getElementById("data").textContent);
const {mu: MU, r_earth: R, b: B, dt: DT, max_steps: MAX_STEPS, h_end: H_END, stretch: STRETCH} = DATA;
const TABLE = DATA.table, DAY = 86400;

// ---- the model: gravity, and drag against the velocity
function density(h, sun) {                 // kg/m³, linear in log10 ρ between the table's rows
  const t = TABLE[sun], x = Math.min(Math.max((h / 1000 - TABLE.h_min) / TABLE.h_step, 0), t.length - 1.000001);
  const i = Math.floor(x), f = x - i;
  return 10 ** (t[i] * (1 - f) + t[i + 1] * f);
}

function accel(r, v, drag, sun) {
  const d = Math.hypot(r[0], r[1]), g = -MU / d ** 3;
  const a = [g * r[0], g * r[1]];
  if (drag) {                              // ½ ρ B v², along -v
    const k = -0.5 * density(d - R, sun) * B * Math.hypot(v[0], v[1]);
    a[0] += k * v[0];
    a[1] += k * v[1];
  }
  return a;
}

// velocity Verlet: half a kick, a drift, half a kick; the acceleration is kept for the next step
function step(s, dt) {
  const old = s.r;
  s.v = [s.v[0] + s.a[0] * dt / 2, s.v[1] + s.a[1] * dt / 2];
  s.r = [s.r[0] + s.v[0] * dt, s.r[1] + s.v[1] * dt];
  s.a = accel(s.r, s.v, s.drag, s.sun);
  s.v = [s.v[0] + s.a[0] * dt / 2, s.v[1] + s.a[1] * dt / 2];
  s.t += dt;
  const h = altitude(s.r);
  if (old[1] < 0 && s.r[1] >= 0) {         // one more revolution: the sink rate over the last one
    if (s.rev) s.sink = (s.rev.h - h) / (s.t - s.rev.t) * DAY;
    s.rev = {t: s.t, h};
  }
  if (s.t >= s.nextDot) {
    s.trail.push(s.r);
    if (s.trail.length > DATA.trail_max) s.trail.shift();
    s.nextDot += DATA.trail_every;
  }
  if (h < H_END) {
    s.ended = true;
    s.note = `re-entered after ${Math.round(s.t / DAY).toLocaleString("en-US")} days`;
  }
}

const altitude = (r) => Math.hypot(r[0], r[1]) - R;

function advance(s, seconds) {             // at most MAX_STEPS steps of at most DT
  const n = Math.min(Math.ceil(seconds / DT), MAX_STEPS);
  const dt = Math.min(DT, seconds / Math.max(n, 1));
  for (let k = 0; k < n && !s.ended; k++) step(s, dt);
}

function tick(s, dtReal) {
  if (!s.ended) advance(s, Math.min(dtReal, 0.05) * DATA.warps[s.warp]);   // the cap stops jumps
}

// ---- the state: everything that changes, in one object
function fresh(keep = {}) {
  const s = {drag: false, sun: "quiet", h0: DATA.alt_start, warp: DATA.warp_start, running: true, ...keep};
  const a0 = R + s.h0 * 1000;
  Object.assign(s, {t: 0, r: [a0, 0], v: [0, Math.sqrt(MU / a0)], trail: [], nextDot: 0,
    rev: null, sink: null, ended: false, note: ""});
  s.a = accel(s.r, s.v, s.drag, s.sun);
  return s;
}

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

function layout() {
  const W = document.documentElement.clientWidth, H = document.documentElement.clientHeight;
  document.body.className = H > W ? "upright" : "wide";
  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);
  view.ctx = c.getContext("2d");
  view.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  Object.assign(view, {w: box.width, h: box.height});
  render();
}

function ring(ctx, cx, cy, r, style, width, dash = []) {
  ctx.beginPath();
  ctx.arc(cx, cy, r, 0, 2 * Math.PI);
  ctx.strokeStyle = style;
  ctx.lineWidth = width;
  ctx.setLineDash(dash);
  ctx.stroke();
  ctx.setLineDash([]);
}

function key(ctx, text, dash, x, y, style) {    // a short line in the ring's dash pattern, then its name
  ctx.font = FONT;
  const kx = x - ctx.measureText(text).width;
  ctx.beginPath();
  ctx.moveTo(kx - 26, y - 5);
  ctx.lineTo(kx - 4, y - 5);
  ctx.strokeStyle = style;
  ctx.lineWidth = 1.2;
  ctx.setLineDash(dash);
  ctx.stroke();
  ctx.setLineDash([]);
  label(ctx, text, x, y, style, "right");
}

const hexRgb = (hex) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16)).join(", ");

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

// The scene: the Earth from above the orbit plane, heights stretched so that 400 km is visible
function drawScene(c) {
  const {ctx, w, h} = view, cx = w / 2, cy = h / 2;
  const top = TABLE.h_min + TABLE.h_step * (TABLE.quiet.length - 1);          // km, the table's last row
  const k = 0.47 * Math.min(w, h) / (R + STRETCH * top * 1000);                // px per m
  const rad = (hm) => (R + STRETCH * hm) * k;                                  // screen radius of an altitude in m
  const at = (p) => {                                                          // stretch the altitude, keep the angle
    const d = Math.hypot(p[0], p[1]), s = rad(d - R) / d;
    return [cx + p[0] * s, cy - p[1] * s];
  };
  ctx.clearRect(0, 0, w, h);
  // the air: one radial gradient with a stop per table row, more opaque where the air is denser
  const t = TABLE[state.sun], [lo, hi] = DATA.shade, rgb = hexRgb(state.sun === "active" ? c.accent : c.second);
  const air = ctx.createRadialGradient(cx, cy, rad(TABLE.h_min * 1000), cx, cy, rad(top * 1000));
  t.forEach((lg, i) => {
    const alpha = 0.7 * Math.min(Math.max((lg - lo) / (hi - lo), 0), 1);
    air.addColorStop(i / (t.length - 1), `rgba(${rgb}, ${alpha.toFixed(3)})`);   // inside 100 km the first stop's color fills down to the ground
  });
  ctx.fillStyle = air;
  ctx.beginPath();
  ctx.arc(cx, cy, rad(top * 1000), 0, 2 * Math.PI);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(cx, cy, R * k, 0, 2 * Math.PI);
  ctx.fillStyle = c.globe;
  ctx.fill();
  ring(ctx, cx, cy, R * k, c.ink, 1.5);
  ring(ctx, cx, cy, rad(H_END), c.muted, 1.2, [5, 5]);                         // re-entry
  ring(ctx, cx, cy, rad(state.h0 * 1000), c.muted, 1, [2, 4]);                 // the start
  // the trail of the last orbits, and the station
  if (state.trail.length) {
    ctx.beginPath();
    [...state.trail, state.r].map(at).forEach((p, i) => (i ? ctx.lineTo(...p) : ctx.moveTo(...p)));
    ctx.strokeStyle = c.ink;
    ctx.globalAlpha = 0.6;
    ctx.lineWidth = 1.5;
    ctx.stroke();
    ctx.globalAlpha = 1;
  }
  const p = at(state.r);
  ctx.beginPath();
  ctx.arc(p[0], p[1], 5, 0, 2 * Math.PI);
  ctx.fillStyle = c.ink;
  ctx.fill();
  ctx.strokeStyle = c.bg;
  ctx.lineWidth = 2;
  ctx.stroke();
  label(ctx, `heights ×${STRETCH}`, 8, h - 10, c.muted);
  key(ctx, `re-entry, ${H_END / 1000} km`, [5, 5], w - 8, h - 10, c.muted);
  key(ctx, `start, ${state.h0} km`, [2, 4], w - 8, h - 30, c.muted);
}

const fmt = (x) => Math.round(x).toLocaleString("en-US");

function render() {
  const c = Object.fromEntries(["bg", "ink", "accent", "second", "muted", "globe"].map((n) => [n, color(n)]));
  drawScene(c);
  const h = altitude(state.r);
  $("speed").textContent = `${(Math.hypot(state.v[0], state.v[1]) / 1000).toFixed(3)} km/s`;
  $("alt").textContent = `${(h / 1000).toFixed(1)} km`;
  $("sink").textContent = state.sink === null ? "–" : `${state.sink < 10 ? state.sink.toFixed(1) : fmt(state.sink)} m/day`;
  $("days").textContent = `${(state.t / DAY).toFixed(state.t < 10 * DAY ? 2 : 0)}`;
  $("note").textContent = state.note || (state.drag ? "drag on: the air brakes the station" : "drag off: the orbit holds");
  $("drag").textContent = state.drag ? "Drag on" : "Drag off";
  $("sun").textContent = state.sun === "active" ? "Sun active" : "Sun quiet";
  $("sun").className = state.sun;
  $("alt-val").textContent = `${state.h0} km`;
  $("warp-val").textContent = DATA.warp_names[state.warp];
  $("go").textContent = state.running ? "Pause" : "Play";
}

// ---- controls, keys, and the loop
function set(partial) {
  Object.assign(state, partial);
  state.a = accel(state.r, state.v, state.drag, state.sun);   // the force may have changed
  render();
}
const clamp = (x, lo, hi) => Math.min(hi, Math.max(lo, x));
const keep = () => ({drag: state.drag, sun: state.sun, h0: state.h0, warp: state.warp, running: state.running});
const reset = () => set(fresh(keep()));
const nudgeAlt = (sign) => set(fresh({...keep(), h0: clamp(state.h0 + sign * DATA.alt_step, DATA.alt_min, DATA.alt_max)}));
const nudgeWarp = (sign) => set({warp: clamp(state.warp + sign, 0, DATA.warps.length - 1)});
const toggleDrag = () => set({drag: !state.drag});
const toggleSun = () => set({sun: state.sun === "quiet" ? "active" : "quiet"});
const go = () => set({running: !state.running});

$("drag").addEventListener("click", toggleDrag);
$("sun").addEventListener("click", toggleSun);
$("alt-minus").addEventListener("click", () => nudgeAlt(-1));
$("alt-plus").addEventListener("click", () => nudgeAlt(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 = {d: toggleDrag, s: toggleSun, " ": go, r: reset, "[": () => nudgeWarp(-1), "]": () => nudgeWarp(1),
    "-": () => nudgeAlt(-1), "=": () => nudgeAlt(1), "+": () => nudgeAlt(1)};
  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);
// for stills from the console: game.set({drag: true, sun: "active"}); game.fly(150 * 86400)
window.game = {state, set, render, fly: (seconds) => { while (!state.ended && seconds > 0) {
  const span = Math.min(seconds, MAX_STEPS * DT); advance(state, span); seconds -= span; } render(); }};