Relativistic flight at 0.9 c: aberration, Doppler colors, and the twin clocks

// game.js: fly from Earth to Alpha Centauri and back at up to 0.999999 c, and watch the sky
// through four windows. Units: years, light years, c = 1. The notebook writes the sky
// (stars, Sun, planets, Alpha Centauri, blackbody colors) into the #data element.
"use strict";

const DATA = JSON.parse(document.getElementById("data").textContent);
const NIGHT = "#05070d";           // the sky inside the windows, in both themes
const LABEL = "#c9d0e3";           // names of the Sun and Alpha Centauri, on the night sky
const SHORT = {"Alpha Centauri": "α Cen"};   // for a window too narrow for the full name
const R_MAX = 6;                   // largest star radius, CSS px
const M_LIM = 7.5;                 // a star fainter than this magnitude gets no draw call
const NEAR_MIN = 1e-6;             // ly; a near object closer than this has no direction
const T_STAR = 5800;               // K, the Sun-like star of the effect lines
const WARP_MIN = 1 / 8766, WARP_MAX = 1;   // yr of Earth time per s: one hour to one year
const BETA_MIN = 0.01, BETA_MAX = 0.999999; // the speed slider's range, in c

// ---- the state: everything that changes, in one object
const DEFAULTS = {beta: 0.01, warp: WARP_MIN, t: 0, tau: 0, x: 0, heading: 1, running: false, arrived: false};
const state = {...DEFAULTS};

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

const XYZ = DATA.stars.xyz, V = DATA.stars.v, TEMP = DATA.stars.temp;
const TARGET = unit(DATA.near.find((o) => o.name === "Alpha Centauri").pos);

// ---- one tick: advance Earth time by the real time since the last frame
function tick(dt) {
  if (!state.running) return;
  let step = Math.min(dt, 0.05) * state.warp;          // Earth years; the cap stops jumps
  const goal = state.heading > 0 ? DATA.distance_ly : 0;
  const left = Math.abs(goal - state.x);
  if (state.beta * step >= left) {                      // land exactly on the goal
    step = left / state.beta;
    state.running = false;
    state.arrived = true;
  }
  state.t += step;
  state.tau += step * Math.sqrt(1 - state.beta ** 2);   // dτ = dt / γ
  state.x = state.arrived ? goal : state.x + state.heading * state.beta * step;
}

// ---- aberration and Doppler factor of one direction s (Earth's frame), seen from the ship
function aberrate(sx, sy, sz, n, beta, gamma, out) {
  const mu = sx * n[0] + sy * n[1] + sz * n[2];        // cos θ
  const D = gamma * (1 + beta * mu);
  const k = ((gamma - 1) * mu + gamma * beta) / D;
  out[0] = sx / D + k * n[0];                           // s′ = (s + ((γ − 1)μ + γβ) n) / D
  out[1] = sy / D + k * n[1];
  out[2] = sz / D + k * n[2];
  return D;
}

// ---- the four windows around the direction of flight n; up is celestial north
function basis() {
  const n = scale(TARGET, state.heading);
  const u = unit(sub([0, 0, 1], scale(n, n[2])));       // the pole, made perpendicular to n
  const r = cross(n, u);
  const windows = [
    {name: "port", axis: scale(r, -1), right: n},
    {name: "forward", axis: n, right: r},
    {name: "starboard", axis: r, right: scale(n, -1)},
    {name: "aft", axis: scale(n, -1), right: scale(r, -1)},
  ];
  return {n, u, r, windows};
}

// A direction goes to the window it faces most, projected as in a pinhole camera.
function project(s, b) {
  const a = dot(s, b.n), c = dot(s, b.r);
  let k;                                                // 0 port, 1 forward, 2 starboard, 3 aft
  if (Math.abs(a) >= Math.abs(c)) k = a >= 0 ? 1 : 3;   // more along the flight: forward or aft
  else k = c >= 0 ? 2 : 0;                              // more sideways: starboard or port
  const w = b.windows[k], depth = dot(s, w.axis);
  const x = dot(s, w.right) / depth, y = dot(s, b.u) / depth;
  return Math.abs(y) > 1 ? null : {k, x, y};
}

