Kinematics

<main class="sim">
  <div class="stage">
    <canvas
      id="view"
      tabindex="0"
      aria-label="Two-link robot arm. Click or drag to set a target; arrow keys move the target."
    ></canvas>
    <p id="status" class="status" aria-live="polite"></p>
  </div>

  <div class="panel">
    <fieldset class="modes">
      <legend>Mode</legend>
      <label
        ><input type="radio" name="mode" id="mode-fk" checked /> Forward</label
      >
      <label><input type="radio" name="mode" id="mode-ik" /> Inverse</label>
    </fieldset>

    <div id="fk-controls" class="group">
      <label for="theta1"
        >θ1 shoulder <output id="theta1-out">30°</output></label
      >
      <input
        type="range"
        id="theta1"
        min="-180"
        max="180"
        step="1"
        value="30"
      />
      <label for="theta2">θ2 elbow <output id="theta2-out">45°</output></label>
      <input
        type="range"
        id="theta2"
        min="-180"
        max="180"
        step="1"
        value="45"
      />
    </div>

    <div id="ik-controls" class="group">
      <label for="target-x"
        >target x <output id="target-x-out">1.05</output></label
      >
      <input
        type="range"
        id="target-x"
        min="-2"
        max="2"
        step="0.01"
        value="1.05"
      />
      <label for="target-y"
        >target y <output id="target-y-out">1.18</output></label
      >
      <input
        type="range"
        id="target-y"
        min="-2"
        max="2"
        step="0.01"
        value="1.18"
      />
      <button id="elbow" type="button">Elbow: down</button>
    </div>

    <button id="reset" type="button">Reset</button>

    <pre id="readout" class="readout" aria-live="off"></pre>
  </div>
</main>

/* All colors in one place. script.js reads --paper, --ink, --grid,
   --soft and --accent from here, so the drawing follows dark mode too. */
:root {
  --paper: #ffffff;
  --ink: #111111;
  --muted: #666666;
  --grid: #e4e4e4;
  --soft: #b8b8b8;
  --accent: #677449;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161616;
    --ink: #ededed;
    --muted: #a3a3a3;
    --grid: #2a2a2a;
    --soft: #5a5a5a;
    --accent: #a6b082;
    color-scheme: dark;
  }
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 13px/1.4 var(--font);
}

/* Drawing on the left, controls on the right; stacked on a phone. */
.sim {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  height: 100%;
}

.stage {
  position: relative;
  min-height: 0;
}

#view {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none; /* a finger drags the target, not the page */
}

#view:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: -4px;
}

.status {
  position: absolute;
  left: 12px;
  top: 8px;
  margin: 0;
  font: 12px/1.4 var(--mono);
  color: var(--accent);
  pointer-events: none;
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  overflow-y: auto;
  border-left: 1px solid var(--ink);
}

.modes {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
}

.modes legend {
  float: left;
  margin-right: 4px;
  color: var(--muted);
}

.group {
  display: grid;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--grid);
}

.group label {
  display: flex;
  justify-content: space-between;
}

output {
  font-family: var(--mono);
}

input[type="range"] {
  width: 100%;
  margin: 0 0 6px;
  accent-color: var(--accent);
}

input[type="radio"] {
  accent-color: var(--accent);
}

button {
  padding: 5px 10px;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
}

button:hover {
  background: var(--grid);
}

button:focus-visible,
input:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.readout {
  margin: 0;
  padding: 8px;
  font: 12px/1.5 var(--mono);
  white-space: pre;
  border: 1px solid var(--grid);
}

.note {
  margin: 0;
  padding: 24px;
  color: var(--muted);
}

@media (max-width: 560px) {
  .sim {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(240px, 60vh) auto;
    height: auto;
  }

  .panel {
    border-left: 0;
    border-top: 1px solid var(--ink);
  }
}

import * as THREE from "three";

// ---- ROBOT MATH (pure functions: no Three.js, no DOM) ----
// A planar arm with two links: the shoulder sits at the origin, the elbow
// at the end of link 1, the hand (end effector) at the end of link 2.
// Angles are in radians; θ1 is measured from the x-axis, θ2 from link 1.

