@woosh/meep-engine 3.44.0 → 3.46.0

package/src/engine/physics/cloth/playground/rig_main.js

@@ -1,955 +1,947 @@
-import {
-    TRANSFORM64_ROTATION_OFFSET,
-    TRANSFORM64_TRANSLATION_OFFSET,
-    Transform64
-} from "../../../ecs/transform/Transform64.js";
-import { v3_quaternion_apply } from "../../../../core/geom/vec3/v3_quaternion_apply.js";
-import { ClothFlags } from "../ecs/ClothFlags.js";
-import { Cloth } from "../ecs/Cloth.js";
-import { CLOTH_DYNAMICS_BY_NAME } from "../ecs/cloth_dynamics_library.js";
-import { find_non_finite_cloth_state } from "../solver/find_non_finite_cloth_state.js";
-import { PlaygroundCamera, project } from "./cloth_playground_draw.js";
-import { build_cloth_rig, CLOTH_RIGS } from "./rig_build.js";
-
-/**
- * # Cloth rigs — the M1 playground
- *
- * `npm run dev --workspace @woosh/meep-engine`, then
- * <http://localhost:5173/src/engine/physics/cloth/playground/rig.html>.
- *
- * The sibling of `index.html`, one layer up. That page is the solver with a
- * canvas attached and no ECS at all, because at M0 there was none; this one is
- * the **entity-subtree path** — a real `EntityManager`, real entities with real
- * `TransformAttachment`s, a `Cloth` component on top, and `ClothSystem` walking
- * the subtree and writing `Transform64` back. Every point on screen is an
- * entity's world transform, read out of the component the system wrote it into.
- *
- * The rigs are the ones §17 asks M1 to show — a rope, a chain, and a
- * multi-strand rig under one `Cloth` — plus two that make the walk's two rules
- * visible: a hanging sign whose sign is a `ClothExclude`, and a rope with a
- * second `Cloth` partway down. The **cloths / particles** readout is the whole
- * of §3.1's coupled-solve claim: five strands, one cloth, one state, one
- * colouring.
- *
- * `globalThis.cloth_rig_playground` exposes `{ control, camera, ready, rebuild,
- * step_once, render, scene }` for a driver script. `requestAnimationFrame` does
- * not fire while a browser pane is hidden, and everything on this page hangs
- * off it — so a driver drives `step_once` and `render` itself and waits for no
- * frames at all. `ready` is the first `rebuild`, and `rebuild` returns a
- * promise because `EntityManager#startup` does.
- *
- * @author Alex Goldring
- * @copyright Company Named Limited (c) 2026
- */
-
-/** The rate `ClothSystem` is stepped at. */
-const FIXED_STEP = 1 / 60;
-
-/** §17's target, for the budget bar. */
-const BUDGET_MS = 2;
-
-/** How many recent step timings the readout keeps. */
-const TIMING_WINDOW = 120;
-
-const element = (id) => document.getElementById(id);
-
-const canvas = element('view');
-const context = canvas.getContext('2d');
-
-const camera = new PlaygroundCamera();
-
-const control = {
-    rig: 'rope',
-    dynamics: 'ROPE',
-    links: 24,
-    spacing: 0.05,
-
-    stretch: 0.98,
-    bend: 0.06,
-    damping: 0.1,
-    slack: 1,
-    inertia: 1,
-    blend: 1,
-    substeps: 2,
-    iterations: 4,
-
-    motion: 'still',
-    keep: false,
-    never_sleep: false,
-
-    view: 'links',
-    running: true
-};
-
-/** @type {import('./rig_build.js').ClothRigScene} */
-let scene = null;
-
-const timing = [];
-
-let last_ms = 0;
-let elapsed = 0;
-
-const SCREEN = new Float64Array(2);
-const POINT = new Float64Array(3);
-
-// ---------------------------------------------------------------- the rig
-
-async function rebuild() {
-    scene = null;
-
-    scene = await build_cloth_rig({
-        rig: control.rig,
-        dynamics: control.dynamics,
-        links: control.links,
-        spacing: control.spacing
-    });
-
-    apply_dynamics();
-
-    timing.length = 0;
-    elapsed = 0;
-
-    element('tripwire').textContent = 'ok';
-    element('tripwire').className = 'good';
-
-    // One step so the subtree is walked and the readout has something to say.
-    step_once();
-
-    frame_camera();
-}
-
-/**
- * Write the sliders into every `Cloth` in the rig. The library entries are
- * frozen and shared, so each cloth owns a clone — which is exactly the
- * `.clone()` step §3.3 describes, done by a page rather than by an author.
- */
-function apply_dynamics() {
-    if (scene === null) {
-        return;
-    }
-
-    for (const anchor of scene.anchor) {
-        const cloth = scene.ecd.getComponent(anchor, Cloth);
-
-        if (cloth === undefined) {
-            continue;
-        }
-
-        if (cloth.dynamics.isClothDynamics !== true || Object.isFrozen(cloth.dynamics)) {
-            cloth.dynamics = cloth.dynamics.clone();
-        }
-
-        cloth.dynamics.stretch = control.stretch;
-        cloth.dynamics.bend = control.bend;
-        cloth.dynamics.damping = control.damping;
-        cloth.dynamics.slack = control.slack;
-        cloth.dynamics.inertia = control.inertia;
-        cloth.dynamics.substeps = control.substeps;
-        cloth.dynamics.iterations = control.iterations;
-
-        cloth.blend = control.blend;
-
-        cloth.flags = (control.keep ? ClothFlags.TeleportKeep : 0)
-            | (control.never_sleep ? ClothFlags.NeverSleep : 0);
-    }
-}
-
-/**
- * Pull the sliders from a library entry, so picking one shows what it is made
- * of rather than silently overriding it.
- */
-function adopt_library(name) {
-    const entry = CLOTH_DYNAMICS_BY_NAME[name];
-
-    if (entry === undefined) {
-        return;
-    }
-
-    control.dynamics = name;
-    control.stretch = entry.stretch;
-    control.bend = entry.bend;
-    control.damping = entry.damping;
-    control.slack = entry.slack;
-    control.inertia = entry.inertia;
-    control.substeps = entry.substeps;
-    control.iterations = entry.iterations;
-}
-
-function frame_camera() {
-    let min_x = Infinity, min_y = Infinity, min_z = Infinity;
-    let max_x = -Infinity, max_y = -Infinity, max_z = -Infinity;
-
-    for (const chain of scene.strand) {
-        for (const entity of chain) {
-            const t = scene.ecd.getComponent(entity, Transform64);
-
-            if (t === undefined) {
-                continue;
-            }
-
-            min_x = Math.min(min_x, t[TRANSFORM64_TRANSLATION_OFFSET]);
-            max_x = Math.max(max_x, t[TRANSFORM64_TRANSLATION_OFFSET]);
-            min_y = Math.min(min_y, t[TRANSFORM64_TRANSLATION_OFFSET + 1]);
-            max_y = Math.max(max_y, t[TRANSFORM64_TRANSLATION_OFFSET + 1]);
-            min_z = Math.min(min_z, t[TRANSFORM64_TRANSLATION_OFFSET + 2]);
-            max_z = Math.max(max_z, t[TRANSFORM64_TRANSLATION_OFFSET + 2]);
-        }
-    }
-
-    if (!Number.isFinite(min_x)) {
-        return;
-    }
-
-    camera.target[0] = (min_x + max_x) * 0.5;
-    camera.target[1] = (min_y + max_y) * 0.5;
-    camera.target[2] = (min_z + max_z) * 0.5;
-
-    camera.distance = Math.max(max_x - min_x, max_y - min_y, max_z - min_z, 0.05) * 2.2;
-}
-
-// ---------------------------------------------------------------- the loop
-
-/**
- * Drive the anchor. This is the only thing on the page that writes a transform
- * the cloth does not own, and it stands in for whatever poses an anchor in a
- * real scene — an animation, a path follower, a vehicle.
- */
-function drive_anchor() {
-    if (scene === null || scene.anchor.length === 0) {
-        return;
-    }
-
-    const transform = scene.ecd.getComponent(scene.anchor[0], Transform64);
-
-    if (transform === undefined) {
-        return;
-    }
-
-    const reach = control.links * control.spacing;
-
-    switch (control.motion) {
-        case 'sway':
-            transform.setTranslation(Math.sin(elapsed * 2.2) * reach * 0.7, 0, 0);
-            break;
-
-        case 'sprint': {
-            // A square wave in velocity, which is §7 P7's own profile: the
-            // worst thing locomotion does to a hanging thing.
-            const phase = Math.floor(elapsed) % 4;
-
-            const speed = phase === 0 ? 6 : (phase === 2 ? -6 : 0);
-
-            transform[TRANSFORM64_TRANSLATION_OFFSET] += speed * FIXED_STEP;
-            break;
-        }
-
-        case 'spin':
-            transform.setRotation(0, Math.sin(elapsed * 1.6), 0, Math.cos(elapsed * 1.6));
-            break;
-
-        case 'orbit':
-            transform.setTranslation(
-                Math.cos(elapsed * 1.8) * reach * 0.6,
-                Math.sin(elapsed * 2.6) * reach * 0.25,
-                Math.sin(elapsed * 1.8) * reach * 0.6
-            );
-            break;
-
-        default:
-            break;
-    }
-
-    transform.updateMatrix();
-}
-
-function step_once() {
-    if (scene === null) {
-        return;
-    }
-
-    elapsed += FIXED_STEP;
-
-    drive_anchor();
-
-    const started = performance.now();
-
-    try {
-        scene.cloth.fixedUpdate(FIXED_STEP);
-    } catch (error) {
-        control.running = false;
-
-        element('tripwire').textContent = String(error.message).slice(0, 90);
-        element('tripwire').className = 'bad';
-        element('pause').textContent = 'run';
-
-        return;
-    }
-
-    last_ms = performance.now() - started;
-
-    timing.push(last_ms);
-
-    if (timing.length > TIMING_WINDOW) {
-        timing.shift();
-    }
-}
-
-/**
- * Paint one frame from the state as it stands, stepping nothing. Separate from
- * {@link frame} so a driver can ask for a picture without also asking for a
- * simulation step, and so it can get one at all — see the module docblock on
- * `requestAnimationFrame`.
- */
-function render() {
-    if (scene === null) {
-        return;
-    }
-
-    draw();
-    refresh_readout();
-}
-
-function frame() {
-    if (control.running) {
-        step_once();
-    }
-
-    render();
-
-    requestAnimationFrame(frame);
-}
-
-// ---------------------------------------------------------------- drawing
-
-function draw() {
-    const width = canvas.width = canvas.clientWidth;
-    const height = canvas.height = canvas.clientHeight;
-
-    context.clearRect(0, 0, width, height);
-    context.fillStyle = '#0d0f12';
-    context.fillRect(0, 0, width, height);
-
-    draw_ground(width, height);
-
-    if (control.view === 'animated') {
-        draw_animated(width, height);
-    }
-
-    for (const chain of scene.strand) {
-        draw_chain(chain, width, height);
-    }
-
-    if (control.view === 'frames') {
-        for (const chain of scene.strand) {
-            for (const entity of chain) {
-                draw_frame(entity, width, height);
-            }
-        }
-    }
-
-    for (const entity of scene.excluded) {
-        draw_marker(entity, width, height, '#e5b54a', 6);
-    }
-
-    for (const anchor of scene.anchor) {
-        draw_marker(anchor, width, height, '#e5533d', 5);
-    }
-}
-
-/**
- * @param {number[]} chain
- * @param {number} width
- * @param {number} height
- */
-function draw_chain(chain, width, height) {
-    context.strokeStyle = '#7f8b9c';
-    context.lineWidth = 2;
-    context.beginPath();
-
-    let started = false;
-
-    for (const entity of chain) {
-        const t = scene.ecd.getComponent(entity, Transform64);
-
-        if (t === undefined) {
-            continue;
-        }
-
-        const depth = project(
-            SCREEN, camera,
-            t[TRANSFORM64_TRANSLATION_OFFSET],
-            t[TRANSFORM64_TRANSLATION_OFFSET + 1],
-            t[TRANSFORM64_TRANSLATION_OFFSET + 2],
-            width, height
-        );
-
-        if (depth <= 0.01) {
-            started = false;
-
-            continue;
-        }
-
-        if (started) {
-            context.lineTo(SCREEN[0], SCREEN[1]);
-        } else {
-            context.moveTo(SCREEN[0], SCREEN[1]);
-
-            started = true;
-        }
-    }
-
-    context.stroke();
-
-    context.fillStyle = '#c9d2de';
-
-    for (const entity of chain) {
-        const t = scene.ecd.getComponent(entity, Transform64);
-
-        if (t === undefined) {
-            continue;
-        }
-
-        const depth = project(
-            SCREEN, camera,
-            t[TRANSFORM64_TRANSLATION_OFFSET],
-            t[TRANSFORM64_TRANSLATION_OFFSET + 1],
-            t[TRANSFORM64_TRANSLATION_OFFSET + 2],
-            width, height
-        );
-
-        if (depth <= 0.01) {
-            continue;
-        }
-
-        context.beginPath();
-        context.arc(SCREEN[0], SCREEN[1], 2.5, 0, Math.PI * 2);
-        context.fill();
-    }
-}
-
-/**
- * The pose the cloth is leashed to — `blend = 0`'s answer, drawn faintly beside
- * the simulated one. The gap between the two lines is what `slack` bounds.
- */
-function draw_animated(width, height) {
-    for (const anchor of scene.anchor) {
-        const instance = scene.cloth.instanceOf(anchor);
-
-        if (instance === undefined || !instance.seeded) {
-            continue;
-        }
-
-        const transform = instance.node_transform[0];
-
-        context.strokeStyle = 'rgba(111, 168, 220, 0.45)';
-        context.lineWidth = 1;
-
-        for (let node = 1; node < instance.node_count; node++) {
-            const parent = instance.node_parent[node];
-
-            context.beginPath();
-
-            let ok = true;
-
-            for (const which of [parent, node]) {
-                v3_quaternion_apply(
-                    POINT, 0,
-                    instance.animated_position[which * 3],
-                    instance.animated_position[which * 3 + 1],
-                    instance.animated_position[which * 3 + 2],
-                    transform[TRANSFORM64_ROTATION_OFFSET],
-                    transform[TRANSFORM64_ROTATION_OFFSET + 1],
-                    transform[TRANSFORM64_ROTATION_OFFSET + 2],
-                    transform[TRANSFORM64_ROTATION_OFFSET + 3]
-                );
-
-                const depth = project(
-                    SCREEN, camera,
-                    POINT[0] + transform[TRANSFORM64_TRANSLATION_OFFSET],
-                    POINT[1] + transform[TRANSFORM64_TRANSLATION_OFFSET + 1],
-                    POINT[2] + transform[TRANSFORM64_TRANSLATION_OFFSET + 2],
-                    width, height
-                );
-
-                if (depth <= 0.01) {
-                    ok = false;
-
-                    break;
-                }
-
-                if (which === parent) {
-                    context.moveTo(SCREEN[0], SCREEN[1]);
-                } else {
-                    context.lineTo(SCREEN[0], SCREEN[1]);
-                }
-            }
-
-            if (ok) {
-                context.stroke();
-            }
-        }
-    }
-}
-
-/**
- * The orientation the write-back reconstructed, as a short axis triple. §11.1's
- * "rotation derived from the direction to the child" is only visible here.
- */
-function draw_frame(entity, width, height) {
-    const t = scene.ecd.getComponent(entity, Transform64);
-
-    if (t === undefined) {
-        return;
-    }
-
-    const length = control.spacing * 0.6;
-
-    const axes = [
-        [length, 0, 0, '#e5533d'],
-        [0, length, 0, '#5ad19a'],
-        [0, 0, length, '#6fa8dc']
-    ];
-
-    const origin_depth = project(
-        SCREEN, camera,
-        t[TRANSFORM64_TRANSLATION_OFFSET],
-        t[TRANSFORM64_TRANSLATION_OFFSET + 1],
-        t[TRANSFORM64_TRANSLATION_OFFSET + 2],
-        width, height
-    );
-
-    if (origin_depth <= 0.01) {
-        return;
-    }
-
-    const ox = SCREEN[0];
-    const oy = SCREEN[1];
-
-    for (const [ax, ay, az, colour] of axes) {
-        v3_quaternion_apply(
-            POINT, 0, ax, ay, az,
-            t[TRANSFORM64_ROTATION_OFFSET],
-            t[TRANSFORM64_ROTATION_OFFSET + 1],
-            t[TRANSFORM64_ROTATION_OFFSET + 2],
-            t[TRANSFORM64_ROTATION_OFFSET + 3]
-        );
-
-        const depth = project(
-            SCREEN, camera,
-            t[TRANSFORM64_TRANSLATION_OFFSET] + POINT[0],
-            t[TRANSFORM64_TRANSLATION_OFFSET + 1] + POINT[1],
-            t[TRANSFORM64_TRANSLATION_OFFSET + 2] + POINT[2],
-            width, height
-        );
-
-        if (depth <= 0.01) {
-            continue;
-        }
-
-        context.strokeStyle = colour;
-        context.lineWidth = 1;
-        context.beginPath();
-        context.moveTo(ox, oy);
-        context.lineTo(SCREEN[0], SCREEN[1]);
-        context.stroke();
-    }
-}
-
-function draw_marker(entity, width, height, colour, radius) {
-    const t = scene.ecd.getComponent(entity, Transform64);
-
-    if (t === undefined) {
-        return;
-    }
-
-    const depth = project(
-        SCREEN, camera,
-        t[TRANSFORM64_TRANSLATION_OFFSET],
-        t[TRANSFORM64_TRANSLATION_OFFSET + 1],
-        t[TRANSFORM64_TRANSLATION_OFFSET + 2],
-        width, height
-    );
-
-    if (depth <= 0.01) {
-        return;
-    }
-
-    context.fillStyle = colour;
-    context.beginPath();
-    context.arc(SCREEN[0], SCREEN[1], radius, 0, Math.PI * 2);
-    context.fill();
-}
-
-function draw_ground(width, height) {
-    const step = Math.max(control.spacing * 4, 0.1);
-
-    context.strokeStyle = 'rgba(139, 147, 159, 0.16)';
-    context.lineWidth = 1;
-
-    const extent = 8;
-
-    for (let i = -extent; i <= extent; i++) {
-        for (const [ax, az, bx, bz] of [
-            [i * step, -extent * step, i * step, extent * step],
-            [-extent * step, i * step, extent * step, i * step]
-        ]) {
-            const a = project(SCREEN, camera, ax, -control.links * control.spacing * 1.15, az, width, height);
-
-            const x0 = SCREEN[0];
-            const y0 = SCREEN[1];
-
-            const b = project(SCREEN, camera, bx, -control.links * control.spacing * 1.15, bz, width, height);
-
-            if (a <= 0.01 || b <= 0.01) {
-                continue;
-            }
-
-            context.beginPath();
-            context.moveTo(x0, y0);
-            context.lineTo(SCREEN[0], SCREEN[1]);
-            context.stroke();
-        }
-    }
-}
-
-// ---------------------------------------------------------------- readout
-
-function refresh_readout() {
-    element('ms').textContent = last_ms.toFixed(3);
-
-    if (timing.length > 0) {
-        const sorted = timing.slice().sort((a, b) => a - b);
-
-        element('ms_min').textContent = `(min ${sorted[0].toFixed(3)})`;
-
-        const bar = element('budget');
-
-        bar.classList.toggle('over', sorted[0] > BUDGET_MS);
-        bar.firstElementChild.style.width = `${Math.min(100, sorted[0] / BUDGET_MS * 100)}%`;
-    }
-
-    let particles = 0;
-    let stretch = 0;
-    let bend = 0;
-    let leash = 0;
-    let colours = 0;
-    let tether = 0;
-    let speed = 0;
-    let teleports = 0;
-    let asleep = 0;
-    let seeded = 0;
-    let trouble = "";
-
-    for (const anchor of scene.anchor) {
-        const instance = scene.cloth.instanceOf(anchor);
-
-        if (instance === undefined || !instance.seeded) {
-            continue;
-        }
-
-        seeded++;
-
-        const state = instance.state;
-
-        particles += state.particle_count;
-        stretch += state.stretch_count;
-        bend += state.bend_count;
-        leash += state.leash_count;
-        colours = Math.max(colours, state.colour_count);
-        teleports += instance.teleport_count;
-
-        if (instance.asleep) {
-            asleep++;
-        }
-
-        if (trouble === "") {
-            trouble = find_non_finite_cloth_state(state);
-        }
-
-        const origin = instance.particle_of_node[0] * 3;
-
-        for (let node = 1; node < instance.node_count; node++) {
-            const p = instance.particle_of_node[node] * 3;
-
-            const distance = Math.hypot(
-                state.position[p] - state.position[origin],
-                state.position[p + 1] - state.position[origin + 1],
-                state.position[p + 2] - state.position[origin + 2]
-            );
-
-            tether = Math.max(tether, distance / instance.geodesic[node]);
-        }
-
-        for (let i = 0; i < state.particle_count; i++) {
-            const p = i * 3;
-
-            speed = Math.max(speed, Math.hypot(state.velocity[p], state.velocity[p + 1], state.velocity[p + 2]));
-        }
-    }
-
-    element('counts').textContent = `${seeded} / ${particles}`;
-    element('rows').textContent = `${stretch} / ${bend} / ${leash}`;
-    element('colours').textContent = String(colours);
-    element('tether').textContent = tether.toFixed(4);
-    element('speed').textContent = `${speed.toFixed(2)} m/s`;
-    element('teleports').textContent = String(teleports);
-
-    const sleep_cell = element('asleep');
-
-    sleep_cell.textContent = asleep === 0 ? 'no' : `${asleep} of ${seeded}`;
-    sleep_cell.className = asleep > 0 ? 'yes' : '';
-
-    if (trouble !== "" && element('tripwire').className !== 'bad') {
-        element('tripwire').textContent = trouble.slice(0, 90);
-        element('tripwire').className = 'bad';
-    }
-}
-
-// ---------------------------------------------------------------- controls
-
-function build_rig_buttons() {
-    const host = element('rigs');
-
-    for (const rig of CLOTH_RIGS) {
-        const button = document.createElement('button');
-
-        button.innerHTML = `${rig.label}<small>${rig.blurb}</small>`;
-
-        button.addEventListener('click', () => {
-            control.rig = rig.id;
-
-            adopt_library(rig.dynamics);
-
-            sync_inputs();
-            rebuild();
-        });
-
-        host.appendChild(button);
-    }
-}
-
-function build_library_options() {
-    const select = element('dynamics');
-
-    for (const name of Object.keys(CLOTH_DYNAMICS_BY_NAME)) {
-        const option = document.createElement('option');
-
-        option.value = name;
-        option.textContent = name.toLowerCase();
-
-        select.appendChild(option);
-    }
-}
-
-/**
- * @param {string} id
- * @param {string} key
- * @param {function(number): string} format
- * @param {boolean} rebuilds
- */
-function bind_range(id, key, format, rebuilds) {
-    const input = element(id);
-    const output = element(`${id}_out`);
-
-    const refresh = () => {
-        input.value = String(control[key]);
-        output.textContent = format(control[key]);
-    };
-
-    input.addEventListener('input', () => {
-        control[key] = Number(input.value);
-
-        output.textContent = format(control[key]);
-
-        if (rebuilds) {
-            rebuild();
-        } else {
-            apply_dynamics();
-        }
-    });
-
-    refresh();
-
-    return refresh;
-}
-
-const refreshers = [];
-
-function sync_inputs() {
-    for (const refresh of refreshers) {
-        refresh();
-    }
-
-    element('dynamics').value = control.dynamics;
-    element('motion').value = control.motion;
-}
-
-function bind_controls() {
-    refreshers.push(bind_range('links', 'links', v => String(v), true));
-    refreshers.push(bind_range('spacing', 'spacing', v => `${(v * 100).toFixed(1)} cm`, true));
-
-    refreshers.push(bind_range('stretch', 'stretch', v => v.toFixed(2), false));
-    refreshers.push(bind_range('bend', 'bend', v => v.toFixed(2), false));
-    refreshers.push(bind_range('damping', 'damping', v => v.toFixed(2), false));
-    refreshers.push(bind_range('slack', 'slack', v => v.toFixed(2), false));
-    refreshers.push(bind_range('inertia', 'inertia', v => v.toFixed(2), false));
-    refreshers.push(bind_range('blend', 'blend', v => v.toFixed(2), false));
-    refreshers.push(bind_range('substeps', 'substeps', v => String(v), false));
-    refreshers.push(bind_range('iterations', 'iterations', v => String(v), false));
-
-    element('dynamics').addEventListener('change', (event) => {
-        adopt_library(event.target.value);
-
-        sync_inputs();
-        apply_dynamics();
-    });
-
-    element('motion').addEventListener('change', (event) => {
-        control.motion = event.target.value;
-    });
-
-    element('teleport').addEventListener('click', () => {
-        if (scene === null) {
-            return;
-        }
-
-        const transform = scene.ecd.getComponent(scene.anchor[0], Transform64);
-
-        transform[TRANSFORM64_TRANSLATION_OFFSET] += 1000;
-        transform.updateMatrix();
-
-        // Chase it, or there is nothing to look at.
-        camera.target[0] += 1000;
-    });
-
-    for (const [id, key] of [['keep', 'keep'], ['never_sleep', 'never_sleep']]) {
-        element(id).addEventListener('click', () => {
-            control[key] = !control[key];
-
-            element(id).classList.toggle('on', control[key]);
-
-            apply_dynamics();
-        });
-    }
-
-    for (const [id, view] of [['view_links', 'links'], ['view_animated', 'animated'], ['view_frames', 'frames']]) {
-        element(id).addEventListener('click', () => {
-            control.view = view;
-
-            for (const other of ['view_links', 'view_animated', 'view_frames']) {
-                element(other).classList.toggle('on', other === id);
-            }
-        });
-    }
-
-    element('pause').addEventListener('click', () => {
-        control.running = !control.running;
-
-        element('pause').textContent = control.running ? 'pause' : 'run';
-    });
-
-    element('single').addEventListener('click', () => step_once());
-
-    element('reset').addEventListener('click', () => rebuild());
-
-    element('poke').addEventListener('click', () => {
-        if (scene === null) {
-            return;
-        }
-
-        for (const anchor of scene.anchor) {
-            const instance = scene.cloth.instanceOf(anchor);
-
-            if (instance === undefined || !instance.seeded) {
-                continue;
-            }
-
-            scene.cloth.wake(anchor);
-
-            for (let i = 0; i < instance.state.particle_count; i++) {
-                instance.state.velocity[i * 3] += (Math.random() - 0.5) * 6;
-                instance.state.velocity[i * 3 + 2] += (Math.random() - 0.5) * 6;
-            }
-        }
-    });
-}
-
-// ---------------------------------------------------------------- camera
-
-let dragging = false;
-let panning = false;
-let last_x = 0;
-let last_y = 0;
-
-canvas.addEventListener('pointerdown', (event) => {
-    dragging = true;
-    panning = event.shiftKey || event.button === 2;
-
-    last_x = event.clientX;
-    last_y = event.clientY;
-
-    canvas.classList.add('grabbing');
-    canvas.setPointerCapture(event.pointerId);
-});
-
-canvas.addEventListener('pointermove', (event) => {
-    if (!dragging) {
-        return;
-    }
-
-    const dx = event.clientX - last_x;
-    const dy = event.clientY - last_y;
-
-    last_x = event.clientX;
-    last_y = event.clientY;
-
-    if (panning) {
-        const scale = camera.distance * 0.0016;
-
-        camera.target[0] -= (dx * Math.cos(camera.yaw)) * scale;
-        camera.target[2] += (dx * Math.sin(camera.yaw)) * scale;
-        camera.target[1] += dy * scale;
-    } else {
-        camera.yaw -= dx * 0.006;
-        camera.pitch = Math.max(-1.4, Math.min(1.4, camera.pitch + dy * 0.006));
-    }
-});
-
-canvas.addEventListener('pointerup', (event) => {
-    dragging = false;
-
-    canvas.classList.remove('grabbing');
-    canvas.releasePointerCapture(event.pointerId);
-});
-
-canvas.addEventListener('wheel', (event) => {
-    event.preventDefault();
-
-    camera.distance = Math.max(0.05, camera.distance * Math.exp(event.deltaY * 0.001));
-}, { passive: false });
-
-canvas.addEventListener('contextmenu', (event) => event.preventDefault());
-
-// ---------------------------------------------------------------- start
-
-build_rig_buttons();
-build_library_options();
-adopt_library('ROPE');
-bind_controls();
-sync_inputs();
-
-const ready = rebuild();
-
-globalThis.cloth_rig_playground = {
-    control,
-    camera,
-    rebuild,
-    step_once,
-    render,
-    ready,
-    get scene() {
-        return scene;
-    }
-};
-
-requestAnimationFrame(frame);
+import {
+    TRANSFORM64_ROTATION_OFFSET,
+    TRANSFORM64_TRANSLATION_OFFSET,
+    Transform64
+} from "../../../ecs/transform/Transform64.js";
+import { v3_quaternion_apply } from "../../../../core/geom/vec3/v3_quaternion_apply.js";
+import { ClothFlags } from "../ecs/ClothFlags.js";
+import { Cloth } from "../ecs/Cloth.js";
+import { CLOTH_DYNAMICS_BY_NAME } from "../ecs/cloth_dynamics_library.js";
+import { find_non_finite_cloth_state } from "../solver/find_non_finite_cloth_state.js";
+import { PlaygroundCamera, project } from "./cloth_playground_draw.js";
+import { build_cloth_rig, CLOTH_RIGS } from "./rig_build.js";
+import { number_compare_ascending } from "../../../../core/primitives/numbers/number_compare_ascending.js";
+import { cloth_worst_tether_ratio } from "../solver/cloth_worst_tether_ratio.js";
+
+/**
+ * # Cloth rigs — the M1 playground
+ *
+ * `npm run dev --workspace @woosh/meep-engine`, then
+ * <http://localhost:5173/src/engine/physics/cloth/playground/rig.html>.
+ *
+ * The sibling of `index.html`, one layer up. That page is the solver with a
+ * canvas attached and no ECS at all, because at M0 there was none; this one is
+ * the **entity-subtree path** — a real `EntityManager`, real entities with real
+ * `TransformAttachment`s, a `Cloth` component on top, and `ClothSystem` walking
+ * the subtree and writing `Transform64` back. Every point on screen is an
+ * entity's world transform, read out of the component the system wrote it into.
+ *
+ * The rigs are the ones §17 asks M1 to show — a rope, a chain, and a
+ * multi-strand rig under one `Cloth` — plus two that make the walk's two rules
+ * visible: a hanging sign whose sign is a `ClothExclude`, and a rope with a
+ * second `Cloth` partway down. The **cloths / particles** readout is the whole
+ * of §3.1's coupled-solve claim: five strands, one cloth, one state, one
+ * colouring.
+ *
+ * `globalThis.cloth_rig_playground` exposes `{ control, camera, ready, rebuild,
+ * step_once, render, scene }` for a driver script. `requestAnimationFrame` does
+ * not fire while a browser pane is hidden, and everything on this page hangs
+ * off it — so a driver drives `step_once` and `render` itself and waits for no
+ * frames at all. `ready` is the first `rebuild`, and `rebuild` returns a
+ * promise because `EntityManager#startup` does.
+ *
+ * @author Alex Goldring
+ * @copyright Company Named Limited (c) 2026
+ */
+
+/** The rate `ClothSystem` is stepped at. */
+const FIXED_STEP = 1 / 60;
+
+/** §17's target, for the budget bar. */
+const BUDGET_MS = 2;
+
+/** How many recent step timings the readout keeps. */
+const TIMING_WINDOW = 120;
+
+const element = (id) => document.getElementById(id);
+
+const canvas = element('view');
+const context = canvas.getContext('2d');
+
+const camera = new PlaygroundCamera();
+
+const control = {
+    rig: 'rope',
+    dynamics: 'ROPE',
+    links: 24,
+    spacing: 0.05,
+
+    stretch: 0.98,
+    bend: 0.06,
+    damping: 0.1,
+    slack: 1,
+    inertia: 1,
+    blend: 1,
+    substeps: 2,
+    iterations: 4,
+
+    motion: 'still',
+    keep: false,
+    never_sleep: false,
+
+    view: 'links',
+    running: true
+};
+
+/** @type {import('./rig_build.js').ClothRigScene} */
+let scene = null;
+
+const timing = [];
+
+let last_ms = 0;
+let elapsed = 0;
+
+const SCREEN = new Float64Array(2);
+const POINT = new Float64Array(3);
+
+// ---------------------------------------------------------------- the rig
+
+async function rebuild() {
+    scene = null;
+
+    scene = await build_cloth_rig({
+        rig: control.rig,
+        dynamics: control.dynamics,
+        links: control.links,
+        spacing: control.spacing
+    });
+
+    apply_dynamics();
+
+    timing.length = 0;
+    elapsed = 0;
+
+    element('tripwire').textContent = 'ok';
+    element('tripwire').className = 'good';
+
+    // One step so the subtree is walked and the readout has something to say.
+    step_once();
+
+    frame_camera();
+}
+
+/**
+ * Write the sliders into every `Cloth` in the rig. The library entries are
+ * frozen and shared, so each cloth owns a clone — which is exactly the
+ * `.clone()` step §3.3 describes, done by a page rather than by an author.
+ */
+function apply_dynamics() {
+    if (scene === null) {
+        return;
+    }
+
+    for (const anchor of scene.anchor) {
+        const cloth = scene.ecd.getComponent(anchor, Cloth);
+
+        if (cloth === undefined) {
+            continue;
+        }
+
+        if (cloth.dynamics.isClothDynamics !== true || Object.isFrozen(cloth.dynamics)) {
+            cloth.dynamics = cloth.dynamics.clone();
+        }
+
+        cloth.dynamics.stretch = control.stretch;
+        cloth.dynamics.bend = control.bend;
+        cloth.dynamics.damping = control.damping;
+        cloth.dynamics.slack = control.slack;
+        cloth.dynamics.inertia = control.inertia;
+        cloth.dynamics.substeps = control.substeps;
+        cloth.dynamics.iterations = control.iterations;
+
+        cloth.blend = control.blend;
+
+        cloth.flags = (control.keep ? ClothFlags.TeleportKeep : 0)
+            | (control.never_sleep ? ClothFlags.NeverSleep : 0);
+    }
+}
+
+/**
+ * Pull the sliders from a library entry, so picking one shows what it is made
+ * of rather than silently overriding it.
+ */
+function adopt_library(name) {
+    const entry = CLOTH_DYNAMICS_BY_NAME[name];
+
+    if (entry === undefined) {
+        return;
+    }
+
+    control.dynamics = name;
+    control.stretch = entry.stretch;
+    control.bend = entry.bend;
+    control.damping = entry.damping;
+    control.slack = entry.slack;
+    control.inertia = entry.inertia;
+    control.substeps = entry.substeps;
+    control.iterations = entry.iterations;
+}
+
+function frame_camera() {
+    let min_x = Infinity, min_y = Infinity, min_z = Infinity;
+    let max_x = -Infinity, max_y = -Infinity, max_z = -Infinity;
+
+    for (const chain of scene.strand) {
+        for (const entity of chain) {
+            const t = scene.ecd.getComponent(entity, Transform64);
+
+            if (t === undefined) {
+                continue;
+            }
+
+            min_x = Math.min(min_x, t[TRANSFORM64_TRANSLATION_OFFSET]);
+            max_x = Math.max(max_x, t[TRANSFORM64_TRANSLATION_OFFSET]);
+            min_y = Math.min(min_y, t[TRANSFORM64_TRANSLATION_OFFSET + 1]);
+            max_y = Math.max(max_y, t[TRANSFORM64_TRANSLATION_OFFSET + 1]);
+            min_z = Math.min(min_z, t[TRANSFORM64_TRANSLATION_OFFSET + 2]);
+            max_z = Math.max(max_z, t[TRANSFORM64_TRANSLATION_OFFSET + 2]);
+        }
+    }
+
+    if (!Number.isFinite(min_x)) {
+        return;
+    }
+
+    camera.target[0] = (min_x + max_x) * 0.5;
+    camera.target[1] = (min_y + max_y) * 0.5;
+    camera.target[2] = (min_z + max_z) * 0.5;
+
+    camera.distance = Math.max(max_x - min_x, max_y - min_y, max_z - min_z, 0.05) * 2.2;
+}
+
+// ---------------------------------------------------------------- the loop
+
+/**
+ * Drive the anchor. This is the only thing on the page that writes a transform
+ * the cloth does not own, and it stands in for whatever poses an anchor in a
+ * real scene — an animation, a path follower, a vehicle.
+ */
+function drive_anchor() {
+    if (scene === null || scene.anchor.length === 0) {
+        return;
+    }
+
+    const transform = scene.ecd.getComponent(scene.anchor[0], Transform64);
+
+    if (transform === undefined) {
+        return;
+    }
+
+    const reach = control.links * control.spacing;
+
+    switch (control.motion) {
+        case 'sway':
+            transform.setTranslation(Math.sin(elapsed * 2.2) * reach * 0.7, 0, 0);
+            break;
+
+        case 'sprint': {
+            // A square wave in velocity, which is §7 P7's own profile: the
+            // worst thing locomotion does to a hanging thing.
+            const phase = Math.floor(elapsed) % 4;
+
+            const speed = phase === 0 ? 6 : (phase === 2 ? -6 : 0);
+
+            transform[TRANSFORM64_TRANSLATION_OFFSET] += speed * FIXED_STEP;
+            break;
+        }
+
+        case 'spin':
+            transform.setRotation(0, Math.sin(elapsed * 1.6), 0, Math.cos(elapsed * 1.6));
+            break;
+
+        case 'orbit':
+            transform.setTranslation(
+                Math.cos(elapsed * 1.8) * reach * 0.6,
+                Math.sin(elapsed * 2.6) * reach * 0.25,
+                Math.sin(elapsed * 1.8) * reach * 0.6
+            );
+            break;
+
+        default:
+            break;
+    }
+
+    transform.updateMatrix();
+}
+
+function step_once() {
+    if (scene === null) {
+        return;
+    }
+
+    elapsed += FIXED_STEP;
+
+    drive_anchor();
+
+    const started = performance.now();
+
+    try {
+        scene.cloth.fixedUpdate(FIXED_STEP);
+    } catch (error) {
+        control.running = false;
+
+        element('tripwire').textContent = String(error.message).slice(0, 90);
+        element('tripwire').className = 'bad';
+        element('pause').textContent = 'run';
+
+        return;
+    }
+
+    last_ms = performance.now() - started;
+
+    timing.push(last_ms);
+
+    if (timing.length > TIMING_WINDOW) {
+        timing.shift();
+    }
+}
+
+/**
+ * Paint one frame from the state as it stands, stepping nothing. Separate from
+ * {@link frame} so a driver can ask for a picture without also asking for a
+ * simulation step, and so it can get one at all — see the module docblock on
+ * `requestAnimationFrame`.
+ */
+function render() {
+    if (scene === null) {
+        return;
+    }
+
+    draw();
+    refresh_readout();
+}
+
+function frame() {
+    if (control.running) {
+        step_once();
+    }
+
+    render();
+
+    requestAnimationFrame(frame);
+}
+
+// ---------------------------------------------------------------- drawing
+
+function draw() {
+    const width = canvas.width = canvas.clientWidth;
+    const height = canvas.height = canvas.clientHeight;
+
+    context.clearRect(0, 0, width, height);
+    context.fillStyle = '#0d0f12';
+    context.fillRect(0, 0, width, height);
+
+    draw_ground(width, height);
+
+    if (control.view === 'animated') {
+        draw_animated(width, height);
+    }
+
+    for (const chain of scene.strand) {
+        draw_chain(chain, width, height);
+    }
+
+    if (control.view === 'frames') {
+        for (const chain of scene.strand) {
+            for (const entity of chain) {
+                draw_frame(entity, width, height);
+            }
+        }
+    }
+
+    for (const entity of scene.excluded) {
+        draw_marker(entity, width, height, '#e5b54a', 6);
+    }
+
+    for (const anchor of scene.anchor) {
+        draw_marker(anchor, width, height, '#e5533d', 5);
+    }
+}
+
+/**
+ * @param {number[]} chain
+ * @param {number} width
+ * @param {number} height
+ */
+function draw_chain(chain, width, height) {
+    context.strokeStyle = '#7f8b9c';
+    context.lineWidth = 2;
+    context.beginPath();
+
+    let started = false;
+
+    for (const entity of chain) {
+        const t = scene.ecd.getComponent(entity, Transform64);
+
+        if (t === undefined) {
+            continue;
+        }
+
+        const depth = project(
+            SCREEN, camera,
+            t[TRANSFORM64_TRANSLATION_OFFSET],
+            t[TRANSFORM64_TRANSLATION_OFFSET + 1],
+            t[TRANSFORM64_TRANSLATION_OFFSET + 2],
+            width, height
+        );
+
+        if (depth <= 0.01) {
+            started = false;
+
+            continue;
+        }
+
+        if (started) {
+            context.lineTo(SCREEN[0], SCREEN[1]);
+        } else {
+            context.moveTo(SCREEN[0], SCREEN[1]);
+
+            started = true;
+        }
+    }
+
+    context.stroke();
+
+    context.fillStyle = '#c9d2de';
+
+    for (const entity of chain) {
+        const t = scene.ecd.getComponent(entity, Transform64);
+
+        if (t === undefined) {
+            continue;
+        }
+
+        const depth = project(
+            SCREEN, camera,
+            t[TRANSFORM64_TRANSLATION_OFFSET],
+            t[TRANSFORM64_TRANSLATION_OFFSET + 1],
+            t[TRANSFORM64_TRANSLATION_OFFSET + 2],
+            width, height
+        );
+
+        if (depth <= 0.01) {
+            continue;
+        }
+
+        context.beginPath();
+        context.arc(SCREEN[0], SCREEN[1], 2.5, 0, Math.PI * 2);
+        context.fill();
+    }
+}
+
+/**
+ * The pose the cloth is leashed to — `blend = 0`'s answer, drawn faintly beside
+ * the simulated one. The gap between the two lines is what `slack` bounds.
+ */
+function draw_animated(width, height) {
+    for (const anchor of scene.anchor) {
+        const instance = scene.cloth.instanceOf(anchor);
+
+        if (instance === undefined || !instance.seeded) {
+            continue;
+        }
+
+        const transform = instance.node_transform[0];
+
+        context.strokeStyle = 'rgba(111, 168, 220, 0.45)';
+        context.lineWidth = 1;
+
+        for (let node = 1; node < instance.node_count; node++) {
+            const parent = instance.node_parent[node];
+
+            context.beginPath();
+
+            let ok = true;
+
+            for (const which of [parent, node]) {
+                v3_quaternion_apply(
+                    POINT, 0,
+                    instance.animated_position[which * 3],
+                    instance.animated_position[which * 3 + 1],
+                    instance.animated_position[which * 3 + 2],
+                    transform[TRANSFORM64_ROTATION_OFFSET],
+                    transform[TRANSFORM64_ROTATION_OFFSET + 1],
+                    transform[TRANSFORM64_ROTATION_OFFSET + 2],
+                    transform[TRANSFORM64_ROTATION_OFFSET + 3]
+                );
+
+                const depth = project(
+                    SCREEN, camera,
+                    POINT[0] + transform[TRANSFORM64_TRANSLATION_OFFSET],
+                    POINT[1] + transform[TRANSFORM64_TRANSLATION_OFFSET + 1],
+                    POINT[2] + transform[TRANSFORM64_TRANSLATION_OFFSET + 2],
+                    width, height
+                );
+
+                if (depth <= 0.01) {
+                    ok = false;
+
+                    break;
+                }
+
+                if (which === parent) {
+                    context.moveTo(SCREEN[0], SCREEN[1]);
+                } else {
+                    context.lineTo(SCREEN[0], SCREEN[1]);
+                }
+            }
+
+            if (ok) {
+                context.stroke();
+            }
+        }
+    }
+}
+
+/**
+ * The orientation the write-back reconstructed, as a short axis triple. §11.1's
+ * "rotation derived from the direction to the child" is only visible here.
+ */
+function draw_frame(entity, width, height) {
+    const t = scene.ecd.getComponent(entity, Transform64);
+
+    if (t === undefined) {
+        return;
+    }
+
+    const length = control.spacing * 0.6;
+
+    const axes = [
+        [length, 0, 0, '#e5533d'],
+        [0, length, 0, '#5ad19a'],
+        [0, 0, length, '#6fa8dc']
+    ];
+
+    const origin_depth = project(
+        SCREEN, camera,
+        t[TRANSFORM64_TRANSLATION_OFFSET],
+        t[TRANSFORM64_TRANSLATION_OFFSET + 1],
+        t[TRANSFORM64_TRANSLATION_OFFSET + 2],
+        width, height
+    );
+
+    if (origin_depth <= 0.01) {
+        return;
+    }
+
+    const ox = SCREEN[0];
+    const oy = SCREEN[1];
+
+    for (const [ax, ay, az, colour] of axes) {
+        v3_quaternion_apply(
+            POINT, 0, ax, ay, az,
+            t[TRANSFORM64_ROTATION_OFFSET],
+            t[TRANSFORM64_ROTATION_OFFSET + 1],
+            t[TRANSFORM64_ROTATION_OFFSET + 2],
+            t[TRANSFORM64_ROTATION_OFFSET + 3]
+        );
+
+        const depth = project(
+            SCREEN, camera,
+            t[TRANSFORM64_TRANSLATION_OFFSET] + POINT[0],
+            t[TRANSFORM64_TRANSLATION_OFFSET + 1] + POINT[1],
+            t[TRANSFORM64_TRANSLATION_OFFSET + 2] + POINT[2],
+            width, height
+        );
+
+        if (depth <= 0.01) {
+            continue;
+        }
+
+        context.strokeStyle = colour;
+        context.lineWidth = 1;
+        context.beginPath();
+        context.moveTo(ox, oy);
+        context.lineTo(SCREEN[0], SCREEN[1]);
+        context.stroke();
+    }
+}
+
+function draw_marker(entity, width, height, colour, radius) {
+    const t = scene.ecd.getComponent(entity, Transform64);
+
+    if (t === undefined) {
+        return;
+    }
+
+    const depth = project(
+        SCREEN, camera,
+        t[TRANSFORM64_TRANSLATION_OFFSET],
+        t[TRANSFORM64_TRANSLATION_OFFSET + 1],
+        t[TRANSFORM64_TRANSLATION_OFFSET + 2],
+        width, height
+    );
+
+    if (depth <= 0.01) {
+        return;
+    }
+
+    context.fillStyle = colour;
+    context.beginPath();
+    context.arc(SCREEN[0], SCREEN[1], radius, 0, Math.PI * 2);
+    context.fill();
+}
+
+function draw_ground(width, height) {
+    const step = Math.max(control.spacing * 4, 0.1);
+
+    context.strokeStyle = 'rgba(139, 147, 159, 0.16)';
+    context.lineWidth = 1;
+
+    const extent = 8;
+
+    for (let i = -extent; i <= extent; i++) {
+        for (const [ax, az, bx, bz] of [
+            [i * step, -extent * step, i * step, extent * step],
+            [-extent * step, i * step, extent * step, i * step]
+        ]) {
+            const a = project(SCREEN, camera, ax, -control.links * control.spacing * 1.15, az, width, height);
+
+            const x0 = SCREEN[0];
+            const y0 = SCREEN[1];
+
+            const b = project(SCREEN, camera, bx, -control.links * control.spacing * 1.15, bz, width, height);
+
+            if (a <= 0.01 || b <= 0.01) {
+                continue;
+            }
+
+            context.beginPath();
+            context.moveTo(x0, y0);
+            context.lineTo(SCREEN[0], SCREEN[1]);
+            context.stroke();
+        }
+    }
+}
+
+// ---------------------------------------------------------------- readout
+
+function refresh_readout() {
+    element('ms').textContent = last_ms.toFixed(3);
+
+    if (timing.length > 0) {
+        const sorted = timing.slice().sort(number_compare_ascending);
+
+        element('ms_min').textContent = `(min ${sorted[0].toFixed(3)})`;
+
+        const bar = element('budget');
+
+        bar.classList.toggle('over', sorted[0] > BUDGET_MS);
+        bar.firstElementChild.style.width = `${Math.min(100, sorted[0] / BUDGET_MS * 100)}%`;
+    }
+
+    let particles = 0;
+    let stretch = 0;
+    let bend = 0;
+    let leash = 0;
+    let colours = 0;
+    let tether = 0;
+    let speed = 0;
+    let teleports = 0;
+    let asleep = 0;
+    let seeded = 0;
+    let trouble = "";
+
+    for (const anchor of scene.anchor) {
+        const instance = scene.cloth.instanceOf(anchor);
+
+        if (instance === undefined || !instance.seeded) {
+            continue;
+        }
+
+        seeded++;
+
+        const state = instance.state;
+
+        particles += state.particle_count;
+        stretch += state.stretch_count;
+        bend += state.bend_count;
+        leash += state.leash_count;
+        colours = Math.max(colours, state.colour_count);
+        teleports += instance.teleport_count;
+
+        if (instance.asleep) {
+            asleep++;
+        }
+
+        if (trouble === "") {
+            trouble = find_non_finite_cloth_state(state);
+        }
+
+        tether = Math.max(tether, cloth_worst_tether_ratio(
+            state.position, instance.particle_of_node, instance.geodesic, instance.node_count
+        ));
+
+        for (let i = 0; i < state.particle_count; i++) {
+            const p = i * 3;
+
+            speed = Math.max(speed, Math.hypot(state.velocity[p], state.velocity[p + 1], state.velocity[p + 2]));
+        }
+    }
+
+    element('counts').textContent = `${seeded} / ${particles}`;
+    element('rows').textContent = `${stretch} / ${bend} / ${leash}`;
+    element('colours').textContent = String(colours);
+    element('tether').textContent = tether.toFixed(4);
+    element('speed').textContent = `${speed.toFixed(2)} m/s`;
+    element('teleports').textContent = String(teleports);
+
+    const sleep_cell = element('asleep');
+
+    sleep_cell.textContent = asleep === 0 ? 'no' : `${asleep} of ${seeded}`;
+    sleep_cell.className = asleep > 0 ? 'yes' : '';
+
+    if (trouble !== "" && element('tripwire').className !== 'bad') {
+        element('tripwire').textContent = trouble.slice(0, 90);
+        element('tripwire').className = 'bad';
+    }
+}
+
+// ---------------------------------------------------------------- controls
+
+function build_rig_buttons() {
+    const host = element('rigs');
+
+    for (const rig of CLOTH_RIGS) {
+        const button = document.createElement('button');
+
+        button.innerHTML = `${rig.label}<small>${rig.blurb}</small>`;
+
+        button.addEventListener('click', () => {
+            control.rig = rig.id;
+
+            adopt_library(rig.dynamics);
+
+            sync_inputs();
+            rebuild();
+        });
+
+        host.appendChild(button);
+    }
+}
+
+function build_library_options() {
+    const select = element('dynamics');
+
+    for (const name of Object.keys(CLOTH_DYNAMICS_BY_NAME)) {
+        const option = document.createElement('option');
+
+        option.value = name;
+        option.textContent = name.toLowerCase();
+
+        select.appendChild(option);
+    }
+}
+
+/**
+ * @param {string} id
+ * @param {string} key
+ * @param {function(number): string} format
+ * @param {boolean} rebuilds
+ */
+function bind_range(id, key, format, rebuilds) {
+    const input = element(id);
+    const output = element(`${id}_out`);
+
+    const refresh = () => {
+        input.value = String(control[key]);
+        output.textContent = format(control[key]);
+    };
+
+    input.addEventListener('input', () => {
+        control[key] = Number(input.value);
+
+        output.textContent = format(control[key]);
+
+        if (rebuilds) {
+            rebuild();
+        } else {
+            apply_dynamics();
+        }
+    });
+
+    refresh();
+
+    return refresh;
+}
+
+const refreshers = [];
+
+function sync_inputs() {
+    for (const refresh of refreshers) {
+        refresh();
+    }
+
+    element('dynamics').value = control.dynamics;
+    element('motion').value = control.motion;
+}
+
+function bind_controls() {
+    refreshers.push(bind_range('links', 'links', v => String(v), true));
+    refreshers.push(bind_range('spacing', 'spacing', v => `${(v * 100).toFixed(1)} cm`, true));
+
+    refreshers.push(bind_range('stretch', 'stretch', v => v.toFixed(2), false));
+    refreshers.push(bind_range('bend', 'bend', v => v.toFixed(2), false));
+    refreshers.push(bind_range('damping', 'damping', v => v.toFixed(2), false));
+    refreshers.push(bind_range('slack', 'slack', v => v.toFixed(2), false));
+    refreshers.push(bind_range('inertia', 'inertia', v => v.toFixed(2), false));
+    refreshers.push(bind_range('blend', 'blend', v => v.toFixed(2), false));
+    refreshers.push(bind_range('substeps', 'substeps', v => String(v), false));
+    refreshers.push(bind_range('iterations', 'iterations', v => String(v), false));
+
+    element('dynamics').addEventListener('change', (event) => {
+        adopt_library(event.target.value);
+
+        sync_inputs();
+        apply_dynamics();
+    });
+
+    element('motion').addEventListener('change', (event) => {
+        control.motion = event.target.value;
+    });
+
+    element('teleport').addEventListener('click', () => {
+        if (scene === null) {
+            return;
+        }
+
+        const transform = scene.ecd.getComponent(scene.anchor[0], Transform64);
+
+        transform[TRANSFORM64_TRANSLATION_OFFSET] += 1000;
+        transform.updateMatrix();
+
+        // Chase it, or there is nothing to look at.
+        camera.target[0] += 1000;
+    });
+
+    for (const [id, key] of [['keep', 'keep'], ['never_sleep', 'never_sleep']]) {
+        element(id).addEventListener('click', () => {
+            control[key] = !control[key];
+
+            element(id).classList.toggle('on', control[key]);
+
+            apply_dynamics();
+        });
+    }
+
+    for (const [id, view] of [['view_links', 'links'], ['view_animated', 'animated'], ['view_frames', 'frames']]) {
+        element(id).addEventListener('click', () => {
+            control.view = view;
+
+            for (const other of ['view_links', 'view_animated', 'view_frames']) {
+                element(other).classList.toggle('on', other === id);
+            }
+        });
+    }
+
+    element('pause').addEventListener('click', () => {
+        control.running = !control.running;
+
+        element('pause').textContent = control.running ? 'pause' : 'run';
+    });
+
+    element('single').addEventListener('click', () => step_once());
+
+    element('reset').addEventListener('click', () => rebuild());
+
+    element('poke').addEventListener('click', () => {
+        if (scene === null) {
+            return;
+        }
+
+        for (const anchor of scene.anchor) {
+            const instance = scene.cloth.instanceOf(anchor);
+
+            if (instance === undefined || !instance.seeded) {
+                continue;
+            }
+
+            scene.cloth.wake(anchor);
+
+            for (let i = 0; i < instance.state.particle_count; i++) {
+                instance.state.velocity[i * 3] += (Math.random() - 0.5) * 6;
+                instance.state.velocity[i * 3 + 2] += (Math.random() - 0.5) * 6;
+            }
+        }
+    });
+}
+
+// ---------------------------------------------------------------- camera
+
+let dragging = false;
+let panning = false;
+let last_x = 0;
+let last_y = 0;
+
+canvas.addEventListener('pointerdown', (event) => {
+    dragging = true;
+    panning = event.shiftKey || event.button === 2;
+
+    last_x = event.clientX;
+    last_y = event.clientY;
+
+    canvas.classList.add('grabbing');
+    canvas.setPointerCapture(event.pointerId);
+});
+
+canvas.addEventListener('pointermove', (event) => {
+    if (!dragging) {
+        return;
+    }
+
+    const dx = event.clientX - last_x;
+    const dy = event.clientY - last_y;
+
+    last_x = event.clientX;
+    last_y = event.clientY;
+
+    if (panning) {
+        const scale = camera.distance * 0.0016;
+
+        camera.target[0] -= (dx * Math.cos(camera.yaw)) * scale;
+        camera.target[2] += (dx * Math.sin(camera.yaw)) * scale;
+        camera.target[1] += dy * scale;
+    } else {
+        camera.yaw -= dx * 0.006;
+        camera.pitch = Math.max(-1.4, Math.min(1.4, camera.pitch + dy * 0.006));
+    }
+});
+
+canvas.addEventListener('pointerup', (event) => {
+    dragging = false;
+
+    canvas.classList.remove('grabbing');
+    canvas.releasePointerCapture(event.pointerId);
+});
+
+canvas.addEventListener('wheel', (event) => {
+    event.preventDefault();
+
+    camera.distance = Math.max(0.05, camera.distance * Math.exp(event.deltaY * 0.001));
+}, { passive: false });
+
+canvas.addEventListener('contextmenu', (event) => event.preventDefault());
+
+// ---------------------------------------------------------------- start
+
+build_rig_buttons();
+build_library_options();
+adopt_library('ROPE');
+bind_controls();
+sync_inputs();
+
+const ready = rebuild();
+
+globalThis.cloth_rig_playground = {
+    control,
+    camera,
+    rebuild,
+    step_once,
+    render,
+    ready,
+    get scene() {
+        return scene;
+    }
+};
+
+requestAnimationFrame(frame);