const colorIndex = (T) => Math.min(120, Math.max(0, Math.round(40 * (Math.log10(T) - 3))));

function starMarker(m) {                                // radius (CSS px) and opacity from magnitude
  const r = Math.min(R_MAX, Math.max(0.4, 0.5 * 10 ** (-0.12 * (m - 5))));
  return [r, Math.min(1, Math.max(0, (M_LIM - m) / 2))];
}

// Three significant digits with thousands separators: 25,300 and 0.00277.
const SUP = {"-": "⁻", 0: "⁰", 1: "¹", 2: "²", 3: "³", 4: "⁴", 5: "⁵", 6: "⁶", 7: "⁷", 8: "⁸", 9: "⁹"};
function sig3(x) {                                      // 3 significant digits; 2.5·10⁻¹³ when far from 1
  if (x !== 0 && (Math.abs(x) >= 1e6 || Math.abs(x) < 1e-3)) {
    const [m, e] = x.toExponential(2).split("e");
    return `${Number(m)}·10${[...String(Number(e))].map((c) => SUP[c]).join("")}`;
  }
  return Number(x.toPrecision(3)).toLocaleString("en-US", {maximumFractionDigits: 6});
}

function hudText(s) {                                   // the clock panel, line by line
  const gamma = 1 / Math.sqrt(1 - s.beta ** 2);
  const out = s.heading > 0;
  const left = out ? DATA.distance_ly - s.x : s.x;
  const status = s.arrived ? (out ? "Arrived at Alpha Centauri" : "Home") : (out ? "Outbound" : "Homebound");
  return [`Earth ${s.t.toFixed(2)} yr`, `Ship ${s.tau.toFixed(2)} yr`,
    `γ ${gamma.toFixed(2)} · to ${out ? "Alpha Centauri" : "Earth"} ${left.toFixed(2)} ly`, status];
}

// The speed slider moves log10(γβ): each decade of slow speeds, and near c each further
// nine of β (0.9, 0.99, 0.999), gets about the same length of slider.
const toSlider = (beta) => Math.log10(beta / Math.sqrt(1 - beta ** 2));
function fromSlider(p) {                                // inverse of toSlider, rounded to a readable β
  const u = 10 ** p, beta = u / Math.hypot(1, u);
  return beta <= 0.5 ? Number(beta.toPrecision(2)) : 1 - Number((1 - beta).toPrecision(2));
}
// ↑ and ↓ step through round speeds: 0.01, 0.015, 0.02, 0.03, 0.05, 0.07, 0.1, … 0.5, and
// above 0.5 the same round numbers for 1 - β: 0.7, 0.8, 0.85, 0.9, 0.93, … 0.99, … 0.999999.
const LADDER = [];
for (let e = -2; e <= -1; e++) for (const m of [1, 1.5, 2, 3, 5, 7]) LADDER.push(Number((m * 10 ** e).toPrecision(2)));
LADDER.splice(LADDER.indexOf(0.7));                     // the slow half ends at 0.5
for (let e = -1; e >= -6; e--) for (const m of [3, 2, 1.5, 1, 0.7, 0.5]) {
  const gap = Number((m * 10 ** e).toPrecision(2));     // 1 - β
  if (gap >= 1e-6 && gap < 0.5 && !LADDER.includes(1 - gap)) LADDER.push(1 - gap);
}

function speedText(beta) {                              // "0.01 c", "0.9 c", "0.999999 c"
  const digits = beta <= 0.5 ? beta.toPrecision(2) : beta.toFixed(Math.ceil(-Math.log10(1 - beta)) + 1);
  return `${Number(digits)} c`;
}