const L1 = 1.0; // length of link 1 (upper arm)
const L2 = 0.7; // length of link 2 (forearm)
const VIEW_HALF = 1.95; // the drawing shows at least -1.95..1.95 both ways
const JOINT_RATE = 8; // how fast the joints catch up (higher = snappier)
const MAX_STEP = 0.05; // longest time step we accept, in seconds
const DEG = 180 / Math.PI;

/** Where the elbow and the hand are for joint angles t1, t2. */
function forwardKinematics(t1, t2, l1 = L1, l2 = L2) {
  const elbow = { x: l1 * Math.cos(t1), y: l1 * Math.sin(t1) };
  const hand = {
    x: elbow.x + l2 * Math.cos(t1 + t2),
    y: elbow.y + l2 * Math.sin(t1 + t2),
  };
  return { elbow, hand };
}

/** The hand can reach a ring: from |l1 - l2| to l1 + l2 from the shoulder. */
function reachLimits(l1 = L1, l2 = L2) {
  return { inner: Math.abs(l1 - l2), outer: l1 + l2 };
}

/**
 * Inverse kinematics in closed form (law of cosines).
 * Returns { t1, t2 }, or null when (x, y) is out of reach.
 * Elbow up: t2 <= 0, so the elbow lies to the left of the line from the
 * shoulder to the target; elbow down is the mirror image.
 */
function inverseKinematics(x, y, elbowUp = true, l1 = L1, l2 = L2) {
  const c2 = (x * x + y * y - l1 * l1 - l2 * l2) / (2 * l1 * l2);
  if (c2 > 1 + 1e-9 || c2 < -1 - 1e-9) return null;
  const t2 = (elbowUp ? -1 : 1) * Math.acos(Math.min(1, Math.max(-1, c2)));
  const t1 =
    Math.atan2(y, x) - Math.atan2(l2 * Math.sin(t2), l1 + l2 * Math.cos(t2));
  return { t1: wrapAngle(t1), t2: wrapAngle(t2) };
}

/** The reachable point closest to (x, y): pulled onto the ring if needed. */
function nearestReachable(x, y, l1 = L1, l2 = L2) {
  const { inner, outer } = reachLimits(l1, l2);
  const r = Math.hypot(x, y);
  if (r >= inner && r <= outer) return { x, y };
  const angle = r > 0 ? Math.atan2(y, x) : 0; // at the shoulder: point right
  const radius = r < inner ? inner : outer;
  return { x: radius * Math.cos(angle), y: radius * Math.sin(angle) };
}

/** An angle brought into -π..π. */
function wrapAngle(a) {
  const turn = 2 * Math.PI;
  const wrapped = a - turn * Math.floor((a + Math.PI) / turn);
  return wrapped === -Math.PI ? Math.PI : wrapped;
}

/** Moves an angle part of the way to its target, the short way round.
 *  The share depends on time, not frames: same motion at 60 or 144 Hz. */
function easeAngle(current, target, dt, rate = JOINT_RATE) {
  const share = 1 - Math.exp(-rate * dt);
  return wrapAngle(current + wrapAngle(target - current) * share);
}

/** Points (x, y, x, y, ...) on an arc around (cx, cy), from angle start
 *  over a signed sweep. Used for the joint angle marks. */
function arcPoints(cx, cy, r, start, sweep, count) {
  const points = [];
  for (let i = 0; i < count; i++) {
    const a = start + (sweep * i) / (count - 1);
    points.push(cx + r * Math.cos(a), cy + r * Math.sin(a));
  }
  return points;
}

/** An orthographic view that shows -half..half both ways on any canvas. */
function fitView(width, height, half = VIEW_HALF) {
  const aspect = width / Math.max(height, 1);
  const w = aspect >= 1 ? half * aspect : half;
  const h = aspect >= 1 ? half : half / aspect;
  return { left: -w, right: w, top: h, bottom: -h };
}

/** A pixel on the canvas (0,0 = top left) to a point in the world. */
function screenToWorld(px, py, width, height, view) {
  return {
    x: view.left + (px / width) * (view.right - view.left),
    y: view.top - (py / height) * (view.top - view.bottom),
  };
}

