Coriolis force on a merry-go-round: why a throw curves only for the rider

// game.js: throw a ball across a turning merry-go-round and watch it in two frames. Units: m, m/s, s.
// The platform turns counterclockwise seen from above. The ball moves in the ground frame: a straight
// line on the flat platform, a pull -Ω² p on the dish. The rider's view rotates the same state by
// -angle, so it never integrates anything. The notebook writes the constants into the #data element.
"use strict";

const DATA = JSON.parse(document.getElementById("data").textContent);
const {radius: R, h: H, half: HALF, gear: GEAR, v_max: V_MAX, periods: PERIODS, slows: SLOWS} = DATA;
const POSTS = 16;                                         // fence posts on the ground, outside the rim

// ---- 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]);
const rotate = (a, th) => [Math.cos(th) * a[0] - Math.sin(th) * a[1], Math.sin(th) * a[0] + Math.cos(th) * a[1]];
const toRider = (p, angle) => rotate(p, -angle);         // ground coordinates into the platform's

// ---- the state: everything that changes, in one object
const DEFAULTS = {t: 0, angle: 0, period: 4, dish: false, slow: 0.25, p: [-R, 0], v: [0, 0],
  flying: false, tThrow: 0, angleThrow: 0, tStop: null, miss: null, trail: []};
const state = {...DEFAULTS, trail: []};

const omega = () => (state.period ? (2 * Math.PI) / state.period : 0);   // period 0: at rest
const start = () => DATA.throws[state.dish ? "dish" : "flat"].start;

function hold() {                                         // the ball at rest in the hand, turning with it
  const w = omega();
  state.p = rotate(start(), state.angle);
  state.v = [-w * state.p[1], w * state.p[0]];
}

// ---- one velocity Verlet step in the ground frame
function step(h) {
  const w = omega(), k = state.dish ? -w * w : 0;        // the dish's slope pulls with -Ω² p
  state.v = add(state.v, scale(state.p, (k * h) / 2));   // half a kick
  state.p = add(state.p, scale(state.v, h));             // a drift
  state.v = add(state.v, scale(state.p, (k * h) / 2));   // half a kick
  state.angle += w * h;
  state.t += h;
}

// ---- the throw: u is the ball's velocity relative to the thrower's hand, in the platform's axes
function throwBall(u) {
  hold();
  const w = omega(), p = state.p;
  state.v = add(rotate(u, state.angle), [-w * p[1], w * p[0]]);   // plus the hand's own Ω ẑ × p
  Object.assign(state, {flying: true, tThrow: state.t, angleThrow: state.angle, tStop: null, miss: null, trail: []});
  record();
}
const throwStated = () => throwBall(DATA.throws[state.dish ? "dish" : "flat"].u);

function record() {                                       // one point of the path, in both frames
  state.trail.push([...toRider(state.p, state.angle), ...state.p]);
  if (state.trail.length > 3000) state.trail.shift();    // a loop on the dish runs on; keep the last 6 s
}

function stop() {
  state.flying = false;
  state.tStop = state.t;
}

// ---- the rim: where in the last step the ball crossed it, and how far the friend was
function crossRim(prev) {
  const f = (R - len(prev)) / (len(state.p) - len(prev));
  const late = H * (1 - f), angle = state.angle - omega() * late;
  const hit = add(prev, scale(sub(state.p, prev), f));
  const friend = rotate([R, 0], angle);
  state.miss = {d: len(sub(hit, friend)), t: state.t - late - state.tThrow, hit, angle,
    side: toRider(hit, angle)[1] < 0 ? "right" : "left"};
  if (state.dish) {                                       // the ball stops at the dish's edge
    state.p = hit;
    stop();
  }
}

function advance() {
  if (!state.flying) {
    state.angle += omega() * H;
    state.t += H;
    hold();
    return;
  }
  const prev = state.p;
  step(H);
  if (state.miss === null && len(state.p) >= R) crossRim(prev);
  record();
  if (len(state.p) > 1.5 * HALF) stop();                 // off the ground view on the flat platform
}

let carry = 0;                                            // game time not yet stepped
function tick(dt) {
  carry += Math.min(dt, 0.05) * state.slow;              // the cap stops jumps after a hidden tab
  while (carry >= H) {
    carry -= H;
    advance();
  }
}

// ---- drawing
const $ = (id) => document.getElementById(id);
const color = (name) => getComputedStyle(document.documentElement).getPropertyValue(`--${name}`).trim();
const FONT = "14px system-ui, sans-serif";
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);
  const top = box.width > box.height + 120 ? 0 : 18;    // a wide box keeps the title beside the ground
  const k = Math.min(box.width, box.height - top) / (2 * HALF);  // px per m
  return {ctx, w: box.width, h: box.height, k, cx: box.width / 2, cy: top + (box.height - top) / 2};
}