function warpText(w) {                                  // "1 hour", "3 months", "1 year"
  const d = w * 365.25;
  const [v, name] = d < 1 ? [d * 24, "hour"] : d < 7 ? [d, "day"] : d < 30.4 ? [d / 7, "week"]
    : w < 1 ? [w * 12, "month"] : [w, "year"];
  const r = Number(v.toPrecision(2));
  return `${r} ${name}${r === 1 ? "" : "s"}`;
}

// ---- drawing
const canvas = document.getElementById("sky");
const ctx = canvas.getContext("2d");
const $ = (id) => document.getElementById(id);
let view = {};                                          // sizes in CSS px, set by layout()

function layout() {
  const W = document.documentElement.clientWidth, dpr = window.devicePixelRatio || 1;
  const font = parseFloat(getComputedStyle(document.body).fontSize);   // the page's text size, 14 px and up
  const narrow = W < 600, pad = narrow ? 2 : 6, gap = 4, names = narrow ? 0 : Math.round(1.6 * font);
  const cols = document.documentElement.clientHeight > W ? 2 : 4, rows = 4 / cols;   // upright: two by two
  const height = (win) => pad + rows * (win + names) + (rows - 1) * gap;
  let win = (W - 2 * pad - (cols - 1) * gap) / cols;
  canvas.style.height = `${height(win)}px`;
  const over = $("panel").scrollHeight - $("panel").clientHeight;   // a short frame: smaller windows
  if (over > 0) win = Math.max(48, win - over / rows);
  const H = height(win), left = (W - cols * win - (cols - 1) * gap) / 2;
  canvas.style.height = `${H}px`;
  canvas.width = Math.round(W * dpr);
  canvas.height = Math.round(H * dpr);
  view = {W, H, dpr, narrow, pad, gap, names, cols, left, win, font, size: Math.min(1, Math.max(0.5, win / 274))};
  render();
}

const origin = (k) => [view.left + (k % view.cols) * (view.win + view.gap),   // window k's top left corner
  view.pad + Math.floor(k / view.cols) * (view.win + view.names + view.gap)];
const toPixel = (k, x, y) => {
  const [x0, y0] = origin(k);
  return [x0 + (1 + x) * view.win / 2, y0 + (1 - y) * view.win / 2];
};

function drawPoint(px, py, r, a) {
  ctx.globalAlpha = a;
  if (r < 1.2) ctx.fillRect(px - r, py - r, 2 * r, 2 * r);
  else { ctx.beginPath(); ctx.arc(px, py, r, 0, 2 * Math.PI); ctx.fill(); }
}