/** The text of the readout panel. */
function readoutText(t1, t2, target, mode, elbowUp) {
  const { hand } = forwardKinematics(t1, t2);
  const { inner, outer } = reachLimits();
  const lines = [
    `θ1     ${(t1 * DEG).toFixed(1).padStart(7)}°`,
    `θ2     ${(t2 * DEG).toFixed(1).padStart(7)}°`,
    `hand x ${hand.x.toFixed(3).padStart(7)}`,
    `hand y ${hand.y.toFixed(3).padStart(7)}`,
    `reach  ${inner.toFixed(2)} … ${outer.toFixed(2)}`,
  ];
  if (mode === "ik") {
    const r = Math.hypot(target.x, target.y);
    lines.push(`target ${target.x.toFixed(2)}, ${target.y.toFixed(2)}`);
    lines.push(`|p|    ${r.toFixed(3).padStart(7)}`);
    lines.push(`elbow  ${elbowUp ? "up" : "down"}`);
  }
  return lines.join("\n");
}
// ---- END OF ROBOT MATH ----

// ---- Page elements ----
const $ = (id) => document.getElementById(id);
const canvas = $("view");
const statusLine = $("status");
const sliders = {
  theta1: $("theta1"),
  theta2: $("theta2"),
  x: $("target-x"),
  y: $("target-y"),
};

// ---- State ----
const START = { t1: 30 / DEG, t2: 45 / DEG };
let mode = "fk"; // "fk" = sliders set the angles, "ik" = a target sets them
let elbowUp = START.t2 <= 0; // the start pose is elbow down
let angles = { t1: START.t1, t2: START.t2 }; // what the arm shows now
let goal = { t1: START.t1, t2: START.t2 }; // where the joints are heading
let target = forwardKinematics(START.t1, START.t2).hand;
let view = fitView(1, 1);

// ---- Renderer, scene and camera ----
let renderer;
try {
  renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
} catch (error) {
  statusLine.textContent = "WebGL is not available, so nothing can be drawn.";
  throw error;
}
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, -10, 10);

// One material per role; applyColors() fills in the CSS colors.
const mat = {
  grid: new THREE.LineBasicMaterial(),
  axis: new THREE.LineBasicMaterial(),
  reach: new THREE.LineDashedMaterial({ dashSize: 0.05, gapSize: 0.04 }),
  ink: new THREE.LineBasicMaterial(),
  paper: new THREE.MeshBasicMaterial(),
  accent: new THREE.LineBasicMaterial(),
  accentFill: new THREE.MeshBasicMaterial(),
  dashed: new THREE.LineDashedMaterial({ dashSize: 0.04, gapSize: 0.04 }),
};

function readColors() {
  const style = getComputedStyle(document.documentElement);
  const pick = (name, fallback) =>
    style.getPropertyValue(name).trim() || fallback;
  return {
    paper: pick("--paper", "#ffffff"),
    ink: pick("--ink", "#111111"),
    grid: pick("--grid", "#e4e4e4"),
    soft: pick("--soft", "#b8b8b8"),
    accent: pick("--accent", "#b5441f"),
  };
}

function applyColors() {
  const c = readColors();
  scene.background = new THREE.Color(c.paper);
  mat.grid.color.set(c.grid);
  mat.axis.color.set(c.soft);
  mat.reach.color.set(c.soft);
  mat.ink.color.set(c.ink);
  mat.paper.color.set(c.paper);
  mat.accent.color.set(c.accent);
  mat.accentFill.color.set(c.accent);
  mat.dashed.color.set(c.accent);
}

// ---- Helpers that turn flat point lists into lines ----
function lineFrom(points, material, z = 0, closed = false) {
  const geometry = new THREE.BufferGeometry();
  const xyz = [];
  for (let i = 0; i < points.length; i += 2)
    xyz.push(points[i], points[i + 1], 0);
  geometry.setAttribute("position", new THREE.Float32BufferAttribute(xyz, 3));
  const line = closed
    ? new THREE.LineLoop(geometry, material)
    : new THREE.Line(geometry, material);
  line.position.z = z;
  if (material.isLineDashedMaterial) line.computeLineDistances();
  return line;
}