function layout() {
  const W = document.documentElement.clientWidth, Hh = document.documentElement.clientHeight;
  document.body.className = Hh > 1.1 * W ? "upright" : "wide";
  for (const id of ["rider", "ground"]) views[id] = fit(id);
  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 circle(ctx, [x, y], r, style, width, dash = []) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI);
  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", base = "alphabetic") {
  ctx.font = FONT;
  ctx.textAlign = align;
  ctx.textBaseline = base;
  ctx.strokeStyle = color("bg");                          // a halo, so lines under the text do not cut it
  ctx.lineWidth = 3;
  ctx.lineJoin = "round";
  ctx.strokeText(text, x, y);
  ctx.fillStyle = style;
  ctx.fillText(text, x, y);
  ctx.textBaseline = "alphabetic";
}

// One drawing routine for both views: the platform turned by aP, the ground by aG.
// Ground view: aP = angle, aG = 0. Rider's view: aP = 0, aG = -angle.
function drawView(id, c) {
  const v = views[id], ctx = v.ctx, rider = id === "rider";
  const aP = rider ? 0 : state.angle, aG = rider ? -state.angle : 0;
  const at = (p) => px(v, p);
  ctx.clearRect(0, 0, v.w, v.h);
  for (let i = 0; i < POSTS; i++) {                       // the ground: posts of a fence
    const th = aG + (2 * Math.PI * i) / POSTS, u = [Math.cos(th), Math.sin(th)];
    line(ctx, [at(scale(u, R + 0.45)), at(scale(u, R + (i ? 0.75 : 1.0)))], c.muted, i ? 1.5 : 3);
  }
  if (state.dish) for (const r of [0.5, 1, 1.5]) circle(ctx, at([0, 0]), r * v.k, c.muted, 1, [3, 4]);
  for (let i = 0; i < 6; i++) {                           // spokes, so the platform's turn shows
    const th = aP + (Math.PI * i) / 3;
    line(ctx, [at([0, 0]), at([R * Math.cos(th), R * Math.sin(th)])], c.muted, 1);
  }
  circle(ctx, at([0, 0]), R * v.k, c.ink, 2);
  if (state.dish) {                                       // the start mark, where a ball at rest stays
    const [x, y] = at(rotate(DATA.throws.dish.start, aP));
    line(ctx, [[x - 6, y - 6], [x + 6, y + 6]], c.muted, 2);
    line(ctx, [[x - 6, y + 6], [x + 6, y - 6]], c.muted, 2);
    label(ctx, "start", [x, y - 10], c.muted, "center");  // above: the dish loop runs below the mark
  }
  const m = state.miss;
  if (!rider && state.trail.length && !state.dish) {     // the friend's arc since the throw
    const a1 = m ? m.angle : state.angle, pts = [];
    for (let i = 0; i <= 40; i++) {
      const th = state.angleThrow + ((a1 - state.angleThrow) * i) / 40;
      pts.push(at([R * Math.cos(th), R * Math.sin(th)]));
    }
    line(ctx, pts, c.muted, 4);
  }
  for (const [p, name] of [[[-R, 0], "thrower"], [[R, 0], "friend"]]) {
    const u = rotate(p, aP);
    disk(ctx, at(u), 6, c.ink);
    if (state.dish) continue;                             // on the dish the people only mark the rim
    // The name sits inside the rim beside the person's spoke: above a spoke that lies nearly flat (the throw
    // goes below it), else on the side where the text runs away from the spoke, further in where the rim curves.
    const e = u[0] < 0 ? 1 : -1;                          // e: the direction the text runs, toward the center
    let n = [-u[1] / R, u[0] / R];                         // perpendicular to the spoke
    if (Math.abs(n[0]) < 0.5 ? n[1] < 0 : n[0] * e < 0) n = scale(n, -1);
    const a = at(scale(u, 1 - (14 + 14 * Math.abs(u[1] / R)) / (R * v.k)));
    label(ctx, name, [a[0] + 14 * n[0], a[1] - 14 * n[1]], c.ink, e > 0 ? "left" : "right", "middle");
  }
  const k0 = rider ? 0 : 2, trail = state.trail.map((p) => at([p[k0], p[k0 + 1]]));
  line(ctx, trail, rider ? c.accent : c.second, 2.5);
  if (m) {                                                // the miss, as a segment to the friend
    const hit = rider ? toRider(m.hit, m.angle) : m.hit, friend = rider ? [R, 0] : rotate([R, 0], m.angle);
    line(ctx, [at(hit), at(friend)], c.muted, 1.5, [4, 3]);
    disk(ctx, at(friend), 4, c.muted);
    const near = add(friend, scale(sub(hit, friend), 0.3)), q = at(near);   // near the friend, on the inner side
    const e = near[0] < 0 ? 1 : -1;
    label(ctx, `${m.d.toFixed(2)} m`, [q[0] + 8 * e, q[1]], c.muted, e > 0 ? "left" : "right", "middle");
  }
  disk(ctx, at(rotate(state.p, aG)), 6, rider ? c.accent : c.second);
  if (drag && drag.id === id && len([drag.dx, drag.dy]) > 8) {   // the flick, drawn from the ball
    const b = at(rotate(state.p, aG));
    line(ctx, [b, [b[0] + drag.dx, b[1] + drag.dy]], c.ink, 2);
    disk(ctx, [b[0] + drag.dx, b[1] + drag.dy], 4, c.ink);
  }
  label(ctx, rider ? "rider's view" : "ground view", [6, 15], c.fg);
}