function render() {
  const b = basis(), beta = state.beta, gamma = 1 / Math.sqrt(1 - beta ** 2);
  const css = getComputedStyle(document.documentElement);
  ctx.setTransform(view.dpr, 0, 0, view.dpr, 0, 0);
  ctx.globalCompositeOperation = "source-over";
  ctx.globalAlpha = 1;
  ctx.fillStyle = css.getPropertyValue("--bg");
  ctx.fillRect(0, 0, view.W, view.H);
  ctx.save();
  ctx.beginPath();
  for (let k = 0; k < 4; k++) ctx.rect(...origin(k), view.win, view.win);
  ctx.fillStyle = NIGHT;
  ctx.fill();
  ctx.clip();

  // stars: sorted into buckets by color, so the fill style changes 121 times, not 9,000
  const buckets = DATA.colors.map(() => []);
  const s = [0, 0, 0];
  for (let i = 0; i < V.length; i++) {
    const D = aberrate(XYZ[3 * i], XYZ[3 * i + 1], XYZ[3 * i + 2], b.n, beta, gamma, s);
    const m = V[i] - 5 * Math.log10(D);                // each star's light grows by D²
    if (m > M_LIM) continue;
    const p = project(s, b);
    if (p) buckets[colorIndex(TEMP[i] * D)].push(p.k, p.x, p.y, m);
  }
  buckets.forEach((list, c) => {
    ctx.fillStyle = DATA.colors[c];
    for (let j = 0; j < list.length; j += 4) {
      const [r, a] = starMarker(list[j + 3]);
      drawPoint(...toPixel(list[j], list[j + 1], list[j + 2]), r * view.size, a);
    }
  });

  // the Sun, the planets, and Alpha Centauri: direction and brightness from where the ship is
  const ship = scale(TARGET, state.x);
  const labels = [];
  for (const o of DATA.near) {
    const rel = sub(o.pos, ship), d = Math.hypot(rel[0], rel[1], rel[2]);
    if (d < NEAR_MIN) continue;
    const D = aberrate(rel[0] / d, rel[1] / d, rel[2] / d, b.n, beta, gamma, s);
    const p = project(s, b);
    if (!p) continue;
    const m = o.v + 5 * Math.log10(d / Math.hypot(...o.pos)) - 5 * Math.log10(D);
    const [px, py] = toPixel(p.k, p.x, p.y);
    const [r, a] = starMarker(m);
    ctx.fillStyle = DATA.colors[colorIndex(o.temp * D)];
    drawPoint(px, py, r * view.size, a);
    if (o.label) labels.push({k: p.k, px, py, r: r * view.size, name: o.name});
  }

  // the ring: directions 90° from the flight in Earth's frame, where they appear now
  ctx.globalAlpha = 1;
  ctx.beginPath();
  let prev = null;
  for (let j = 0; j <= 360; j++) {
    const phi = (j * Math.PI) / 180;
    const ring = [0, 1, 2].map((i) => Math.cos(phi) * b.u[i] + Math.sin(phi) * b.r[i]);
    aberrate(ring[0], ring[1], ring[2], b.n, beta, gamma, s);
    const p = project(s, b);
    const [px, py] = p ? toPixel(p.k, p.x, p.y) : [0, 0];
    if (p && prev && prev.k === p.k) ctx.lineTo(px, py);
    else if (p) ctx.moveTo(px, py);
    prev = p;
  }
  const line = Math.max(1.2, 1.8 * view.size);
  ctx.strokeStyle = NIGHT;                              // a dark halo, so the dashes show on dense stars
  ctx.lineWidth = line + 4 * view.size;
  ctx.stroke();
  ctx.strokeStyle = css.getPropertyValue("--muted");
  ctx.lineWidth = line;
  ctx.setLineDash([5 * view.size + 1, 4 * view.size + 1]);
  ctx.stroke();
  ctx.setLineDash([]);

  // names above their objects (below, if that spot is taken), kept inside their window, with a dark halo
  ctx.font = `${view.font}px system-ui, sans-serif`;
  ctx.textAlign = "center";
  ctx.lineJoin = "round";
  ctx.lineWidth = 4;
  ctx.strokeStyle = NIGHT;
  ctx.fillStyle = LABEL;
  const placed = [];
  for (const {k, px, py, r, name} of labels) {
    const text = ctx.measureText(name).width > view.win - 8 ? SHORT[name] ?? name : name;
    const half = ctx.measureText(text).width / 2, [x0, y0] = origin(k);
    const x = Math.min(x0 + view.win - 4 - half, Math.max(x0 + 4 + half, px));
    let y = Math.max(y0 + (view.narrow ? 2.2 : 1.1) * view.font, py - r - 5);   // below a corner name
    const hits = (q) => Math.abs(q.x - x) < q.half + half && Math.abs(q.y - y) < view.font;
    if (placed.some(hits)) y = py + r + 4 + 0.8 * view.font;
    placed.push({x, y, half});
    ctx.strokeText(text, x, y);
    ctx.fillText(text, x, y);
  }
  ctx.textAlign = "left";
  ctx.restore();

  // window names: under the windows, or inside their top left corners when narrow
  ctx.font = `${view.font}px system-ui, sans-serif`;
  ctx.fillStyle = view.narrow ? LABEL : css.getPropertyValue("--muted");
  ctx.textBaseline = "top";
  b.windows.forEach((w, k) => {
    const [x0, y0] = origin(k);
    ctx.fillText(w.name, x0 + 4, view.narrow ? y0 + 3 : y0 + view.win + 0.25 * view.font);
  });
  ctx.textBaseline = "alphabetic";

  // the clock panel, the effect lines, and the controls
  const [earth, shipClock, info, status] = hudText(state);
  $("earth").textContent = earth;
  $("ship").textContent = shipClock;
  $("info").textContent = info;
  $("status").textContent = status;
  const ahead = gamma * (1 + beta), behind = gamma * (1 - beta);
  const cone = sig3((Math.acos(beta) * 180) / Math.PI);
  $("fx-ring").textContent = `${cone}°`;
  $("fx-hot").textContent = `${sig3(T_STAR * ahead)} K`;
  $("fx-cold").textContent = `${sig3(T_STAR * behind)} K`;
  $("sw-hot").style.background = DATA.colors[colorIndex(T_STAR * ahead)];
  $("sw-cold").style.background = DATA.colors[colorIndex(T_STAR * behind)];
  $("fx-bright").textContent = `×${sig3(ahead ** 4)}`;
  $("fx-dark").textContent = `×${sig3(behind ** 4)}`;
  $("fx-short").textContent = `cone ${cone}° · D ahead ${sig3(ahead)}`;
  $("speed").value = toSlider(beta);
  $("speed-val").textContent = speedText(beta);
  $("warp").value = Math.log(state.warp / WARP_MIN) / Math.log(WARP_MAX / WARP_MIN);
  $("warp-val").textContent = warpText(state.warp);
  $("play").textContent = state.running ? "Pause" : "Play";
  $("play").disabled = state.arrived;
  $("turn").disabled = !(state.arrived && state.heading > 0);
  $("slower").disabled = state.beta <= BETA_MIN;
  $("faster").disabled = state.beta >= BETA_MAX;
}