/** Overwrites a line's points (same count) and tells Three.js. */
function setLine(line, points) {
  const position = line.geometry.attributes.position;
  for (let i = 0; i < points.length / 2; i++) {
    position.setXY(i, points[i * 2], points[i * 2 + 1]);
  }
  position.needsUpdate = true;
  line.geometry.computeBoundingSphere();
  if (line.material.isLineDashedMaterial) line.computeLineDistances();
}

// ---- The paper: hairline grid every 0.25, axes through the shoulder ----
const gridPoints = [];
for (let v = -6; v <= 6.001; v += 0.25) {
  gridPoints.push(v, -6, 0, v, 6, 0, -6, v, 0, 6, v, 0);
}
const gridGeometry = new THREE.BufferGeometry();
gridGeometry.setAttribute(
  "position",
  new THREE.Float32BufferAttribute(gridPoints, 3),
);
scene.add(new THREE.LineSegments(gridGeometry, mat.grid));
scene.add(lineFrom([-6, 0, 6, 0], mat.axis, 0.01));
scene.add(lineFrom([0, -6, 0, 6], mat.axis, 0.01));

// ---- The workspace: two dashed circles ----
const { inner, outer } = reachLimits();
for (const r of [inner, outer]) {
  scene.add(lineFrom(arcPoints(0, 0, r, 0, 2 * Math.PI, 129), mat.reach, 0.02));
}

// ---- The arm ----
/** A link: a rounded bar from (0,0) to (length,0), white with an outline. */
function makeLink(length, halfWidth, z) {
  const shape = new THREE.Shape();
  shape.absarc(length, 0, halfWidth, -Math.PI / 2, Math.PI / 2, false);
  shape.absarc(0, 0, halfWidth, Math.PI / 2, (3 * Math.PI) / 2, false);
  const group = new THREE.Group();
  const fill = new THREE.Mesh(new THREE.ShapeGeometry(shape, 12), mat.paper);
  const outline = shape.getPoints(12).flatMap((p) => [p.x, p.y]);
  group.add(fill, lineFrom(outline, mat.ink, 0.001, true));
  group.position.z = z;
  return group;
}

/** A pin joint: a small circle with a dot. */
function makeJoint(radius, z) {
  const group = new THREE.Group();
  group.add(new THREE.Mesh(new THREE.CircleGeometry(radius, 24), mat.paper));
  const ring = arcPoints(0, 0, radius, 0, 2 * Math.PI, 25);
  group.add(lineFrom(ring, mat.ink, 0.001));
  group.add(
    new THREE.Mesh(new THREE.CircleGeometry(radius * 0.3, 12), mat.accentFill),
  );
  group.position.z = z;
  return group;
}

// The base: a triangle on a hatched ground line, like a technical drawing.
const base = new THREE.Group();
base.add(lineFrom([0, 0, -0.09, -0.13, 0.09, -0.13], mat.ink, 0, true));
base.add(lineFrom([-0.16, -0.13, 0.16, -0.13], mat.ink));
for (let x = -0.14; x <= 0.15; x += 0.05) {
  base.add(lineFrom([x, -0.13, x - 0.04, -0.18], mat.ink));
}
base.position.z = 0.1;
scene.add(base);

const link1 = makeLink(L1, 0.055, 0.2);
const link2 = makeLink(L2, 0.045, 0.3);
const shoulder = makeJoint(0.045, 0.25);
const elbowJoint = makeJoint(0.04, 0.35);
const hand = new THREE.Mesh(
  new THREE.CircleGeometry(0.035, 20),
  mat.accentFill,
);
hand.position.z = 0.4;
link1.name = "link1";
link2.name = "link2";
elbowJoint.name = "elbow";
hand.name = "hand";
scene.add(link1, link2, shoulder, elbowJoint, hand);

// Angle marks: θ1 from the x-axis, θ2 from the extension of link 1.
const ARC_POINTS = 33;
const blankArc = new Array(ARC_POINTS * 2).fill(0);
const arc1 = lineFrom(blankArc, mat.accent, 0.15);
const arc2 = lineFrom(blankArc, mat.accent, 0.15);
const extension = lineFrom([0, 0, 0, 0], mat.reach, 0.15);
scene.add(arc1, arc2, extension);