function render() {
  const c = Object.fromEntries(["fg", "ink", "accent", "second", "muted"].map((n) => [n, color(n)]));
  drawView("rider", c);
  drawView("ground", c);
  const w = omega(), p = state.p, m = state.miss;
  const vRider = sub(state.v, [-w * p[1], w * p[0]]);    // ground velocity minus the platform's there
  $("v-rider").textContent = `${len(vRider).toFixed(2)} m/s`;
  $("v-ground").textContent = `${len(state.v).toFixed(2)} m/s`;
  const off = state.dish && m ? "off the dish" : m ? `${m.d.toFixed(2)} m ${m.side}, rim at ${m.t.toFixed(2)} s` : "none";
  $("miss").textContent = off;
  const since = state.flying ? state.t - state.tThrow : state.tStop !== null ? state.tStop - state.tThrow : 0;
  $("clock").textContent = `${since.toFixed(2)} s`;
  $("period-val").textContent = state.period ? `${state.period} s` : "at rest";
  $("slow-val").textContent = `×${state.slow}`;
  $("flat").setAttribute("aria-pressed", String(!state.dish));
  $("dish").setAttribute("aria-pressed", String(state.dish));
}

// ---- controls, keys, flicks, and the loop
function set(partial) {
  Object.assign(state, partial);
  if ("period" in partial || "dish" in partial) {        // a new platform: the ball back in the hand
    Object.assign(state, {flying: false, tStop: null, miss: null, trail: []});
    hold();
  }
  render();
}
function nudge(list, key, sign) {
  const i = Math.min(list.length - 1, Math.max(0, list.indexOf(state[key]) + sign));
  set({[key]: list[i]});
}
const reset = () => set({...DEFAULTS, trail: []});

$("period-minus").addEventListener("click", () => nudge(PERIODS, "period", -1));
$("period-plus").addEventListener("click", () => nudge(PERIODS, "period", 1));
$("slow-minus").addEventListener("click", () => nudge(SLOWS, "slow", -1));
$("slow-plus").addEventListener("click", () => nudge(SLOWS, "slow", 1));
$("flat").addEventListener("click", () => set({dish: false}));
$("dish").addEventListener("click", () => set({dish: true}));
$("throw").addEventListener("click", () => { throwStated(); render(); });
$("reset").addEventListener("click", reset);
document.addEventListener("keydown", (e) => {
  const actions = {t: throwStated, d: () => set({dish: !state.dish}), r: reset,
    "[": () => nudge(PERIODS, "period", -1), "]": () => nudge(PERIODS, "period", 1)};
  const act = actions[e.key.toLowerCase()];
  if (act) {
    e.preventDefault();
    act();
    render();
  }
});

// A flick anywhere in a view throws the ball: the drag's vector, GEAR m/s per pixel, is the throw
// relative to the hand. In the ground view it is turned into the platform's axes first.
let drag = null;
for (const id of ["rider", "ground"]) {
  const canvas = $(id);
  canvas.addEventListener("pointerdown", (e) => {
    drag = {id, x: e.clientX, y: e.clientY, dx: 0, dy: 0};
    canvas.setPointerCapture(e.pointerId);
  });
  canvas.addEventListener("pointermove", (e) => {
    if (!drag) return;
    drag.dx = e.clientX - drag.x;
    drag.dy = e.clientY - drag.y;
  });
  canvas.addEventListener("pointerup", () => {
    if (drag && len([drag.dx, drag.dy]) > 8) {
      let u = scale([drag.dx, -drag.dy], GEAR);          // screen y points down
      if (len(u) > V_MAX) u = scale(u, V_MAX / len(u));
      throwBall(id === "ground" ? rotate(u, -state.angle) : u);
    }
    drag = null;
  });
  canvas.addEventListener("pointercancel", () => { 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;
  tick(dt);
  render();
  requestAnimationFrame(frame);
}

window.addEventListener("resize", layout);
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", render);
hold();
throwStated();                                            // open on the stated throw in flight
layout();
requestAnimationFrame(frame);
window.game = {state, set, render, throw: throwStated};