// ---- controls, keys, and the loop
function set(partial) {
  Object.assign(state, partial);
  render();
}
const setSpeed = (beta) => set({beta: Math.min(BETA_MAX, Math.max(BETA_MIN, beta))});
function nudgeSpeed(sign) {                             // ↑ and ↓: the next round speed of LADDER
  const steps = sign > 0 ? LADDER : [...LADDER].reverse();
  const next = steps.find((b) => sign * (b - state.beta) > 1e-12);
  if (next !== undefined) setSpeed(next);
}
const togglePlay = () => { if (!state.arrived) set({running: !state.running}); };
const turnAround = () => { if (state.arrived && state.heading > 0) set({heading: -1, arrived: false, running: true}); };

$("speed").min = toSlider(BETA_MIN);
$("speed").max = toSlider(BETA_MAX);
$("speed").addEventListener("input", (e) => setSpeed(fromSlider(Number(e.target.value))));
$("warp").addEventListener("input", (e) => set({warp: WARP_MIN * (WARP_MAX / WARP_MIN) ** Number(e.target.value)}));
$("slower").addEventListener("click", () => nudgeSpeed(-1));
$("faster").addEventListener("click", () => nudgeSpeed(1));
$("play").addEventListener("click", togglePlay);
$("reset").addEventListener("click", () => set({...DEFAULTS}));
$("turn").addEventListener("click", turnAround);
document.addEventListener("keydown", (e) => {
  const actions = {" ": togglePlay, ArrowUp: () => nudgeSpeed(1), ArrowDown: () => nudgeSpeed(-1),
    r: () => set({...DEFAULTS}), t: turnAround};
  const act = actions[e.key.length === 1 ? e.key.toLowerCase() : e.key];
  const native = (e.target instanceof HTMLInputElement && e.key.startsWith("Arrow"))
    || (e.target instanceof HTMLButtonElement && e.key === " ");   // the focused control handles these
  if (act && !native) {
    e.preventDefault();
    act();
  }
});

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);
layout();
layout();                                               // again, now that the panel holds its text
requestAnimationFrame(frame);
window.game = {state, set, render};