// The target (inverse mode): a ring with a cross, and a dashed line to it
// when the hand cannot get there.
const targetMark = new THREE.Group();
targetMark.add(lineFrom(arcPoints(0, 0, 0.06, 0, 2 * Math.PI, 25), mat.accent));
targetMark.add(lineFrom([-0.1, 0, 0.1, 0], mat.accent));
targetMark.add(lineFrom([0, -0.1, 0, 0.1], mat.accent));
targetMark.position.z = 0.5;
const missLine = lineFrom([0, 0, 0, 0], mat.dashed, 0.45);
targetMark.name = "target";
missLine.name = "miss";
scene.add(targetMark, missLine);
applyColors();

// ---- Fit the drawing to the canvas, also after a resize ----
function resize() {
  const width = canvas.clientWidth || window.innerWidth;
  const height = canvas.clientHeight || window.innerHeight;
  renderer.setSize(width, height, false);
  view = fitView(width, height);
  Object.assign(camera, view);
  camera.updateProjectionMatrix();
}
window.addEventListener("resize", resize);
resize();
const dark = window.matchMedia("(prefers-color-scheme: dark)");
dark.addEventListener("change", applyColors);

// ---- Controls ----
function setMode(next) {
  mode = next;
  $("mode-fk").checked = mode === "fk";
  $("mode-ik").checked = mode === "ik";
  if (mode === "ik") {
    // Start from where the hand is now, with the elbow it has now, so
    // nothing jumps.
    target = forwardKinematics(angles.t1, angles.t2).hand;
    setElbow(angles.t2 <= 0);
    syncTargetSliders();
  }
}

function syncTargetSliders() {
  sliders.x.value = target.x.toFixed(2);
  sliders.y.value = target.y.toFixed(2);
  $("target-x-out").textContent = target.x.toFixed(2);
  $("target-y-out").textContent = target.y.toFixed(2);
}

function syncAngleSliders(t1, t2) {
  const pairs = [
    [sliders.theta1, $("theta1-out"), t1],
    [sliders.theta2, $("theta2-out"), t2],
  ];
  for (const [slider, out, angle] of pairs) {
    const degrees = String(Math.round(angle * DEG));
    if (out.textContent === degrees + "°") continue; // unchanged
    slider.value = degrees;
    out.textContent = degrees + "°";
  }
}

function setTarget(x, y) {
  if (mode !== "ik") setMode("ik");
  const limit = 2;
  target = {
    x: Math.min(limit, Math.max(-limit, x)),
    y: Math.min(limit, Math.max(-limit, y)),
  };
  syncTargetSliders();
}

function onAngleSlider() {
  if (mode !== "fk") setMode("fk");
  goal = {
    t1: Number(sliders.theta1.value) / DEG,
    t2: Number(sliders.theta2.value) / DEG,
  };
  setElbow(goal.t2 <= 0);
  syncAngleSliders(goal.t1, goal.t2);
}
sliders.theta1.addEventListener("input", onAngleSlider);
sliders.theta2.addEventListener("input", onAngleSlider);
sliders.x.addEventListener("input", () =>
  setTarget(Number(sliders.x.value), target.y),
);
sliders.y.addEventListener("input", () =>
  setTarget(target.x, Number(sliders.y.value)),
);
$("mode-fk").addEventListener("change", () => {
  setMode("fk");
  onAngleSlider();
});
$("mode-ik").addEventListener("change", () => setMode("ik"));

function setElbow(up) {
  elbowUp = up;
  const button = $("elbow");
  button.textContent = "Elbow: " + (up ? "up" : "down");
}
function toggleElbow() {
  if (mode !== "ik") setMode("ik");
  setElbow(!elbowUp);
}
$("elbow").addEventListener("click", toggleElbow);

$("reset").addEventListener("click", () => {
  setMode("fk");
  syncAngleSliders(START.t1, START.t2);
  onAngleSlider();
});

// Mouse, pen or finger: press or drag on the drawing to place the target.
let dragging = false;
function pointerTarget(event) {
  const rect = canvas.getBoundingClientRect();
  const p = screenToWorld(
    event.clientX - rect.left,
    event.clientY - rect.top,
    rect.width,
    rect.height,
    view,
  );
  setTarget(p.x, p.y);
}
canvas.addEventListener("pointerdown", (event) => {
  dragging = true;
  canvas.setPointerCapture?.(event.pointerId);
  pointerTarget(event);
});
canvas.addEventListener("pointermove", (event) => {
  if (dragging) pointerTarget(event);
});
const stopDrag = () => (dragging = false);
canvas.addEventListener("pointerup", stopDrag);
canvas.addEventListener("pointercancel", stopDrag);

// Keyboard on the drawing: arrows move the target (Shift = finer), E flips
// the elbow. Arrow keys must not scroll the page. Arrows by position
// (event.code), letters by what the key types (event.key), so E works on
// every keyboard layout.
const ARROWS = {
  ArrowLeft: [-1, 0],
  ArrowRight: [1, 0],
  ArrowUp: [0, 1],
  ArrowDown: [0, -1],
};
canvas.addEventListener("keydown", (event) => {
  const arrow = ARROWS[event.code];
  if (arrow) {
    event.preventDefault();
    const step = event.shiftKey ? 0.01 : 0.05;
    if (mode !== "ik") setMode("ik");
    setTarget(target.x + arrow[0] * step, target.y + arrow[1] * step);
  } else if (event.key.toLowerCase() === "e") {
    toggleElbow();
  }
});

// ---- The animation loop ----
const timer = new THREE.Timer();
timer.connect(document);
let lastStatus = "";
let lastReadout = "";

function update(dt) {
  let reachable = true;
  if (mode === "ik") {
    const solution = inverseKinematics(target.x, target.y, elbowUp);
    reachable = solution !== null;
    // Out of reach: stretch toward the target as far as the arm goes.
    const near = nearestReachable(target.x, target.y);
    goal = solution || inverseKinematics(near.x, near.y, elbowUp);
  }
  angles = {
    t1: easeAngle(angles.t1, goal.t1, dt),
    t2: easeAngle(angles.t2, goal.t2, dt),
  };
  if (mode === "ik") syncAngleSliders(angles.t1, angles.t2);
  return reachable;
}

function draw(reachable) {
  const { t1, t2 } = angles;
  const { elbow, hand: tip } = forwardKinematics(t1, t2);
  link1.rotation.z = t1;
  link2.position.set(elbow.x, elbow.y, link2.position.z);
  link2.rotation.z = t1 + t2;
  elbowJoint.position.set(elbow.x, elbow.y, elbowJoint.position.z);
  hand.position.set(tip.x, tip.y, hand.position.z);

  setLine(arc1, arcPoints(0, 0, 0.32, 0, t1, ARC_POINTS));
  setLine(arc2, arcPoints(elbow.x, elbow.y, 0.24, t1, t2, ARC_POINTS));
  const ext = 0.32;
  setLine(extension, [
    elbow.x,
    elbow.y,
    elbow.x + ext * Math.cos(t1),
    elbow.y + ext * Math.sin(t1),
  ]);

  targetMark.visible = mode === "ik";
  targetMark.position.set(target.x, target.y, targetMark.position.z);
  missLine.visible = mode === "ik" && !reachable;
  if (missLine.visible) setLine(missLine, [tip.x, tip.y, target.x, target.y]);

  const r = Math.hypot(target.x, target.y);
  const { inner: rMin, outer: rMax } = reachLimits();
  let status = "";
  if (mode === "ik" && !reachable) {
    status =
      r > rMax
        ? `Out of reach: |p| = ${r.toFixed(2)} > ${rMax.toFixed(2)}`
        : `Out of reach: |p| = ${r.toFixed(2)} < ${rMin.toFixed(2)}`;
  }
  if (status !== lastStatus) statusLine.textContent = lastStatus = status;
  const text = readoutText(t1, t2, target, mode, elbowUp);
  if (text !== lastReadout) $("readout").textContent = lastReadout = text;
}

syncTargetSliders(); // the target starts where the hand is
renderer.setAnimationLoop((time) => {
  timer.update(time);
  const dt = Math.min(timer.getDelta(), MAX_STEP);
  draw(update(dt));
  renderer.render(scene, camera);
});