# anatomy Build crafted, highly detailed, interactive isometric SVG figures that explain a technical idea as a real physical object (a test rig, a dial gauge, a cabinet of drawers, a plotter, a lock), with many small precise solid parts, four-tone shading, correct painter's order, a framed card with title, hint and live readout, and calm eased motion. Use this whenever someone wants an isometric illustration, an explanatory diagram or figure for docs, a blog post, a landing page or an article, a "Linear-style" or "premium" technical drawing, an interactive explainer, or an SVG that shows how a system, algorithm or component works, even if they never say "isometric". Works framework-free (TypeScript/JS that writes SVG and HTML) and in React/Next.js, and can add realistic WebGL shaders (fire, exhaust, water, caustics, lamp light) that live inside the drawing in the same isometric perspective. - **Kind:** skill - **Source:** https://github.com/wheresryan22/anatomy - **Page:** https://forefy.com/skills/1a0047e4-b2df-4471-bb42-729a099e2590 - **API (JSON + files):** https://forefy.com/api/asr/1a0047e4-b2df-4471-bb42-729a099e2590 --- ## .gitattributes ``` ``` ## .github ``` ``` ## .github/ISSUE_TEMPLATE ``` ``` ## .github/ISSUE_TEMPLATE/bug_report.yml ```yaml name: Bug report description: A figure, the kit, a check script or the install did something wrong. title: "Bug: " labels: ["bug"] body: - type: markdown attributes: value: | Thanks for reporting. A screenshot helps most, and for a drawing fault a 4× close-up (`node scripts/capture.mjs page.html --zoom x,y,w,h`). - type: dropdown id: area attributes: label: Where is the problem? options: - A figure Claude made with the skill - One of the examples - The kit (kit/) - A check script (scripts/) - SKILL.md or a reference - Installing the skill validations: required: true - type: dropdown id: kind attributes: label: Kind of figure options: - SVG - SVG + WebGL - 3D (beta) - Not about a figure - type: dropdown id: target attributes: label: Where does the figure live? options: - Standalone HTML - A lone SVG file - React / Next.js - Not about a figure - type: dropdown id: theme attributes: label: Theme options: - Light - Dark - Both - Not about a figure - type: textarea id: what attributes: label: What happened description: What you saw, and where in the figure or the output. validations: required: true - type: textarea id: expected attributes: label: What you expected validations: required: true - type: textarea id: steps attributes: label: How to reproduce description: The prompt you gave Claude, or the exact command you ran. placeholder: | /anatomy explain how a token bucket rate limiter works, interactive node examples/raptor-engine/build.mjs --audit validations: required: true - type: textarea id: output attributes: label: Output description: Any error, audit lines or console messages. render: shell - type: input id: environment attributes: label: Environment description: Node.js version, operating system, Chrome version, Claude Code version. placeholder: output of `node --version` and `claude --version`, your OS, your Chrome version validations: required: true - type: textarea id: screenshots attributes: label: Screenshots description: Drag images here. Close-ups at 4× for drawing faults. ``` ## .github/ISSUE_TEMPLATE/config.yml ```yaml blank_issues_enabled: false contact_links: - name: Security problem url: https://github.com/wheresryan22/anatomy/security/advisories/new about: Report security problems privately, not in a public issue. ``` ## .github/ISSUE_TEMPLATE/figure_request.yml ```yaml name: Figure or feature request description: Ask for a new example figure, a new part or helper in the kit, a new check, or a change to how the skill works. labels: ["enhancement"] body: - type: markdown attributes: value: | Anatomy explains an idea as a real machine, instrument, tool or piece of furniture. It is not a chart library, and it does not draw people or exact maps. - type: dropdown id: request attributes: label: What are you asking for? options: - A new example figure - A new part or helper in the kit - A new check or script - A change to the skill's instructions - Something else validations: required: true - type: textarea id: idea attributes: label: The idea description: For a figure, name the idea it should explain and its real numbers (sizes, counts, rates, thresholds), or the object you have in mind and what should move. For anything else, describe the change. placeholder: A connection pool of 10 connections; requests borrow one and give it back, and wait in a queue when all 10 are busy. validations: required: true - type: dropdown id: kind attributes: label: Kind of figure options: - SVG - SVG + WebGL - 3D (beta) - Not sure - Not about a figure - type: textarea id: why attributes: label: Why it is worth adding description: What it would teach, or what you could not do without it. validations: required: true - type: textarea id: alternatives attributes: label: What you tried instead - type: checkboxes id: checks attributes: label: Before you submit options: - label: I searched the existing issues. required: true - label: I read the Limits section of the README. required: true ``` ## .github/PULL_REQUEST_TEMPLATE.md ## What this changes ## Why ## Checks Tick what applies, and say why for anything left unticked. - [ ] Every example rebuilds, and `git status --short` shows only the changes I meant. - [ ] No comments in code. - [ ] Kit changes are opt-in, and every existing example is byte-identical (or this PR says which pages change and why). - [ ] I built and looked at both themes. - [ ] Figures with pipes, cables or round parts: `node build.mjs --audit` ends `audit passed`, every failing line at 0. - [ ] `node scripts/lines.mjs` prints `line ends: 0` on both themes and in every resting pose. - [ ] Shaders: a slowed contact sheet across every transition shows no pop, and `--no-webgl` still reads. - [ ] 3D: a full run ends `turn audit passed`, and `scripts/turn-check.mjs` passes. - [ ] Every number in the figure, the readout, the caption and the docs is true. - [ ] A line under `Unreleased` in `CHANGELOG.md`. ## Screenshots Light and dark, plus 4× close-ups of every joint the change touches. ## .github/assets ``` ``` ## .github/assets/dial-indicator.webp ``` ``` ## .github/assets/raptor-engine-apart.webp ``` ``` ## .github/assets/raptor-engine-firing.webp ``` ``` ## .github/assets/ripple-tank.webp ``` ``` ## .github/assets/turning-dial.webp ``` ``` ## .github/workflows ``` ``` ## .github/workflows/ci.yml ```yaml name: CI on: push: branches: [main] pull_request: workflow_dispatch: permissions: contents: read concurrency: group: ci-${{ github.ref }} cancel-in-progress: true jobs: examples: name: Rebuild the examples runs-on: macos-latest timeout-minutes: 30 steps: - uses: actions/checkout@v7 - uses: actions/setup-node@v7 with: node-version: 22 - name: Dial indicator run: | node examples/dial-indicator/build.mjs node examples/dial-indicator/build.mjs --light - name: Desk computer run: | node examples/desk-computer/build.mjs node examples/desk-computer/build.mjs --light - name: Arcade cabinet run: | node examples/arcade-cabinet/build.mjs node examples/arcade-cabinet/build.mjs --light - name: Ripple tank run: | node examples/ripple-tank/build.mjs node examples/ripple-tank/build.mjs --light - name: Turning dial run: | node examples/turning-dial/build.mjs node examples/turning-dial/build.mjs --light node examples/turning-dial/build.mjs --light --verify node examples/turning-dial/stress.mjs --light - name: Raptor engine run: | node examples/raptor-engine/build.mjs node examples/raptor-engine/build.mjs --light - name: Committed pages are unchanged run: | git status --short git diff --stat --exit-code test -z "$(git status --porcelain)" ``` ## .gitignore ``` ``` ## CHANGELOG.md # Changelog All notable changes to Anatomy are recorded here. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). The skill has no version numbers yet, so entries are dated. ## [Unreleased] ### Added - `examples/arcade-cabinet/`, an upright arcade cabinet with its side panel off. A quarter rolls down the coin chute past the coin-switch wire into the cash box, the switch's pulse runs along its cable to the board, and the CRT warms up, self-tests and runs an attract mode drawn in the plane of the tilted monitor; the stick closes a microswitch under the panel. It draws in the light and dark themes and passes `--audit`. - `examples/spot-plate/`, a second React figure from the same site as `test-rig`: six pairs of glass drops that run together into one piece of glass as a fan of feeler blades sets `merge`. It draws in the light and dark themes. - A first workflow step, **Size it before you start**: every request is sized as a Figure (about 30–90 minutes), a Hero (2–4 hours) or an Epic (6 hours or more), and the estimate is told to the user first. An Epic is not started until the user chooses it over a proposed Hero version. Every size has a working page within the first hour, and Claude reports when a step runs past twice its share of the estimate. ### Fixed - `examples/test-rig/` drew its glass button dark in the light theme. `stretch.css` now has light values for its own colours. ### Changed - The workflow steps are renumbered 1–10. - The 4× detail sweep scales with the size: the subject and mechanism for a Figure, the whole drawing for a Hero or an Epic. The density rule itself still holds for every figure. ## 2026-10-08 ### Changed - The skill is now called Anatomy: `name: anatomy` in `SKILL.md`, invoked as `/anatomy`. It was developed privately as `isometric-objects` before this date, without releases. - The CSS tokens are now `--anatomy-*` (for example `--anatomy-card`, `--anatomy-face`, `--anatomy-shade-0`); they were `--iso-*`. Every example is rebuilt with the new names. - The figure card (`.iso-plate`) is square and flat: no rounded corners and no floating shadow, just a 1 px rule in the drawing's mid tone. - `SKILL.md` makes high detail a standing rule for every figure, raises the parts list to at least 40 parts (60–150 for a hero figure), and adds a 4× detail pass to the final check. ### Added - The public repository: a README with screenshots of the examples, the MIT license, a contributing guide, a code of conduct, a security policy, issue forms, a pull request template, and a CI workflow that rebuilds every example and fails if a committed page changes. - What the skill contains at this point: the workflow and craft rules in `SKILL.md`; the kit (SVG core, round parts, pipes, the geometry audit, the WebGL layer, React components, and the 3D mode in beta); eight references; the headless Chrome checks in `scripts/`; six examples (`dial-indicator`, `desk-computer`, `raptor-engine`, `ripple-tank`, `test-rig`, `turning-dial`); and five evals. ## CODE_OF_CONDUCT.md # Contributor Covenant Code of Conduct ## Our Pledge We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, caste, color, religion, or sexual identity and orientation. We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community. ## Our Standards Examples of behavior that contributes to a positive environment for our community include: * Demonstrating empathy and kindness toward other people * Being respectful of differing opinions, viewpoints, and experiences * Giving and gracefully accepting constructive feedback * Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience * Focusing on what is best not just for us as individuals, but for the overall community Examples of unacceptable behavior include: * The use of sexualized language or imagery, and sexual attention or advances of any kind * Trolling, insulting or derogatory comments, and personal or political attacks * Public or private harassment * Publishing others' private information, such as a physical or email address, without their explicit permission * Other conduct which could reasonably be considered inappropriate in a professional setting ## Enforcement Responsibilities Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful. Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate. ## Scope This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. ## Enforcement Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement by direct message to [@wheresryan22](https://x.com/wheresryan22) on X, or, when the report does not need to be private, through an issue on the [GitHub repository](https://github.com/wheresryan22/anatomy/issues). All complaints will be reviewed and investigated promptly and fairly. All community leaders are obligated to respect the privacy and security of the reporter of any incident. ## Enforcement Guidelines Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct: ### 1. Correction **Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community. **Consequence**: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested. ### 2. Warning **Community Impact**: A violation through a single incident or series of actions. **Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban. ### 3. Temporary Ban **Community Impact**: A serious violation of community standards, including sustained inappropriate behavior. **Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban. ### 4. Permanent Ban **Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. **Consequence**: A permanent ban from any sort of public interaction within the community. ## Attribution This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.1, available at [https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1]. Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder][Mozilla CoC]. For answers to common questions about this code of conduct, see the FAQ at [https://www.contributor-covenant.org/faq][FAQ]. Translations are available at [https://www.contributor-covenant.org/translations][translations]. [homepage]: https://www.contributor-covenant.org [v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html [Mozilla CoC]: https://github.com/mozilla/diversity [FAQ]: https://www.contributor-covenant.org/faq [translations]: https://www.contributor-covenant.org/translations ## CONTRIBUTING.md # Contributing to Anatomy Thank you for helping. Anatomy is judged by how its figures look at 4× zoom, so most of this guide is about checking your work before anyone else does. By taking part you agree to follow the [Code of Conduct](CODE_OF_CONDUCT.md). ## Setup You need: - **Node.js 20.10 or later.** Nothing to install: the kit, the build scripts and the checks use only Node's built-in modules. - **Google Chrome or Chromium** for the browser checks. The scripts find it in the usual places; otherwise set `CHROME_PATH` to the binary. - **Claude Code**, to try the skill itself. ```sh git clone https://github.com/wheresryan22/anatomy.git cd anatomy ``` To use your working copy as the skill while you change it, link it into your personal skills folder (move any installed copy out of the way first): ```sh ln -s "$PWD" ~/.claude/skills/anatomy ``` ## Building the examples Each framework-free example is one script that writes standalone pages next to itself. The built pages are committed. ```sh node examples/dial-indicator/build.mjs node examples/dial-indicator/build.mjs --light node examples/desk-computer/build.mjs node examples/desk-computer/build.mjs --light node examples/arcade-cabinet/build.mjs node examples/arcade-cabinet/build.mjs --light node examples/ripple-tank/build.mjs node examples/ripple-tank/build.mjs --light node examples/raptor-engine/build.mjs node examples/raptor-engine/build.mjs --light node examples/turning-dial/build.mjs node examples/turning-dial/build.mjs --light node examples/turning-dial/build.mjs --light --verify node examples/turning-dial/stress.mjs --light ``` The Raptor builds take a few minutes each; the rest take seconds. `examples/test-rig/` and `examples/spot-plate/` are React components with no build script. After a build, `git status --short` must show nothing unless you meant to change a figure. CI runs exactly these commands and then `git diff --exit-code`. ## The checks Run the ones that match what you touched, and read every PNG they write: open it and look. Put screenshots in `shots/`, which is ignored. **Geometry audit.** For figures with pipes, cables or round parts. It must end `audit passed`, with every failing line at 0. ```sh node examples/raptor-engine/build.mjs --audit ``` **Line ends.** Every seam, rib, tick and pointer must end on a stroke, a dot or an outline. It must print `line ends: 0`; `--out` rings the failures. ```sh node scripts/lines.mjs examples/dial-indicator/dial-indicator-light.html --out shots/lines-light.png node scripts/lines.mjs examples/dial-indicator/dial-indicator.html --out shots/lines.png ``` **Capture.** Stills, phone width, hover, keys and 4× close-ups, with WebGL on. ```sh node scripts/capture.mjs examples/ripple-tank/ripple-tank-light.html --out shots/desk.png node scripts/capture.mjs examples/ripple-tank/ripple-tank-light.html --out shots/phone.png --width 390 node scripts/capture.mjs examples/ripple-tank/ripple-tank-light.html --out shots/joint.png --zoom 200,80,220,170 node scripts/capture.mjs examples/ripple-tank/ripple-tank-light.html --out shots/still.png --reduced ``` **Drive.** Scripted sessions: move, click, key, wait for a phase, and contact sheets slowed down to catch pops in a shader. `--no-webgl` checks the SVG fallback. ```sh node scripts/drive.mjs examples/raptor-engine/raptor-engine-light.html '[["wait",1500],["key","i"],["wait",3000],["shot","shots/firing.png"]]' node scripts/drive.mjs examples/raptor-engine/raptor-engine.html '[["wait",1500],["shot","shots/no-webgl.png"]]' --no-webgl node scripts/drive.mjs examples/raptor-engine/raptor-engine-light.html --actions ignite.json ``` Anything with `until` or `eval` goes in an actions file. This `ignite.json` waits for the engine to rest, then films the start of ignition at 20× slow motion: ```json [ ["key", "Escape"], ["until", "document.querySelector('[data-readout]').textContent.includes('cold')", 15000], ["slow", 0.05], ["key", "i"], ["sheet", "shots/ignite.png", 100, 16], ["slow", 1] ] ``` **3D figures.** The orbit audit is slow (budget 30 to 40 s per part for a full run), so iterate with `--quick` and run the full audit in the background. Only a full run's `turn audit passed` counts. ```sh node examples/turning-dial/build.mjs --light --audit --quick node examples/turning-dial/build.mjs --light --audit > audit.txt 2>&1 & node scripts/turn-check.mjs examples/turning-dial/build.mjs --fidelity node scripts/turn-check.mjs examples/turning-dial/turning-dial-verify-light.html --order --step 1 node scripts/turn-check.mjs examples/turning-dial/turning-dial-light.html --lines node scripts/turn-check.mjs examples/turning-dial/turning-dial-light.html --perf --width 390 --throttle 4 node scripts/turn-bench.mjs examples/turning-dial/build.mjs ``` [`references/verify.md`](references/verify.md) has every option, the review checklist and the common faults. [`references/3d.md`](references/3d.md) covers the 3D checks. ## House rules These come from [`SKILL.md`](SKILL.md) and [`references/`](references). A pull request that breaks one will be asked to change. - **No comments in code.** Not a header, not a note beside a tricky line, not a JSDoc. Put the explanation in names and structure. Tool directives such as `"use client"` are not comments and stay. - **Kit changes are opt-in.** A change to `kit/` or `scripts/inline-kit.mjs` adds an option or a function whose default is the old behaviour. Every existing example must rebuild byte-identical; CI checks it. If a change is meant to alter a figure, say so in the pull request and commit the rebuilt pages with it. - **Both themes work, and light ships.** Every colour is a token with a light value and a dark override, never a literal in a figure's CSS or shader. Light shaders are designed for paper (normal premultiplied alpha, never `screen`), not dark glows darkened. Build with `--light` and check both pages. - **No overlaps.** No pipe or cable passes through anything, at rest, apart or in any frame of a motion. Every crossing is drawn in true depth order, proved by the audit, never tuned by eye. Fix an interlock in the geometry, never with a key bias, and record the true shape of what you draw: a stand-in shape that quiets the audit is a bug. - **Lines resolve and textures fade.** Every line ends on something. A rib row, bolt circle, seam or rule line ends on a real edge or fades out; it never stops in the middle of a surface. Curved surfaces shade smoothly, with no tone staircase. - **Shaders never pop.** Every uniform rides an envelope with an attack and a decay, a phase change is a crossfade, and every term reaches zero before any bound or canvas edge. The effect lives in world space in the figure's own camera, and the SVG still reads without WebGL. - **Every number is true.** The readout, the motion and the caption come from one model with the real numbers. Docs follow the same rule: never write a number or a feature you have not checked. - **Read every PNG.** Look at 4× close-ups of every joint in both themes before you ask for a review. ## Changing the skill's text `SKILL.md` and `references/` are instructions Claude follows, so keep them short, exact and in the same plain voice. When you change a kit API, update [`references/kit.md`](references/kit.md) in the same pull request. When you add an example, give it a folder under `examples/` with a `build.mjs` that writes `.html` and, with `--light`, `-light.html`; add it to the list in `SKILL.md`, the table in the README and the build list in [`.github/workflows/ci.yml`](.github/workflows/ci.yml). ## Pull requests 1. Open an issue first for anything larger than a fix, so we can agree on the approach. 2. Fork the repository and branch from `main`. 3. Make one change per pull request. 4. Rebuild every example and confirm that `git status --short` shows only what you meant to change. 5. Run the checks that apply, and attach screenshots in both themes for any visual change. 6. Add a line under `Unreleased` in [`CHANGELOG.md`](CHANGELOG.md). 7. Fill in the pull request template. CI must pass before a merge. ## Reporting a bug or asking for a figure Use the [issue forms](https://github.com/wheresryan22/anatomy/issues/new/choose). For a figure that came out wrong, include the prompt, the theme, where the figure lives (HTML, SVG or React), and a screenshot or close-up of the fault. ## LICENSE ``` ``` ## README.md

Anatomy

A Claude skill that explains an idea by building it as a real, working object.
Crafted, interactive isometric figures with many small precise parts, in SVG, WebGL and 3D.

Claude Code skill Agent Skills compatible MIT license Node 20.10 or later No dependencies CI

Website: skills.wheresryan.sh/anatomy   Download ZIP   Install with npx

Quick start · Gallery · What it makes · Install · Usage · Examples · How it works · Limits

An isometric drawing of a Raptor 2 rocket engine hanging in a test stand, firing: a red exhaust plume, drawn by a WebGL shader, pours onto the stand's base plate. The card reads Fig 1, Raptor 2 test stand, Pc 300 bar, 230 tf.

examples/raptor-engine, light theme, firing. The engine and stand are SVG; the plume is a WebGL shader in the same isometric camera.

--- Ask Claude for a figure that explains a technical idea, and Anatomy has it invent a physical thing whose working *is* the concept. A cache key that skips work when nothing changed becomes a pin-tumbler lock that only turns when every pin matches. One GPU context serving many canvases becomes a gantry plotter whose single print head visits 16 wells. Then Claude builds that thing out of dozens of small, solid, shaded parts, puts it in a framed card with a title, a hint and a live readout, makes it move calmly under the pointer and the keyboard, and checks its own work by zooming in on every joint. Every number the figure shows comes from the same small model that moves its parts. ## Quick start ```sh npx skills add wheresryan22/anatomy -g -a claude-code ``` Then, in Claude Code: ```text /anatomy explain how a token bucket rate limiter works, interactive ``` That's it. No API keys and nothing to `npm install`: the kit uses only Node's built-in modules. ## Gallery
The Raptor 2 engine taken apart in its test stand: its assemblies, pipes and harness hang apart from each other between the posts of the stand. A school ripple tank on four tall legs, with a lamp on an arm above it. Two dippers on a vibrating bar make interfering waves, and their caustics are projected onto the paper screen under the tank.
raptor-engine: hover to take it apart into 11 assemblies. An audit proves that no pipe passes through anything, at rest, apart and in every frame between. ripple-tank: SVG apparatus over two WebGL layers (lamp light and caustics on the paper, reflections in the water) driven by a dispersion and optics model.
A combination dial on a raised door plate. A small gold and chrome robot hand lies on the dial and turns with it; a green light glows under one fingertip. A dial indicator gauge on a stand above a base plate with a ruler strip. Its plunger rests on one of three gauge blocks on a sliding carriage.
turning-dial: the 3D mode (beta). About 90 parts are re-projected and re-shaded every frame as you drag the dial. dial-indicator: the smallest example, about 300 lines. Hover to slide the carriage; the needle reads each block.
Every screenshot is the light theme of a page in [`examples/`](examples), captured with the skill's own [`scripts/capture.mjs`](scripts/capture.mjs) and [`scripts/drive.mjs`](scripts/drive.mjs). The built pages are committed: open any `.html` in `examples/` to try it. ## What it makes Three kinds of figure. All three share one kit, one camera and one set of craft rules. | Kind | What it is | Example | |---|---|---| | **SVG** | The core. Solid isometric parts with four-tone shading, painted back to front, in a card with a live readout and eased motion. It ships as a standalone HTML page, a lone `.svg` file with its styles embedded, or React/Next.js components. | `dial-indicator`, `desk-computer`, `arcade-cabinet`, `test-rig` | | **SVG + WebGL** | For what lines can't draw: fire, exhaust, water, caustics, lamp light, glow, steam. The shader runs in a canvas between a back and a front SVG, in the figure's own isometric camera, so it sits inside the drawing. The SVG still reads without WebGL. | `raptor-engine`, `ripple-tank` | | **3D** beta | Parts that turn in true 3D: a dial or turntable that spins, fingers that flex, a piece that breaks off and falls. The moving parts are re-projected and re-shaded by the kit's own rules every frame; the rest of the figure stays static art. | `turning-dial` | Each figure is light or dark. Light is the theme the skill designs for first, shaders included. ## Install Anatomy is a standard [Agent Skill](https://code.claude.com/docs/en/skills): a folder with a `SKILL.md` at its root. This repository is that folder. Pick one way in: | | Command | Installs to | |---|---|---| | **skills CLI**, for you | `npx skills add wheresryan22/anatomy -g -a claude-code` | `~/.claude/skills/anatomy` | | **skills CLI**, for one project | `npx skills add wheresryan22/anatomy` | `.claude/skills/anatomy` | | **git**, for you | `git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy` | `~/.claude/skills/anatomy` | | **git**, for one project | `git clone https://github.com/wheresryan22/anatomy.git .claude/skills/anatomy` | `.claude/skills/anatomy` | | **Download**, no git | see below | `~/.claude/skills/anatomy` |
With the skills CLI
The [`skills`](https://github.com/vercel-labs/skills) CLI finds the `SKILL.md` at the root of this repository and installs it as `anatomy`. By default it installs into the current project and asks which agents to set up. `-g` installs it for your user, and `-a claude-code` sets up Claude Code only. The CLI copies the whole repository, examples included (about 10 MB). It needs a recent Node.js: version 1.7.1 of the CLI asks for 22.20 or later.
With git
Clone the repository into one of Claude Code's skill folders, so that `SKILL.md` ends up at `/anatomy/SKILL.md`. For a project install, commit `.claude/skills/anatomy` so your team gets it too. To update later, `git pull` inside that folder.
Download, without git
[Download the ZIP](https://github.com/wheresryan22/anatomy/archive/refs/heads/main.zip), unpack it, rename the folder from `anatomy-main` to `anatomy`, and move it into `~/.claude/skills/`. Or in one line on macOS or Linux: ```sh mkdir -p ~/.claude/skills/anatomy && curl -L https://github.com/wheresryan22/anatomy/archive/refs/heads/main.tar.gz | tar -xz --strip-components=1 -C ~/.claude/skills/anatomy ```
Claude Code picks up new skills in a running session. If the `skills` folder itself did not exist when the session started, run `/reload-skills`. ## Usage Type `/anatomy` and say what the figure should explain: ```text /anatomy explain how a token bucket rate limiter works, interactive ``` You don't have to name the skill. Claude also loads it when you ask for an isometric illustration, an explanatory figure for docs, a blog post or a landing page, or an interactive explainer.
More prompts, from the skill's evals
```text /anatomy a figure for our Next.js docs on database connection pooling: a pool of 10 connections, requests borrow one and give it back, and when all 10 are busy new requests wait in a queue. A React component plus a static HTML preview, dark theme. ``` ```text /anatomy an isometric SVG explaining how a CDN edge cache works, cache hit vs miss, TTL of 60 s, for a dark landing page. Just the SVG file and a PNG preview. ``` ```text /anatomy a Bunsen burner on a lab bench: opening the air collar turns the lazy yellow flame into a roaring blue cone. WebGL for the flame, one HTML file, dark theme. ``` ```text /anatomy a heat-exchanger espresso machine with the side panel off: boiler, heat-exchanger tube, group head, pump, steam wand and gauge. Show the water flowing when you pull a shot. Standalone HTML, light theme. ```
Three habits get the best figures: 1. **Name the idea, not the drawing.** Say what it should explain and give the real numbers (sizes, counts, rates, thresholds). Anatomy invents the object; that is most of the work, and it does it better than a description of boxes and arrows. 2. **Or name the object.** If you already know the machine you want (an espresso machine, a Bunsen burner, a lock), say so, and say what should move. 3. **Say where it will live.** A standalone HTML page, a lone SVG file, or a React/Next.js component; light or dark. The build differs for each. A figure arrives as source you own: a Node build script and the page it writes, or, for React, geometry modules, a server component for the static art and one client component for the motion. The kit comes with it. ## Examples Each framework-free example has a Node build script that writes standalone pages next to itself. Add `--light` for the light theme. | Example | What it shows | Build | |---|---|---| | [`dial-indicator`](examples/dial-indicator) | A dial gauge on a stand over a carriage of gauge blocks. The smallest example, about 300 lines. | `node examples/dial-indicator/build.mjs` | | [`desk-computer`](examples/desk-computer) | A 1984-style desk computer with a keyboard you can type on. The typed line appears on a CRT drawn in the plane of the case front, and switching it off collapses the picture to a line and a dot. About 85 solids. | `node examples/desk-computer/build.mjs` | | [`arcade-cabinet`](examples/arcade-cabinet) | An upright arcade cabinet with its side panel off. Drop a quarter: it rolls down the coin chute past the coin-switch wire into the cash box, a pulse runs along the cable to the board, and the CRT warms up into an attract mode drawn in the plane of the tilted monitor. About 240 solids and 15 cables. | `node examples/arcade-cabinet/build.mjs` | | [`raptor-engine`](examples/raptor-engine) | A Raptor 2 engine in a test stand. It comes apart into 11 assemblies, and a WebGL plume, shock, splash and steam render between the back and front SVG. The reference for dense pipework, smooth shading, fades and the audit. The build takes a few minutes. | `node examples/raptor-engine/build.mjs` | | [`ripple-tank`](examples/ripple-tank) | A school ripple tank on tall legs over a paper screen, seen from 44° up. Two WebGL layers are registered to the isometric planes and driven by a pure model in `model.mjs`. | `node examples/ripple-tank/build.mjs` | | [`test-rig`](examples/test-rig) | A production figure from a React/Next.js site: a glass button on a spring-mounted carriage, a finger probe on a rail, and a dial gauge reading the lean. 53 solids. No build script: copy it into a React app. | none | | [`spot-plate`](examples/spot-plate) | A second figure from the same site: six pairs of glass drops on a spot plate that run together into one piece of glass as a fan of feeler blades opens. Each pair is drawn from one distance field. No build script: copy it into a React app. | none | | [`turning-dial`](examples/turning-dial) | The 3D mode: a combination dial that turns in true 3D with a small robot hand on it, a three-hinge finger that lifts, and a pod that breaks off as a free body. `stress.mjs` is a 380-part hand in a cluttered workshop, used to measure performance. | `node examples/turning-dial/build.mjs` | `node examples/raptor-engine/build.mjs --audit`, `node examples/arcade-cabinet/build.mjs --audit` and `node examples/turning-dial/build.mjs --light --audit` also run the geometry audit. The 3D audit is slow; see [`references/3d.md`](references/3d.md). ## How it works - **[`SKILL.md`](SKILL.md)** is what Claude reads. It sets the workflow: collect the true numbers first, invent the object, write a parts list, plan the world, build the geometry once with the kit, paint back to front, frame it, make it live, and then verify it like a critic. It also holds the craft rules in short form. - **[`kit/`](kit)** is the drawing library the figures are built from: the isometric camera, solids and a parts library (`iso-kit`), round parts on any axis (`lathe.mjs`), pipes and cables (`tube.mjs`), the WebGL layer (`gl.mjs`), the 3D runtime (`turn*.mjs`), and React components (`react/`). Apart from React for those components, it has no dependencies. - **[`references/`](references)** are the long-form guides Claude opens when it needs them: craft, the kit API, motion, React, verification, WebGL, a design walkthrough and the 3D mode. - **Verification.** [`kit/audit.mjs`](kit/audit.mjs) proves the geometry: nothing passes through anything, every end sits on a mount, and every overlap is drawn in depth order (`node build.mjs --audit`). In headless Chrome, [`scripts/capture.mjs`](scripts/capture.mjs) and [`scripts/drive.mjs`](scripts/drive.mjs) take screenshots, close-ups and slowed-down contact sheets, [`scripts/lines.mjs`](scripts/lines.mjs) fails any line that ends in mid-air, and [`scripts/turn-check.mjs`](scripts/turn-check.mjs) checks 3D figures. The skill tells Claude to read every PNG it makes.
Repository layout
```text anatomy/ ├── SKILL.md the skill: workflow, setup and craft rules ├── kit/ the drawing library │ ├── iso-kit.ts the core: camera, solids, parts, SVG renderer, card and page, CSS │ ├── iso-kit.mjs the same core as plain ESM, for Node build scripts │ ├── iso.css the kit's CSS, both themes │ ├── react/ draw.tsx (server-safe components), live.tsx (client hooks) │ ├── lathe.mjs round parts on any axis │ ├── tube.mjs pipes, tubes and cables │ ├── audit.mjs the geometry audit │ ├── gl.mjs the WebGL layer for shaders inside the drawing │ ├── turn.mjs the 3D runtime (beta) │ ├── turn-build.mjs the 3D builder │ ├── turn-audit.mjs the 3D orbit audit │ └── turn-fixed.mjs, canvas-painter.mjs, gl-shared.mjs │ experimental variants, not yet documented or used by the examples ├── references/ long-form guides Claude reads as needed │ ├── craft.md kit.md motion.md react.md │ └── verify.md webgl.md walkthrough.md 3d.md ├── scripts/ headless Chrome checks and build helpers │ ├── capture.mjs screenshots and close-ups │ ├── drive.mjs scripted sessions and contact sheets │ ├── lines.mjs the line-end check (with line-ends.mjs) │ ├── inline-kit.mjs the kit as source, to inline into a standalone page │ ├── turn-check.mjs 3D checks in the browser (with turn-fidelity.mjs) │ └── turn-bench.mjs 3D timing in Node ├── examples/ eight complete figures, built pages committed ├── evals/evals.json test prompts and what a good answer contains └── .github/ issue forms, PR template, CI, README images ```
## Requirements | | Needed for | Notes | |---|---|---| | **[Claude Code](https://code.claude.com/docs/en/overview)** | everything | The skill is written for it. | | **Node.js 20.10+** | builds, kit, checks | Built-in modules only: nothing to `npm install`. The examples were rebuilt byte for byte on Node 20.19 and 22.11. On Node 20 the browser scripts restart themselves with `--experimental-websocket`. | | **Chrome or Chromium** | the checks | `capture.mjs`, `drive.mjs`, `lines.mjs` and `turn-check.mjs` look in the usual places on macOS, Linux and Windows and in Playwright's cache. Set `CHROME_PATH` for any other binary. They run it headless with WebGL on. | | **React 18+** | React output only | `kit/react/`, `examples/test-rig/` and `examples/spot-plate/`. | ## Limits - **It is not a chart library.** There are no axes, series or data plots. Numbers appear as a live readout driven by a model, and as the true sizes and counts of the parts. - **It draws machines, instruments, tools and furniture.** Not people or exact maps. An idea that has no mechanism to build will come out weaker. - **It is slow on purpose.** A figure takes a long session: the parts list, the geometry, the audit, and close-ups of every joint in both themes. The Raptor's build takes a few minutes, and a full 3D orbit audit takes 15 to 20 minutes for 30 parts. - **Shaders need WebGL.** Without it the SVG still reads, and under reduced motion every figure goes still. > [!NOTE] > **The 3D mode is beta.** It is proved on its example and one test figure, not yet on a production figure. A small 3D figure runs at 60 fps; the 380-part stress hand measured about 20 fps at 1440 px wide and 13 to 15 fps on a throttled phone profile, on a heavily loaded machine. ## Contributing Issues and pull requests are welcome. Read [CONTRIBUTING.md](CONTRIBUTING.md) first: it covers building the examples, the checks, and the house rules a change has to keep (among them, no comments in code, and kit changes that leave every existing example byte-identical). Please follow the [Code of Conduct](CODE_OF_CONDUCT.md), and report security problems as described in [SECURITY.md](SECURITY.md). - [Report a bug](https://github.com/wheresryan22/anatomy/issues/new?template=bug_report.yml) - [Request a figure](https://github.com/wheresryan22/anatomy/issues/new?template=figure_request.yml) - [Changelog](CHANGELOG.md) ## License [MIT](LICENSE) © 2026 Ryan · [@wheresryan22](https://x.com/wheresryan22)

If Anatomy drew something useful for you, a ⭐ helps other people find it.

## SECURITY.md # Security ## What is in scope Anatomy is a set of instructions, a drawing kit and local Node scripts. The scripts that start Chrome (`capture.mjs`, `drive.mjs`, `lines.mjs`, `turn-check.mjs`) run it headless with a throwaway profile and `--allow-file-access-from-files`, and `drive.mjs` runs JavaScript you pass it in the page. Point them only at pages you trust. A security problem is anything in this repository that could let a page, a prompt or a file run code, read files or reach the network in a way the user did not ask for: in the kit, in the scripts, in the built example pages, or in instructions in `SKILL.md` and `references/` that would lead Claude to do something unsafe. ## Supported versions Only the latest commit on `main` is supported. ## Reporting a vulnerability Please don't open a public issue for a security problem. Report it privately through GitHub's [private vulnerability reporting](https://github.com/wheresryan22/anatomy/security/advisories/new) for this repository. If that link does not work, send a direct message to [@wheresryan22](https://x.com/wheresryan22) on X asking for a private channel, without the details. Include what you found, how to reproduce it, and what it could let someone do. ## SKILL.md --- name: anatomy description: Build crafted, highly detailed, interactive isometric SVG figures that explain a technical idea as a real physical object (a test rig, a dial gauge, a cabinet of drawers, a plotter, a lock), with many small precise solid parts, four-tone shading, correct painter's order, a framed card with title, hint and live readout, and calm eased motion. Use this whenever someone wants an isometric illustration, an explanatory diagram or figure for docs, a blog post, a landing page or an article, a "Linear-style" or "premium" technical drawing, an interactive explainer, or an SVG that shows how a system, algorithm or component works, even if they never say "isometric". Works framework-free (TypeScript/JS that writes SVG and HTML) and in React/Next.js, and can add realistic WebGL shaders (fire, exhaust, water, caustics, lamp light) that live inside the drawing in the same isometric perspective. --- # Anatomy This skill makes figures like a small instrument on a bench: a heavy base on feet, rails with tick rulers, a carriage on bushings, knurled knobs, coil springs, a dial gauge whose needle moves, screws as tiny dots. The reader understands the idea because they recognise the machine. Every number the figure shows comes from the same model that moves its parts. Eight complete examples ship with the skill. Open the closest one before you start. Each framework-free example is built with `node examples//build.mjs`, which writes a standalone HTML page next to the script; add `--light` for the light theme. - `examples/dial-indicator/` is the smallest: a dial gauge on a stand, about 300 lines in all. - `examples/desk-computer/` is framework-free SVG: a desk computer with a keyboard you can type on. The typed line appears on a CRT screen drawn in the plane of the case front, and the picture collapses to a line and a dot when you switch it off. It has about 85 solids and 850 paths. - `examples/arcade-cabinet/` is an upright arcade cabinet with its side panel off, a Hero of about 240 solids and 15 cables. A quarter flies into the slot, rolls down the coin chute at the speed a rolling disc reaches on a 30° slope, trips the coin-switch wire and drops into the cash box; the switch's pulse runs chunk by chunk along its cable to the board, and the CRT warms up, self-tests and runs an attract mode drawn in the plane of the tilted monitor. The stick tilts and closes a microswitch under the panel. It shows how to place a camera so a cutaway's mechanism stays in view, a concave board drawn as a prism along any axis, moving parts rebuilt in the page from the same module the build uses, and live coins and a wire drawn in reserved slots of the settled order. `node build.mjs --audit` proves the geometry. - `examples/raptor-engine/` is a rocket engine hanging in a test stand. Its round parts come from `kit/lathe.mjs` and its pipes and harness from `kit/tube.mjs`. It comes apart into 11 assemblies with staggered springs and per-frame depth re-sorting. Every part records its true shape, and `node build.mjs --audit` (`kit/audit.mjs`) proves, at rest, apart and in every replayed frame of the explode, that nothing passes through anything, that every end sits on a real mount, that no bend pinches, folds or lands on another line, that no curved profile's slope wobbles, and that every overlap is drawn in depth order. A WebGL plume, shock, splash and steam render between the back and front SVG. It is the reference for dense pipework, smooth shading and fades. - `examples/ripple-tank/` is a school ripple tank on tall legs over a paper screen, seen from 44° up. Two WebGL layers (lamp light, shadows and caustics on the paper, and the water's reflections and glass) are registered to the isometric planes and driven by a pure dispersion and optics model (`model.mjs`); a frequency change travels out from the dippers through a history texture. - `examples/test-rig/` is a production figure from a real site (React/Next): a glass button on a spring-mounted carriage, a finger probe on a rail that presses and pulls, and a dial gauge reading the lean. It has 53 solids and about 470 paths. - `examples/spot-plate/` is a second production figure from the same site: six pairs of glass drops on a spot plate, each pair drawn from one distance field, so a pair closer than `merge` runs together into one piece of glass. A fan of feeler blades sets `merge`, one blade per gap. It is the reference for shapes that morph into each other and for one control driving many parts. - `examples/turning-dial/` is the optional 3D mode: a combination dial that turns in true 3D with a small robot hand on it. It has about 90 live parts in metal materials, a second turn group, a hinge, a three-hinge finger that lifts and a pod that breaks off as a free body. A WebGL LED, its light pool and sparks follow the moving parts. `stress.mjs` beside it is a dense hand of about 380 parts in a cluttered workshop, used to measure performance. The test rig is the quality bar for the drawing itself. The Raptor is the bar for shader work: a WebGL effect has to reach its standard of world-space, no-pop, seamless rendering. ## The one idea that matters **The object is the explanation.** Don't draw boxes, arrows and labels. Invent a real, well-made physical thing whose working *is* the concept. Here is how earlier figures mapped: | Concept | Object | |---|---| | One shared GPU context serving many canvases | A gantry plotter: one print head visiting 16 wells | | A cache key that skips work when nothing changed | A pin-tumbler lock: when every pin matches, the plug turns and nothing is redrawn | | Seven render targets with different bytes per texel | A chest of seven drawers, each as deep as its bytes | | A separable blur (49 × 49 taps vs 49 + 49) | A bed-of-nails stamp beside two combs on rails | | A spring that presses and leans | A test rig with springs, a probe and a dial gauge | | A height profile | A profile (contour) gauge pressed against the edge | | Light that depends on facing | A small photo studio: key and fill lamps around a turntable | Two ways this fails, both seen in practice: - **Too abstract.** Stacked plates, floating slabs or labelled boxes don't read as anything. - **Too flat and bland.** One big slab with a few lines on it has no volume, no parts and nothing to discover. The fix for both is the same: a recognisable machine, built from many small, precise, purposeful parts. **Every creation is highly detailed.** This holds for every figure, however small the idea or the request: a quick explainer is still a dense, real machine, never a few slabs. What scales with the size (workflow step 1) is how far you push it: a Figure gets the 4× sweep over its subject and mechanism, a Hero or an Epic over the whole drawing. - **Read the real thing.** Build it the way the real object is built: every screw, seam, bevel, bushing, label plate, cable with its connector, scale with its ticks, and the parts that hold the parts. - **Two looks.** At 1× it reads as one clear machine. At 4× every region still has something true to find; a bare face or an empty corner is unfinished work, not calm. - **Purposeful, never noise.** Detail comes from parts that belong to the mechanism. Each one sits on another part, ends on an edge, and fades rather than stops. - **Check it last.** Before you finish, zoom to 4× (over the subject and mechanism for a Figure, the whole drawing for a Hero or an Epic) and add the real parts that are missing wherever a region is plain. ## Workflow Work in this order. Write the concept and the parts list before any geometry. Most of the quality is decided there. 1. **Size it before you start.** Tell the user which size the request is and roughly how long it will take, before any other work. - **Figure**: one mechanism, 40–80 parts, SVG with at most one WebGL layer. About 30–90 minutes. Build it without asking. - **Hero**: a dense object, several WebGL layers or one 3D subject, 80–150 parts. About 2–4 hours. Say so, then build it unless the user asked for something quick. - **Epic**: a whole vehicle, building or plant with many moving systems, or the 3D mode on more than one subject. 6 hours or more. Do not start it. Give the estimate, propose a Hero version that keeps the core of the idea, and list what the full version would add. Build the Epic only when the user chooses it. - Whatever the size, have a working page that opens in the browser within the first hour, and deepen it from there. Run `date` at the start and at each step, and when a step runs past twice its share of the estimate, tell the user where it stands and what is left. 2. **Truth first.** Collect the real numbers and behaviour of the thing being explained: sizes, counts, thresholds, curves. The readout, motion and caption must all be true. If you can, write the model as a small pure module, like `rig.ts` in the test-rig example, and drive everything from it. 3. **Invent the object.** Pick a machine, tool, instrument or piece of furniture whose mechanism maps one-to-one onto the concept. Say in one sentence what moves and what that motion means. Never copy a reference image: take its finish, not its object. 4. **Parts list.** Write at least 40 parts (40–80 for a Figure, 80–150 for a Hero, more for an Epic), grouped: base (plate, feet, groove, corner screws, label plate, ruler strip), structure (posts, rails, frame bars, end stops), mechanism (carriage, bushings, springs, plunger, needle), controls (knurled knob, thumb screw, crown) and the subject itself, which is the one lit part. Each part sits on another part. `references/craft.md` has a vocabulary of parts with recipes. 5. **Plan the world.** Use world units of about 1 px of the real thing: x and y on the floor, z up. Lay out plans as rounded rectangles `{x, y, w, d, r}` and circles. Choose the camera: azimuth 45° by default, 35–60° to show the long side, elevation 30° (higher, like the ripple tank's 44°, to look into something open). Then fit with `fitProjection(points, width, height, { pad, azimuth })`. 6. **Build geometry once.** Precompute every static path in a geometry module with the kit: `slabOf`, `cylinder`, `extrude`, `planOutline`, `topTicks`, `knurl`, `coil`, `radialTicks` and so on. Round parts on any axis (bells, flanges, valves, actuators) come from `kit/lathe.mjs`, and pipes and cables from `kit/tube.mjs`. Moving parts are built once at a rest position and moved with `translateAlong`. Only parts whose shape changes are rebuilt per frame. 7. **Paint back to front, bottom to top.** Sort repeated parts with `depthOf`. Split anything that wraps another part into a back half and a front half: the springs around a rod, the bars of a frame around a carriage. A moving part is drawn in the slot where it physically sits. See "Painter's order" in `references/craft.md`. Once a figure has pipes, cables and round parts, stop tuning keys by eye: record each item's shape as you put it into `A.recorder(P, { order, spring })`, let `A.settle(R, P)` measure true depth wherever two items overlap and set the keys, and end the build with `A.auditOrExit(R, P)`. Route pipes before you draw them: real ports at both ends, legs along the structure, crossings on straights, collars gapping the pipe (`references/craft.md`, section 8). Record the true shape of what you draw: a stand-in shape that silences the audit is a bug, and the audit fails one. A rod that slides out of a gland is one rod from `G.rodOut`, recorded with `A.slide`. 8. **Frame it.** Put the figure in a card: `Fig n` at top left, a short title at top right, the interaction hint at bottom left and the live readout at bottom right. Legend keys and a true caption go under the card, and words stay out of the drawing apart from at most one tiny engraved label. 9. **Make it live.** Use calm time-based motion: exponential follow or real springs. An idle tour loops when nobody touches it. The figure responds to pointer and keyboard, stops when offscreen, and goes still under reduced motion. Write attributes on refs and don't re-render per frame. See `references/motion.md`. 10. **Verify like a critic.** The owner finds faults by zooming in, so you zoom in first. Read every PNG you make. - Capture desktop, phone (390 wide), hover and several moments of motion with `scripts/capture.mjs`; use `scripts/drive.mjs` for sequences, the apart pose and the `--no-webgl` fallback. - **Run the audit to zero.** With pipes, cables or round parts, `node build.mjs --audit` must end `audit passed`, every failing line at 0: clearance at rest, apart and in mid-flight, terminals, loose ends, folds, self-overlap, crowding (against slender solids too), stand-in shapes, support, wobble, saddles and depth order. Fix an interlock in the geometry, never with a key bias. - **Run the line check to zero.** The audit never sees line markup. `node scripts/lines.mjs page.html --out shots/lines.png` (and on the `-light` page, and in every resting pose with `drive.mjs`'s `["lines"]` action) must print `line ends: 0`: every seam, rule, rib, tick and pointer ends on a stroke, a dot or an outline. Read the ringed PNG. - **4× close-ups of every junction in both themes** (build `--light` too), assembled and apart: every flange, tee, elbow, clamp, valve, bellows, band, saddle, ball joint and crossing, every curved body (no tone staircase), every place a texture ends (on an edge or fading), flat box faces with their seams, every textured hose at a chunk joint, every sliding rod at rest and at full stroke, and every window with text or shader content in it. - **Shaders:** a contact sheet slowed with `["slow", 0.05]` across every transition; nothing pops, no colour switch, edges read 0. In light, also log ink per frame through each transition (it must follow the light monotonically) and crop where the ink meets strokes at 8–16× (`references/verify.md`, "Light-theme shaders"). - Put your PNG next to the examples and ask: is it instantly a real object, rich in small parts with volume, with every line ending on something? Is it highly detailed at 1× and still rewarding at 4×, with no bare face or empty corner? Iterate until yes. Checklist: `references/verify.md`. ## Setup The kit is in `kit/`: | File | Use it for | |---|---| | `kit/iso-kit.ts` | The whole core in one file: camera, solids, a parts library, an SVG string renderer, card and page builders, and the CSS (`ISO_CSS`). Copy it into a TypeScript project. | | `kit/iso-kit.mjs` | The same core compiled to plain ESM, for Node scripts. Import it directly. | | `kit/iso.css` | `ISO_CSS` written out. Import it once and put `class="iso"` (plus `data-theme="light"` for light) on a wrapper or ``. | | `kit/react/draw.tsx` | Server-safe React components: `Solid`, `Line`, `Wire`, `Dots`, `FaceText`, `IsoFigure`, `Plate`. | | `kit/react/live.tsx` | `"use client"` hooks: `useReadout`, `useLoop`, `useEased`, `useInView`, `useStillness`, plus `spring` and `follow`. | | `kit/lathe.mjs` | Round parts along any axis: `frameAlong`, `lathe` (smooth shading switches on by itself for any profile with a smooth knot), `solidOf`, `disc`, `ringBand`, `sphereOf`, `saddleOf`, `bandsOf` (one curved body cut into depth-sortable bands that share one surface, with one outline from `sidesOf`), visible arcs, ribs and bolt circles on round surfaces (`ribsOf` and `dotsOf` take `fade`, `ribsOf` takes `seams`), `rodOut` for a rod that slides out of a gland, and `fillet` for pipe routes. | | `kit/tube.mjs` | `tubePieces` splits a 3D pipe or cable into depth-sortable chunks (with `breaks`, `gaps` under collars and clamps, elliptical end caps, and `rings` for a braid, corrugation or wrap that follows the cross-section through every joint), and `tubeSvg` draws one; `crossingsOf` finds where a route passes through a clamp, `runsOf` the drawn runs. Its `.tb-*` fills are in `ISO_CSS`. | | `kit/audit.mjs` | Proves the geometry. `recorder(P, { order, spring })` collects items, shapes (turned bodies, slabs, prisms, boxes, balls, tubes, pads cut by their host) and routes as the helpers draw them; `settle(R, P)` ray-casts every overlapping pair for true depth, at rest, apart and in the replayed explode, and sets the painter's keys (`overlapsOf`, `orderKeys`); `auditOrExit(R, P)` is the `--audit` hook that runs every check (`clearances`, `solidClearances`, `terminals`, `looseEnds`, `supports`, `folds`, `selfOverlaps`, `crowding` with slender solids as lines, `coverage` for stand-in shapes, `wobble`, `seats`, `depthOrder`) and exits non-zero on any problem. `A.slide` records a rod that slides out of a gland. `references/kit.md`, section 12. | | `kit/gl.mjs` | The WebGL layer for shaders inside the drawing: `GLSL_ISO` (the camera in GLSL, including `rayOf` and `pixelOf`), `glCamera(P)`, `glLayer(...)`, and the JS envelopes `smooth`, `burst` and `settle`. For 3D figures, `GLSL_TURN` and `glslPose(name)` bring world points into a moving group and mask a front canvas with `coverOf`. | | `kit/turn.mjs`, `kit/turn-build.mjs`, `kit/turn-audit.mjs` | The optional 3D mode. `turn-build.mjs` has `turning(P, { recorder })`: groups (turn, slide, hinge, free), live layers, convex parts with materials, and `T.build`. `turn.mjs` is the runtime: `TURN.mount`, the controller, `TURN.cover`, `TURN.poseUniforms` and `TURN_CSS`. `turn-audit.mjs` has `orbitOrExit`, the orbit audit over every turn angle and motion clip. `references/3d.md`. | | `scripts/capture.mjs` | Headless Chrome screenshots, close-ups and console checks, with WebGL on. Run with `node`. | | `scripts/drive.mjs` | Scripted headless Chrome with WebGL: move, click, key, slow motion, wait-until, eval, shots and contact sheets that catch pops; `--no-webgl` and `--preload`. | | `scripts/lines.mjs` | The line-end check on a built page, in headless Chrome: every texture line must end on a stroke, a dot or an outline. Rings the failures with `--out`; exits 1 on any. | | `scripts/inline-kit.mjs` | `kitScript()`, `glScript()` and `turnScript()` return the kit, the WebGL layer and the 3D runtime as source to inline into a standalone page. | | `scripts/turn-check.mjs`, `scripts/turn-bench.mjs` | 3D figures: fidelity against the kit builders, a z-buffer order check, pixel pops, line ends at 24 angles and frame timing in the browser; Node CPU time per part kind. | Pick the path that fits the project: - **Standalone HTML, a static SVG, a blog post or any non-React site.** Write a Node build script like `examples/dial-indicator/build.mjs`. It imports `kit/iso-kit.mjs`, assembles strings with `solidSvg`, `lineSvg`, `dotsSvg`, `wireSvg` and `faceTextSvg`, wraps them with `figureSvg` and `plateHtml`, and writes the page with `pageHtml({ script: kitScript() + live })`, or `kitScript() + glScript() + live` when it has a shader. For a lone `.svg` file use `figureSvg({ standalone: "dark" | "light" })`, which embeds the styles. - **React or Next.js.** Copy `kit/` into the project (for example `components/iso/`). Keep geometry in plain `.ts` modules, build the static art in a server component with the `draw.tsx` components, and pass it as element props to one `"use client"` live component that moves things. `references/react.md` explains the split and a trap with large pages. ## Craft rules (short form) These are the rules that separate a crafted figure from a diagram. `references/craft.md` gives the full reasoning and recipes. - **Solids, not wireframes.** Every part is filled in paper colour and painted in order, so things in front hide things behind. No see-through edges and no dashed hidden lines. - **Let the kit shade.** `extrude` returns four side tones by facing plus a lighter top. Keep it for anything with height, and use `flat` only for floors and inlays thinner than 1 unit. - **Tone hierarchy.** Base and feet are `lo`, structure is `mid` and the subject is `hi`. Exactly one accent is `lit` (white in dark, black in light): the part the reader should watch. Grooves are `faint`, minor ticks `lo`, major ticks `mid` and the zero mark `hi`. Use colour only when colour is the subject, such as red, green and blue channels. - **Small precise detail, never noise.** Use bevels of 0.4–1.6, grooves inset 3–5 from an edge, screws as 0.4–0.55 dots with a ring at the corners of plates, knurls on knobs, ruler ticks every 4–5 units with a major every 5th, and a label plate with three rule lines. Each detail belongs to a part. - **Lines resolve.** Every line ends on something: a face, another line or a terminal dot. Connectors are `Wire`s whose terminal dots land on objects. There are no leader lines, balloons, dimension arrows or labels floating in the air. - **No pipe or cable passes through anything.** Not through another pipe, cable or solid, at rest, apart or in any frame of the explode. Keep about 1.5 radii of clearance to everything but a line's own connection, run lines beside the structure rather than across the subject's face, and gap a pipe wherever a flange, band, bellows, clamp or valve wraps it. Parts meet flush, tangent or rim-on-surface, never sunk in: a flange's back face lands on its port (on a saddle pad, `G.saddleOf`, when the port is curved), a branch leaves from a ball tee, and every end, apart too, finishes on a flange, coupling, connector shell or terminal dot. - **Every crossing is drawn in true depth order.** Where two items overlap on screen, the nearer is drawn on top, proved by `A.settle` and the audit, not tuned by eye. Lines cross on straights, well apart in depth: a bend, end or clamp that lands on another line's outline reads as a joint (a rod, tie rod, post or rail counts as a line: a pipe's last leg never runs along one on screen), a leg that points at the viewer and then turns pinches to a V (leave such a port through an elbow ball), and a route never doubles back on screen. A pair that can't be ordered interlocks, and the fix is a cut or a tangent contact, never a bias. - **Curved surfaces shade smoothly, never in a staircase.** Mark curved knots smooth (`[s, r, 1]`) and `lathe` shades them from one monotone curve that also draws the outline; give any curved body larger than a fitting an analytic profile with `smooth: { slope }`, cut long bodies with `G.bandsOf`, and use `G.sphereOf` for balls. Tone bands taper to nothing instead of ending on a straight cut, and seams go under the outline (`inner`). - **A texture ends on a real edge or fades.** Ribs, bolt circles, rule lines, seams and grooves never stop in the middle of a surface, flat or curved: `ribsOf` and `dotsOf` take `fade` (draw faded ribs with `fadedSvg`), a rib row ends on its seams (`ribsOf(…, { seams: true })`), a seam or weld on a box wraps its corners (`k.sideSeam`, as the slab's `inner`), a line on one face runs edge to edge, vents are closed slots, ticks hang from a ruler strip's edge, a single line that must stop ramps out with `fadeLineSvg`, and a row whose features face up (holes on top of a ring) is seen all round (`all: true`). A texture on a pipe (braid, corrugation, wrap) follows its cross-section and runs through every chunk joint: `tubePieces(…, { rings })`, never a dashed stroke down the centreline. A pipe's shine and shade run onto its end caps and through every chunk joint. Only rule lines that stand for printed text, a needle's tail and a pointer's tip may stop on a bare face, marked `free`. - **Shaders never pop or cut off.** Every uniform rides an envelope with an attack and a decay, phase changes are crossfades driven by the physical quantity, every term reaches zero before any bound or canvas edge, and the effect lives in world space in the figure's own camera (see below). - **Things on faces fit them.** Text a machine displays fits its window at its widest string and is clipped to it; content seen through an opening is clipped by the opening as well as by its own plane, with the recess walls drawn. - **Volume.** Give things real thickness, make them stand on other things, and put a soft halo under the base and under anything lifted. - **Composition.** Centre the figure and let it fill about 55–65% of the card. Keep a consistent scale across a set of figures, and make sure it still reads at 390 px wide. ## WebGL inside the drawing Use a shader only for what lines can't draw: fire and exhaust, water and caustics, real lamp light, glow, steam. The parts stay SVG. The core rules come from the first shader figure, whose colour change between phases looked cut rather than crossfaded: - **Three layers.** A back SVG holds what the effect covers, the canvas holds the effect (`pointer-events: none`), and a front SVG holds what covers it. Split a part, or the effect, when it is on both sides. - **World space, same camera.** Build every shader point from `onFloor`, `onWallX` and `onWallY`, or march the pixel's ray `rayOf(vb) + t·towardViewer()`. Size everything in world units times `uK`. Anything lying on a plane registers exactly with that plane's SVG lines. - **Nothing pops.** Every uniform follows an envelope with an attack and a decay (the kit's `burst` for events, `settle` for levels). Phase changes are crossfades where colour shifts continuously with the physical quantity, and a fade-out only gets darker. - **No hard cut-offs.** Every term reaches zero before any `if`, bound or canvas edge, and before any cell edge of a cell noise. - **Seen through an opening, masked twice.** Content behind a window or a recess is masked in its own plane and by the opening in the face plane, multiplied (`references/webgl.md`, section 5). - **Blending.** Use `tonemap()` and dither. In dark, a canvas that only adds light uses premultiplied output with `mix-blend-mode: screen`, and one that must also darken (the ripple tank's water) stays normal-blended. - **Light theme ships, and its shaders are designed for paper.** Use normal premultiplied alpha, never screen. Write the colour the paper should show and solve for the ink. A glow is a saturated body with a pale core, a coloured rim and an alpha floor, never a darkened dark-theme colour: that gave the Raptor's "red ink smoke". - What the light falls on takes a tint, and the cavity that holds it gets a darker physical ground (soot, refractory, water depth). - Hot bodies follow one blackbody ink table shared with the fallback. - Ink only grows with light: fade the finished ink once, never one term at a time. - Ink ends at each stroke's inner edge. - Measure ink per frame. `references/webgl.md`, section 8, has the recipes and the faults reviewers found. - **Restraint.** Cap the device ratio at 1.5 and render only while the effect is active and onscreen. Reduced motion gets one still frame, and the SVG must still read without WebGL. Read `references/webgl.md` before writing any shader. ## 3D: figures that turn (beta) 3D is an option like WebGL. Use it when a part moving in depth is the idea: a dial or turntable that turns, fingers that flex, a piece that breaks off and falls. The rest of the figure stays static kit art. It is in beta: the engine is proved on its example and one test figure, not yet on a production figure. Turn one subject at a time and keep the clutter around it static. A small figure runs at 60 fps; a dense 380-part flexing hand measured about 20 fps at 1440 and 13–15 fps on a phone profile (390 px, 4× CPU throttle) on a heavily loaded machine. - **Live parts are the kit's own picture.** Each frame, convex kit primitives (prisms, rounds, domes, balls with flats, lathes, tubes) are re-projected and re-shaded by the kit's rules. A turn by θ is the kit drawing at azimuth `a − θ`. - **Order comes from separating planes.** Same-group pairs get a plane fixed in the group, pairs on different links get one fixed in their common frame, and the rest are solved each frame. The audit proves there are no cycles at any angle or in any clip frame. - **Contacts are flush, tangent or rim-on-flat.** Joints are coaxial knuckle discs on the child group that touch the parent's link, or the audit calls the whole child group loose. No live line spans two moving groups: a cable crosses a joint through a clip on each side, or reaches the turntable through a slip ring at the hub. - **Live tubes bend in near-horizontal planes or inside fittings, and never point along the view.** A bend needs R ≥ 2r / sin²(e − θmax), where θmax includes the pitch range of every hinge it rides: 8r is the bound when flat, and on a ±12° hinge it is 21r. Each route runs from mount surface to mount surface, with its ports in `gaps`. That holds at every angle and in every pose. - **Materials remap the ramp.** Gold, chrome, steel, gunmetal, rubber, brass and copper each have a light and a dark set; tones still come from facing. - **Free groups break off without a jump.** Coaxial parts are fixed pictures with turning textures. - **Shaders follow the motion.** Anchor them to a group with `controller.anchor` or `toGroup`, occlude a front canvas with `coverOf`, and keep world effects (smoke, falling sparks, oil on the bench) out of group space. - **Verify with `--audit`** (`turn audit passed`) and `scripts/turn-check.mjs` (`--fidelity`, `--order`, `--pops`, `--lines`, `--perf`). Iterate with `--quick --only=…`. Only a full run proves the figure, and it takes 15–20 minutes for 30 parts, so run it in the background. Read `references/3d.md` first. ## References Read these as you need them: - `references/craft.md`: the look in depth, including the parts vocabulary with code, tone tables, painter's order patterns, round parts, pipes and harnesses, exploded views, screens on faces, and the anti-patterns that got figures rejected. Read it before designing. - `references/kit.md`: the API, with signatures and examples. - `references/motion.md`: live behaviour (loops, springs, tours, pointer, keyboard, accessibility, reduced motion), plus envelopes for one-shot events, exploded views, depth re-sorting and arming, in vanilla JS and React. - `references/react.md`: the React/Next.js server/client split, element props and the large-payload key-warning trap. - `references/verify.md`: the `capture.mjs` and `drive.mjs` commands, the review checklist (including shaders) and common faults. - `references/webgl.md`: shaders inside the drawing: when one earns its place, the layer stack, the camera contract, ray-marching in the iso camera, the full API with a minimal page, the craft rules with the bugs that taught them, the light theme (inks on paper, per-phenomenon recipes, the reviewers' faults), and how to verify them. - `references/walkthrough.md`: how the test rig was designed, step by step, from concept to code. - `references/3d.md`: the optional 3D mode: groups and poses, live layers, convex parts and their rules, materials, free groups, hinge chains, painter's order, static clutter around a turntable, shaders that follow the turn, the orbit audit, browser checks, performance and limits. ## evals ``` ``` ## evals/evals.json ```json { "skill_name": "anatomy", "evals": [ { "id": 1, "prompt": "I'm writing a blog post about how a token-bucket rate limiter works. Can you make me one interactive isometric illustration for it, the polished kind (like Linear's site), as a single HTML file I can just open? My blog has a white background. The bucket holds 20 tokens, refills 5 per second, and each request takes one token; requests get rejected when it's empty.", "expected_output": "A single standalone HTML file, light theme, with one framed isometric figure of a real physical object that explains a token bucket (tokens refilling, requests taking tokens, rejection when empty), live readout with true numbers, calm eased motion, keyboard/pointer interaction. Every curved part (a hopper, a drum, a funnel) is smooth-shaded with no stepped tone blocks, every row of ticks, ribs or bolt dots ends on a real edge or fades out instead of stopping mid-surface, and nothing passes through anything; any pipe or chute is recorded and `node build.mjs --audit` ends `audit passed` with zero on every failing line. It was checked with 4x close-ups of every joint, and every PNG was looked at.", "files": [] }, { "id": 2, "prompt": "We need a figure for our Next.js docs explaining database connection pooling: a pool of 10 connections, requests borrow a connection and give it back, and when all 10 are busy new requests wait in a queue. Build it as a React component (TSX) we can drop into the app, and also give me a static HTML preview so I can look at it right now. Dark theme. It should look like a crafted physical object with fine details, not a boxes-and-arrows diagram.", "expected_output": "A React TSX component (plus any geometry/CSS files) and a standalone HTML preview, dark theme, showing connection pooling as a real object with many small parts, live readout, painter's order correct, motion/interaction. Lines, hoses or cables that represent connections run along the structure in lanes and land on real ports, never through another part or across the subject's face; where two cross on screen the nearer is drawn on top. If the figure has tubes or round parts, their shapes are recorded with kit/audit.mjs and the preview's build reports zero audit problems. Curved parts show no tone staircase and no texture stops abruptly. 4x close-ups of the junctions were taken and read.", "files": [] }, { "id": 3, "prompt": "make an isometric svg explaining how a CDN edge cache works (cache hit vs miss, TTL of 60s) for our landing page. dark, premium, lots of small detail. just give me the svg file, and a png preview if you can", "expected_output": "A standalone dark SVG file (styles embedded) of a crafted isometric object explaining a CDN edge cache (hit vs miss, TTL 60 s), rich in small parts, monochrome with one accent, no floating labels. No line passes through a part, every crossing is in depth order, curved surfaces are smooth-shaded without a staircase, and every texture (vents, ticks, bolt circles) ends on an edge or fades. A PNG preview plus 4x close-ups were made and looked at.", "files": [] }, { "id": 4, "prompt": "For a chemistry explainer, make an interactive isometric figure of a Bunsen burner on a lab bench, showing how opening the air collar turns the lazy yellow flame into a roaring blue cone. I want the flame to look real, so use a WebGL shader for it, but keep the crafted line-drawing look for the burner itself. One HTML file I can open, dark theme.", "expected_output": "A single standalone dark HTML page built with the kit. The burner is SVG with many small parts made with kit/lathe.mjs: a weighted base, a barrel, a rotating air collar with real air holes, a jet and a ribbed gas inlet with a hose from kit/tube.mjs, on a bench plate, with an optional tripod and gauze. Every curved profile (base dome, barrel flare, inlet) is smooth-shaded with no tone staircase, from smooth knots or an analytic profile with smooth.slope; the inlet ribs and any bolt circle fade toward the limb (ribsOf/dotsOf with fade) instead of stopping. The hose leaves the inlet along its axis, lies on the bench without passing through the base, tripod or bench, and is gapped under any clamp or band; all shapes are recorded with kit/audit.mjs and `node build.mjs --audit` ends `audit passed`, zero on every failing line. The flame is a WebGL shader on glLayer (glScript inlined), in a canvas between a back SVG (bench, base, everything the flame covers) and a front SVG (whatever passes in front of it, such as the near tripod leg or gauze). The canvas has pointer-events none and blends with screen and premultiplied output. The flame lives in world space: it is ray-marched along towardViewer() around the barrel axis, sized in world units, and its base registers with the barrel rim from the same numbers as the SVG. Its colour and shape follow the air-to-gas ratio from a small model continuously (a luminous yellow sooty flame turning into a blue inner cone and pale outer mantle) through eased envelopes, with no instant colour switch. Lighting and turning off are attack-and-decay envelopes built on the kit's burst and settle (inlined by glScript, not redeclared), with constant geometry passed through glLayer's fixed uniforms. No term is cut at a bound or at the canvas edge, and the output is tonemapped and dithered. The device ratio is capped at 1.5, the shader renders only while lit and onscreen, reduced motion shows one still flame, and the SVG reads without WebGL. The live readout (collar opening, air/gas ratio, flame temperature) comes from the model, with pointer and keyboard control and an idle tour. The figure was checked with drive.mjs contact sheets slowed with [\"slow\", 0.05] across lighting, a full collar sweep and turning off, plus 2x and 4x crops at the barrel rim and 4x close-ups of the hose, inlet and collar in both themes, a --no-webgl run showing the SVG burner alone, and a --reduced run.", "files": [] }, { "id": 5, "prompt": "For an article on how espresso machines work, make an interactive isometric figure of a heat-exchanger espresso machine with the side panel off: boiler, heat-exchanger tube, group head, pump, steam wand, pressure gauge and all the pipework between them. Show water flowing through when you pull a shot. Lots of fine detail, it should hold up when people zoom in. Standalone HTML, light theme.", "expected_output": "A single standalone light HTML page built with the kit: a real espresso machine with its side panel off, its boiler, group head, gauge and fittings turned with kit/lathe.mjs and its pipework from kit/tube.mjs, with a live readout from a small model (boiler pressure, brew temperature, flow) and a calm pull-a-shot interaction. Every pipe is routed from real ports along the structure (leaving each port on its normal, running parallel to the boiler or round it at a fixed radius, crossing other lines only on straights and well apart in depth), never across the front of the boiler or group; it ends on a flange, union nut or fitting on a real port, never in the air. Nothing is sunk into anything: flanges sit flush or on saddle pads on the curved boiler, branches leave from ball tees, valves sit on straight runs, and every collar, clamp, band or valve gaps the pipe it wraps. Every item records its shape in A.recorder, A.settle sets the painter's keys, and `node build.mjs --audit` ends `audit passed`, zero on every failing line, with no interlock hidden by a key bias. The boiler, group head dome and gauge are smooth-shaded with no tone staircase or scalloped bands (analytic profiles with smooth.slope or bandsOf for the boiler), seams sit under the outline, and every bolt circle, rib row or rule line ends on a real edge or fades out (dotsOf/ribsOf with fade, fadeLineSvg). Pipe stripes run onto their end caps with no hairline at chunk joints. The response shows that 4x close-ups of every junction (each tee, flange, union, valve, clamp and crossing) and every curved body were taken in both themes and read, and that the water-flow motion has no pop.", "files": [] } ] } ``` ## examples ``` ``` ## examples/arcade-cabinet ``` ``` ## examples/arcade-cabinet/arcade-cabinet-light.html ``` ``` ## examples/arcade-cabinet/arcade-cabinet.css ``` ``` ## examples/arcade-cabinet/arcade-cabinet.html ``` ``` ## examples/arcade-cabinet/build.mjs ```js import { readFileSync, writeFileSync } from "node:fs"; import { dirname, join } from "node:path"; import { fileURLToPath } from "node:url"; import * as k from "../../kit/iso-kit.mjs"; import * as G from "../../kit/lathe.mjs"; import { tubePieces, tubeSvg } from "../../kit/tube.mjs"; import * as A from "../../kit/audit.mjs"; import { kitScript } from "../../scripts/inline-kit.mjs"; import { makeParts } from "./parts.mjs"; import { SCREEN } from "./screen.mjs"; const HERE = dirname(fileURLToPath(import.meta.url)); const THEME = process.argv.includes("--light") ? "light" : "dark"; const W = 600; const H = 760; const AZIMUTH = 146; const ELEVATION = 24; const PLATE = { x: -98, y: -18, w: 184, d: 236, r: 10 }; const PLATE_H = 10; const FOOT_H = 5; const XI = 60; const XW = 64; const TOPZ = 358; const P = k.fitProjection( [...k.boxCorners(PLATE, -PLATE_H - FOOT_H, 0), [-XW, 0, TOPZ], [XW, 0, TOPZ], [XW, 126, TOPZ], [-XW, 126, TOPZ], [-XW, 178, 184], [XW, 178, 184]], W, H, { pad: 30, azimuth: AZIMUTH, elevation: ELEVATION }, ); const V = G.viewOf(P); const KS = G.scaleOf(P); const at = (p) => k.iso(p, P); const S = (paths, style) => k.solidSvg(paths, style); const Ln = (d, style) => k.lineSvg(d, style); const Dots = (points, style) => k.dotsSvg(points, style); const Faded = (list, style) => k.fadedSvg(list, style); const path3 = (points, closed = false) => k.pathOf(points.map(at), closed); const f2 = (v) => Math.round(v * 100) / 100; const R = A.recorder(P); const record = R.solid; function put(name, ref, svg, shapes = [], { bias = 0, ...rest } = {}) { return R.put({ name, at: ref, bias, svg, shapes, piece: "cab", ...rest }); } const signed = (poly) => poly.reduce((a, [x, y], i) => { const [x2, y2] = poly[(i + 1) % poly.length]; return a + x * y2 - x2 * y; }, 0); const screenOriented = (pts) => (signed(pts) < 0 ? [...pts].reverse() : pts); function runsOf(flags, want) { const count = flags.length; const runs = []; const start = flags.findIndex((flag, index) => flag !== flags[(index + count - 1) % count]); if (start < 0) return flags[0] === want ? [Array.from({ length: count + 1 }, (_, index) => index % count)] : []; let run = null; for (let step = 0; step < count; step++) { const index = (start + step) % count; if (flags[index] === want) { if (!run) run = [index]; run.push((index + 1) % count); } else if (run) { runs.push(run); run = null; } } if (run) runs.push(run); return runs; } function prismPaths(F, poly, s0, s1) { const ring = signed(poly) > 0 ? poly : [...poly].reverse(); const n = ring.length; const W3 = (s, [x, y]) => [F.o[0] + F.a[0] * s + F.u[0] * x + F.v[0] * y, F.o[1] + F.a[1] * s + F.u[1] * x + F.v[1] * y, F.o[2] + F.a[2] * s + F.u[2] * x + F.v[2] * y]; const capNear = G.dot3(F.a, V) > 0; const [nearS, farS] = capNear ? [s1, s0] : [s0, s1]; const near = ring.map((p) => at(W3(nearS, p))); const far = ring.map((p) => at(W3(farS, p))); const normals = ring.map(([x0, y0], i) => { const [x1, y1] = ring[(i + 1) % n]; return G.unit3(G.add3(G.mul3(F.u, y1 - y0), G.mul3(F.v, -(x1 - x0)))); }); const facing = normals.map((m) => G.dot3(m, V) > 1e-9); const outline = []; const crease = []; for (const run of runsOf(facing, false)) outline.push(k.pathOf(run.map((i) => near[i]))); for (const run of runsOf(facing, true)) { crease.push(k.pathOf(run.map((i) => near[i]))); outline.push(k.pathOf(run.map((i) => far[i]))); } for (let i = 0; i < n; i++) if (facing[(i + n - 1) % n] !== facing[i]) outline.push(k.pathOf([near[i], far[i]])); const parts = [k.pathOf(screenOriented(near), true), k.pathOf(screenOriented(far), true)]; const buckets = [[], [], [], [], []]; for (let i = 0; i < n; i++) { if (!facing[i]) continue; const quad = screenOriented([near[i], near[(i + 1) % n], far[(i + 1) % n], far[i]]); parts.push(k.pathOf(quad, true)); buckets[G.toneOf(normals[i], P)].push(k.pathOf(quad, true)); } const capTone = G.toneOf(capNear ? F.a : G.mul3(F.a, -1), P); buckets[capTone].push(k.pathOf(screenOriented(near), true)); return { fill: parts.join(""), outline: outline.join(""), crease: crease.join(""), top: buckets[4].join(""), shades: buckets.slice(0, 4).map((b) => b.join("")) }; } const XF = G.frameOf([0, 0, 0], [1, 0, 0], [0, 1, 0], [0, 0, 1]); function board(name, poly, x0, x1, style = {}, { extra = "", inner = "", bias = 0, holes = [], ref } = {}) { const shape = record(A.prism(XF, poly, x0, x1, { name })); const cy = poly.reduce((a, p) => a + p[0], 0) / poly.length; const cz = poly.reduce((a, p) => a + p[1], 0) / poly.length; const dots = holes.length ? Dots(holes.map(([y, z]) => at([x0, y, z])), { size: 0.5, tone: "lo" }) : ""; put(name, ref ?? [(x0 + x1) / 2, cy, cz], S(prismPaths(XF, poly, x0, x1), { tone: "mid", ...style, inner }) + dots + extra, [shape], { bias }); return shape; } function prism(name, F, poly, s0, s1, style = {}, { extra = "", inner = "", bias = 0, ref } = {}) { const shape = record(A.prism(F, poly, s0, s1, { name })); const cx = poly.reduce((a, p) => a + p[0], 0) / poly.length; const cy = poly.reduce((a, p) => a + p[1], 0) / poly.length; const centre = G.add3(G.add3(G.add3(F.o, G.mul3(F.a, (s0 + s1) / 2)), G.mul3(F.u, cx)), G.mul3(F.v, cy)); put(name, ref ?? centre, S(prismPaths(F, poly, s0, s1), { tone: "mid", ...style, inner }) + extra, [shape], { bias }); return shape; } const rect = (u0, u1, v0, v1) => [[u0, v0], [u1, v0], [u1, v1], [u0, v1]]; function box(name, [x0, y0, z0], [x1, y1, z1], style = {}, { r = 0.4, steps = 2, bevel = 0, extra = "", inner = "", bias = 0 } = {}) { const plan = { x: x0, y: y0, w: x1 - x0, d: y1 - y0, r }; const shape = record(A.slab(plan, z0, z1 - z0, { name }, steps)); put(name, [(x0 + x1) / 2, (y0 + y1) / 2, (z0 + z1) / 2], S(k.slabOf(plan, z0, z1 - z0, P, steps, bevel), { tone: "mid", ...style, inner }) + extra, [shape], { bias }); return shape; } function turned(name, F, profile, style = {}, { extra = "", inner = "", bias = 0, smooth, steps, rims, bevel = 0, owner } = {}) { const opts = { bevel, ...(smooth !== undefined ? { smooth } : {}), ...(steps ? { steps } : {}), ...(rims ? { rims } : {}) }; const paths = G.solidOf(profile, F, P, opts); const mid = (profile[0][0] + profile[profile.length - 1][0]) / 2; const shape = record(A.solid(F, profile, { name, owner, radius: smooth && smooth.radius ? smooth.radius : null })); put(name, G.add3(F.o, G.mul3(F.a, mid)), S(paths, { tone: "mid", ...style, inner }) + extra, [shape], { bias }); return shape; } function disc(name, F, s0, s1, r, style = {}, options = {}) { if (options.owner === undefined && name.startsWith("crt.")) options = { ...options, owner: "crt" }; return turned(name, F, [[s0, r], [s1, r]], style, options); } function ball(name, c, r, style = {}, { bias = 0, extra = "" } = {}) { const shape = record(A.ball(c, r, { name })); put(name, c, S(G.sphereOf(c, r, P, { steps: 32 }), { tone: "mid", ...style }) + extra, [shape], { bias }); return shape; } function planeMatrix(o, ex, ey) { const p0 = at(o); const px = at(G.add3(o, ex)); const py = at(G.add3(o, ey)); const v = (x) => x.toFixed(4); return `matrix(${v(px[0] - p0[0])} ${v(px[1] - p0[1])} ${v(py[0] - p0[0])} ${v(py[1] - p0[1])} ${p0[0].toFixed(2)} ${p0[1].toFixed(2)})`; } const CABLES = []; function cable(name, points, r = 0.5, { tone = "mid", bend = 3, ends = [true, true], shells = [false, false], rings, maxLength = 16, bias = 0.05, limp = true, touch, bundle } = {}) { const route = G.fillet(points, Math.max(bend, r * 2.6), 10, { P, tube: r }); const total = G.pathLength(route); const SHELL = Math.max(1.6, r * 2.4); const gaps = [...(shells[0] ? [[0, SHELL]] : []), ...(shells[1] ? [[total - SHELL, total]] : [])]; R.route(name, route, r, { gaps, limp, touch, bundle, rims: shells.map((on) => (on ? r * 1.9 : r)), piece: "cab" }); CABLES.push(name); tubePieces(route, r, P, { maxLength, spacing: Math.max(0.6, Math.min(1.6, r)), gaps, ...(rings ? { rings } : {}) }).forEach((piece, index) => put(`${name}:${index}`, piece.mid, tubeSvg(piece, { tone }), [A.tube(piece.points, piece.radii)], { bias, route: name, chunk: index, attrs: ` data-route="${name}" data-chunk="${index}"` }), ); [0, 1].forEach((index) => { const end = index ? route[route.length - 1] : route[0]; if (shells[index]) { const tangent = G.tangentAlong(route, index ? total : 0); const F = G.frameAlong(end, tangent); const [s0, s1] = index ? [-SHELL, 0] : [0, SHELL]; const shape = record(A.disc(F, s0, s1, r * 1.9, { name: `${name}.shell${index}`, owner: name })); put(`${name}.shell${index}`, G.add3(end, G.mul3(tangent, (s0 + s1) / 2)), S(G.disc(s0, s1, r * 1.9, F, P, { steps: 20, bevel: 0.2 }), { tone: "mid" }), [shape], { bias: bias + 0.1 }); } else if (ends[index]) { put(`${name}.end${index}`, end, Dots([at(end)], { size: Math.max(0.5, r * KS * 0.9), tone: "hi" }), [A.ball(end, Math.max(0.5, r * KS * 0.9) / KS, { name: `${name}.end${index}`, owner: name })], { bias: bias + 0.15 }); } }); return route; } const back = []; back.push(``); const byDepth = (points) => [...points].sort((a, b) => k.depthOf([a[0], a[1], 0], P) - k.depthOf([b[0], b[1], 0], P)); for (const [x, y] of byDepth(k.corners(PLATE, 22))) { back.push(S(k.cylinder(x, y, 7, -PLATE_H - FOOT_H, 1.6, P, 28), { tone: "lo" })); back.push(S(k.cylinder(x, y, 5.4, -PLATE_H - FOOT_H + 1.6, FOOT_H - 1.6, P, 28), { tone: "mid" })); } back.push(S(k.slabOf(PLATE, -PLATE_H, PLATE_H, P, 8, 1.6), { tone: "mid", inner: Ln(k.sideSeam(PLATE, -4, P, 8), { tone: "faint" }) })); back.push(Ln(k.planOutline(k.insetPlan(PLATE, 5), 0, P), { tone: "lo" })); const plateScrews = k.corners(PLATE, 10); back.push(Ln(plateScrews.map(([x, y]) => k.ring(x, y, 2.2, 0, P, 16)).join(""), { tone: "lo" })); back.push(Dots(plateScrews.map(([x, y]) => at([x, y, 0])), { size: 0.5 })); record(A.slab(PLATE, -PLATE_H, PLATE_H, { name: "stand.plate", ground: true }, 8)); const STRIP = { x: PLATE.x + 14, y: PLATE.y + PLATE.d - 13, w: PLATE.w - 28, d: 6, r: 1 }; back.push(S(k.slabOf(STRIP, 0, 0.6, P, 3), { tone: "lo", crease: "none" })); const ticks = k.topTicks(STRIP.x + 4, STRIP.x + STRIP.w - 4, 4, 5, STRIP.y, 0.6, [1.8, 3.4], P); back.push(Ln(ticks.minor, { tone: "lo" }), Ln(ticks.major, { tone: "mid" })); const LABEL = { x: 48, y: PLATE.y + PLATE.d - 34, w: 30, d: 13, r: 1.2 }; back.push(S(k.slabOf(LABEL, 0, 0.8, P, 3), { tone: "lo", crease: "none" })); back.push(Ln(k.planOutline(k.insetPlan(LABEL, 1.4), 0.8, P, 3), { tone: "faint" })); back.push(Ln([20, 14, 17].map((w, i) => k.lineOnTop([LABEL.x + 4, LABEL.y + 3.4 + i * 3], [LABEL.x + 4 + w, LABEL.y + 3.4 + i * 3], 0.8, P)).join(""), { tone: "lo", free: true })); back.push(Dots([at([LABEL.x + LABEL.w - 2.6, LABEL.y + 2.4, 0.8]), at([LABEL.x + LABEL.w - 2.6, LABEL.y + LABEL.d - 2.4, 0.8])], { size: 0.45 })); const TRAY = { x: -74, y: 188 }; const STACK = 7; back.push(``); const COIN_STEP = 0.42; const stackTop = (n) => 1.6 + n * COIN_STEP; const BEZEL_T = [110, 306]; const BEZEL_B = [136, 195]; const WALL = [[0, 4], [156, 4], [156, 168], [178, 170], [178, 184], BEZEL_B, BEZEL_T, [126, 314], [126, 358], [0, 358]]; const bd = G.unit3([0, BEZEL_B[0] - BEZEL_T[0], BEZEL_B[1] - BEZEL_T[1]]); const NB = [0, -bd[2], bd[1]]; const C3 = [0, (BEZEL_T[0] + BEZEL_B[0]) / 2, (BEZEL_T[1] + BEZEL_B[1]) / 2]; const CPD = G.unit3([0, 178 - 136, 184 - 195]); const CPN = [0, -CPD[2], CPD[1]]; const cpTop = (y) => 195 + ((y - 136) * (184 - 195)) / (178 - 136); for (const [x, y] of byDepth([[-54, 12], [54, 12], [-54, 144], [54, 144]])) { const F = G.frameOf([x, y, 0], [0, 0, 1], [1, 0, 0], [0, 1, 0]); const shapes = [record(A.disc(F, 0, 1.2, 3.4, { name: `leveler.pad` })), record(A.disc(F, 1.2, 2.4, 2.4, { name: `leveler.nut` })), record(A.disc(F, 2.4, 4, 1, { name: `leveler.stem` }))]; put(`leveler`, [x, y, 2], S(G.disc(0, 1.2, 3.4, F, P, { steps: 32 }), { tone: "lo" }) + S(G.disc(1.2, 2.4, 2.4, F, P, { steps: 6 }), { tone: "mid" }) + S(G.disc(2.4, 4, 1, F, P, { steps: 16 }), { tone: "mid" }), shapes); } const wallPaths = prismPaths(XF, WALL, XI, XW); const ringW = signed(WALL) > 0 ? WALL : [...WALL].reverse(); const tFacing = ringW.map(([y0, z0], i) => { const [y1, z1] = ringW[(i + 1) % ringW.length]; return G.dot3(G.unit3([0, z1 - z0, -(y1 - y0)]), V) > 1e-9; }); const bead = runsOf(tFacing, true).map((run) => path3(run.map((i) => [62, ...ringW[i]]))).join(""); { const shape = record(A.prism(XF, WALL, XI, XW, { name: "wall" })); put("wall", [XW, 80, 180], S(wallPaths, { tone: "mid", inner: Ln(bead, { tone: "lo" }) }), [shape], { bias: -400 }); } box("cleat.floor", [56, 8, 8], [60, 148, 12], { tone: "lo" }); box("cleat.back", [56, 4, 12], [60, 8, 350], { tone: "lo" }); box("cleat.top", [56, 8, 350], [60, 122, 354], { tone: "lo" }); box("cleat.front", [56, 148, 12], [60, 152, 164], { tone: "lo" }); board("floor", [[4, 4], [152, 4], [152, 8], [4, 8]], -XI, XI, { tone: "lo" }, { holes: [[24, 6], [130, 6]] }); board("back", [[0, 4], [4, 4], [4, 354], [0, 354]], -XI, XI, {}, { holes: [[2, 40], [2, 180], [2, 320]], bias: -300 }); board("top", [[0, 354], [126, 354], [126, 358], [0, 358]], -XI, XI, {}, { holes: [[30, 356], [100, 356]], extra: Ln(Array.from({ length: 9 }, (_, i) => k.planOutline({ x: -36 + i * 8, y: 14, w: 3, d: 30, r: 1.5 }, 358, P, 3)).join(""), { tone: "faint" }), }); board("front", [[152, 4], [156, 4], [156, 168], [152, 168]], -XI, XI, {}, { holes: [[154, 20], [154, 150]] }); box("kick", [-XI, 156, 6], [XI, 156.8, 24], { tone: "lo" }, { r: 0.3, extra: Dots([-54, -18, 18, 54].flatMap((x) => [at([x, 156.8, 9]), at([x, 156.8, 21])]), { size: 0.45, tone: "hi" }) }); board("marquee.shelf", [[98, 318], [126, 318], [126, 322], [98, 322]], -XI, XI, { tone: "lo" }); const SPK = [[110, 306], [126, 314], [124.2, 317.6], [108.2, 309.6]]; board("speaker.board", SPK, -XI, XI); board("cp.top", [[136, 195], [178, 184], [177.24, 181.1], [135.24, 192.1]], -XI, XI, { tone: "mid" }, { holes: [[157, 188]] }); board("cp.front", [[174, 170], [178, 170], [178, 180.89], [174, 181.94]], -XI, XI); board("cp.bottom", [[152, 168], [174, 170], [174, 174], [152, 172]], -XI, XI, { tone: "lo" }); { const m = planeMatrix([0, 125.02, 338], [1, 0, 0], [0, 0, -1]); const sc = 1.7; const w = (7 * 8 - 3) * sc; const art = ``; board("marquee.plexi", [[123, 322], [125, 322], [125, 354], [123, 354]], -XI, XI, { tone: "faint" }, { extra: art }); } const TUBE_F = G.frameOf([-46, 110, 338], [1, 0, 0], [0, 1, 0], [0, 0, 1]); turned("marquee.tube", TUBE_F, [[0, 3.6], [92, 3.6]], { tone: "hi" }, { inner: Ln(G.arcOf(TUBE_F, 4, 3.6, P) + G.arcOf(TUBE_F, 88, 3.6, P), { tone: "faint" }), extra: "" }); box("marquee.socket", [-51, 106, 333], [-46, 114, 342], { tone: "mid" }); box("marquee.socket", [46, 106, 333], [51, 114, 342], { tone: "mid" }); box("marquee.bracket", [-51, 106, 342], [-49, 114, 354], { tone: "lo" }); box("marquee.bracket", [49, 106, 342], [51, 114, 354], { tone: "lo" }); box("marquee.ballast", [8, 99, 322], [40, 105, 327], { tone: "mid" }, { inner: Ln(k.sideSeam({ x: 8, y: 99, w: 32, d: 6, r: 0.4 }, 324.5, P, 2), { tone: "faint" }), extra: Dots([at([10, 105, 327]), at([38, 105, 327])], { size: 0.45 }) }); turned("marquee.starter", G.frameOf([44, 103, 322], [0, 0, 1], [1, 0, 0], [0, 1, 0]), [[0, 1.8], [5, 1.8], [5.6, 1.3, 1], [6, 0.6, 1]], { tone: "mid" }); const SPK_N = G.unit3([0, -8, 16]); const SPK_C = [22, 115, 313.0]; const SPK_F = G.frameAlong(SPK_C, SPK_N); turned("speaker.basket", SPK_F, [[0, 5.6], [0.8, 5.6], [0.8, 4.8], [2.4, 2.8, 1], [2.8, 2.4]], { tone: "mid" }); disc("speaker.magnet", SPK_F, 2.8, 3.8, 2.6, { tone: "lo" }); const MON_A = G.mul3(NB, -1); const CF = G.add3(C3, G.mul3(NB, -5)); const MON = G.frameOf(CF, MON_A, [1, 0, 0], bd); const BEZEL_OPEN = { u: 29.5, w: 37.5, r: 4 }; const monPoint = (u, w, s) => G.add3(G.add3(G.add3(CF, G.mul3([1, 0, 0], u)), G.mul3(bd, w)), G.mul3(MON_A, s)); const funnel = (s) => 3 + 31 * Math.pow(Math.max(0, (64 - s) / 55), 1.4); const funnelSlope = (s) => (-31 * 1.4 * Math.pow(Math.max(1e-6, (64 - s) / 55), 0.4)) / 55; prism("crt.face", MON, rect(-34, 34, -42, 42).map((p) => p), 0, 3, { tone: "hi" }); const BAND = [[-35, -43], [35, -43], [35, 43], [-35, 43]]; prism("crt.band", MON, BAND, 3, 9, { tone: "mid" }, { inner: "" }); for (const [su, sv] of [[-1, -1], [1, -1], [-1, 1], [1, 1]]) { const ear = [[su * 35, sv * 37], [su * 41, sv * 37], [su * 41, sv * 43], [su * 35, sv * 43]]; prism("crt.ear", MON, ear, 5, 6, { tone: "mid" }, { extra: Dots([at(monPoint(su * 38.6, sv * 40, 5))], { size: 0.5, tone: "hi" }) }); } const FUNNEL = G.bandsOf([[9, funnel(9)], [62, funnel(62)]], [48], MON, P, { radius: funnel, slope: funnelSlope, rows: 6 }); const funnelFront = FUNNEL.bands[0]; { const shape = record(A.solid(MON, funnelFront.profile, { name: "crt.funnel", radius: funnel })); const sides = FUNNEL.sidesOf(9, 48, { ends: false }); put("crt.funnel", G.add3(CF, G.mul3(MON_A, 26)), S(funnelFront.paths, { tone: "hi" }) + Ln(sides.d, { tone: "hi" }), [shape]); } turned("crt.yoke", MON, [[48, 15.5], [52, 15.5], [60, 11, 1], [64, 8]], { tone: "mid" }, { inner: Ln(G.arcOf(MON, 52, 15.5, P), { tone: "faint" }) }); for (const [s0, s1] of [[64, 69], [70.4, 72.4], [73.8, 88.4]]) disc("crt.neck", MON, s0, s1, 3, { tone: "hi" }); disc("crt.ring", MON, 69, 70.4, 4.2, { tone: "mid" }); disc("crt.ring", MON, 72.4, 73.8, 4.2, { tone: "mid" }); prism("crt.neckboard", MON, rect(-7, 7, -7, 7), 90, 91, { tone: "mid" }, { extra: "" }); disc("crt.socket", MON, 88.4, 90, 4.4, { tone: "lo" }); const ANODE_ANGLE = -2.35; const anodeAt = G.pointOf(MON, 30, funnel(30), ANODE_ANGLE); const anodeN = G.unit3(G.sub3(G.radialOf(MON, ANODE_ANGLE), G.mul3(MON.a, funnelSlope(30)))); const ANODE_F = G.frameAlong(G.add3(anodeAt, G.mul3(anodeN, -0.4)), anodeN); turned("crt.anode", ANODE_F, [[0, 3.6], [0.8, 3.4, 1], [1.8, 2.4, 1], [2.4, 1.2, 1], [2.6, 0.6]], { tone: "lo" }); for (const su of [-1, 1]) prism("mon.angle", MON, [[su * 41, -46], [su * 44, -46], [su * 44, 46], [su * 41, 46]].map(([u, w]) => [u, w]), 4, 8, { tone: "mid" }); for (const su of [-1, 1]) prism("mon.rail", MON, [[su * 36, 46], [su * 44, 46], [su * 44, 48], [su * 36, 48]], 4, 66, { tone: "mid" }, { extra: Dots([at(monPoint(su * 40, 46, 20)), at(monPoint(su * 40, 46, 50))], { size: 0.45 }) }); prism("mon.crossbar", MON, [[-36, 46], [36, 46], [36, 48], [-36, 48]], 62, 66, { tone: "mid" }); prism("mon.shelf", MON, [[-XI, 48], [XI, 48], [XI, 52], [-XI, 52]], -2, 70, { tone: "lo" }); prism("mon.cleat", MON, [[56, 52], [XI, 52], [XI, 56], [56, 56]], 2, 66, { tone: "lo" }); board("mon.post", [[130, 174], [134, 174], [134, 194.6], [130, 195.6]], -XI, XI, { tone: "lo" }); const CH = G.frameOf(monPoint(-44, 0, 0), [-1, 0, 0], MON_A, bd); const chPoint = (s, w, out = 0) => G.add3(G.add3(G.add3(monPoint(-44, 0, 0), G.mul3(MON_A, s)), G.mul3(bd, w)), [-out, 0, 0]); prism("chassis.board", CH, [[22, 14], [64, 14], [64, 46], [22, 46]], 0, 1, { tone: "lo" }); prism("chassis.flyback", CH, [[46, 18], [56, 18], [56, 29], [46, 29]], 1, 7, { tone: "mid" }, { inner: "" }); disc("chassis.flyback.coil", G.frameAlong(chPoint(51, 23.5, 7), [-1, 0, 0]), 0, 2.6, 4, { tone: "hi" }); for (const [s, w] of [[48, 31], [53, 31]]) disc("chassis.pot", G.frameAlong(chPoint(s, w, 1), [-1, 0, 0]), 0, 1.6, 1.1, { tone: "mid" }, { extra: Ln(k.pathOf([at(chPoint(s - 0.8, w, 2.7)), at(chPoint(s + 0.8, w, 2.7))]), { tone: "hi" }) }); prism("chassis.heatsink", CH, [[26, 17], [38, 17], [38, 27], [26, 27]], 1, 6, { tone: "mid" }, { extra: Ln([28, 30, 32, 34, 36].map((s) => k.pathOf([at(chPoint(s, 17, 6)), at(chPoint(s, 27, 6))])).join(""), { tone: "lo" }), }); for (const [s, w, r, h] of [[30, 34, 1.8, 5], [35, 38, 1.4, 4], [47, 40, 1.6, 4.4], [42, 42, 1.2, 3.4]]) disc("chassis.cap", G.frameAlong(chPoint(s, w, 1), [-1, 0, 0]), 0, h, r, { tone: "hi" }, { inner: "" }); prism("chassis.plug.video", CH, [[56, 36], [62, 36], [62, 42], [56, 42]], 1, 3, { tone: "mid" }); prism("chassis.plug.neck", CH, [[57, 18], [62, 18], [62, 23], [57, 23]], 1, 3, { tone: "mid" }); const JOY = { x: -49, y: 160 }; const J_O = [JOY.x, JOY.y, cpTop(JOY.y)]; const CPF = (o) => G.frameOf(o, CPN, [1, 0, 0], CPD); const cpPoint = (x, y, s = 0) => G.add3([x, y, cpTop(y)], G.mul3(CPN, s)); const overlay = [[-56, 139], [56, 139], [56, 175], [-56, 175]].map(([x, y]) => cpPoint(x, y, 0.05)); const STICK_DATA = { o: J_O, nc: CPN, dc: CPD, pivot: -4, switches: [ { id: "left", c: G.add3(cpPoint(JOY.x - 4.6, JOY.y), G.mul3(CPN, -10.4)), out: [-1, 0, 0] }, { id: "right", c: G.add3(cpPoint(JOY.x + 4.6, JOY.y), G.mul3(CPN, -10.4)), out: [1, 0, 0] }, { id: "up", c: G.add3(G.add3(cpPoint(JOY.x, JOY.y), G.mul3(CPD, -4.6)), G.mul3(CPN, -10.4)), out: G.mul3(CPD, -1) }, { id: "down", c: G.add3(G.add3(cpPoint(JOY.x, JOY.y), G.mul3(CPD, 4.6)), G.mul3(CPN, -10.4)), out: CPD }, ], }; const PARTS = makeParts(k, G, P, { stick: STICK_DATA }); const JF = CPF(J_O); const plateShape = record(A.prism(JF, rect(-9, 9, -9, 9), -3.6, -3, { name: "stick.plate" })); put("stick.plate", G.add3(J_O, G.mul3(CPN, -3.3)), S(prismPaths(JF, rect(-9, 9, -9, 9), -3.6, -3), { tone: "mid" }), [plateShape]); const boltHeads = [[-7, -7], [7, -7], [-7, 7], [7, 7]].map(([u, v]) => at(G.add3(G.add3(J_O, G.mul3([1, 0, 0], u)), G.mul3(CPD, v)))); for (const sw of STICK_DATA.switches) { const side = G.cross3(CPN, sw.out); const F = G.frameOf(G.add3(sw.c, G.mul3(sw.out, 0.65)), CPN, sw.out, side); prism("stick.bracket", F, [[0, -2.2], [0.5, -2.2], [0.5, 2.2], [0, 2.2]], -1, 6.8, { tone: "lo" }); } disc("stick.bushing", JF, -5.2, -3.6, 2.2, { tone: "lo" }, { owner: "stick" }); const PIV = G.frameAlong(G.add3(J_O, G.mul3(CPN, -4)), CPN); const stickLowerShapes = [ record(A.disc(PIV, -8.6, -4.6, 2.4, { name: "stick.actuator", owner: "stick" })), record(A.disc(PIV, -9.4, -0.6, 0.85, { name: "stick.shaft.lower", owner: "stick" })), record(A.disc(PIV, -10, -9.4, 1.5, { name: "stick.clip", owner: "stick" })), ...STICK_DATA.switches.map((sw) => record(A.prism(G.frameOf(sw.c, CPN, sw.out, G.cross3(CPN, sw.out)), rect(-0.65, 0.65, -2, 2), -1, 1, { name: `stick.switch.${sw.id}` }))), ...STICK_DATA.switches.flatMap((sw) => [-1.1, 0, 1.1].map((o) => record(A.prism(G.frameOf(G.add3(G.add3(sw.c, G.mul3(CPN, -1)), G.mul3(G.cross3(CPN, sw.out), o)), CPN, sw.out, G.cross3(CPN, sw.out)), rect(-0.3, 0.3, -0.35, 0.35), -1, 0, { name: `stick.tab.${sw.id}`, owner: `stick.switch.${sw.id}` })))), ]; put("stick.lower", G.add3(J_O, G.mul3(CPN, -9)), `${PARTS.stickLower(0, 0)}`, stickLowerShapes); put("stick.bolts", J_O, Dots(boltHeads, { size: 0.55, tone: "mid" }), [[-7, -7], [7, -7], [-7, 7], [7, 7]].map(([u, v]) => record(A.ball(G.add3(G.add3(J_O, G.mul3([1, 0, 0], u)), G.mul3(CPD, v)), 0.4, { name: "stick.bolt" }))), { bias: 0.1 }); put("stick.upper", G.add3(J_O, G.mul3(CPN, 8)), `${PARTS.stickUpper(0, 0)}`, [record(A.ball(G.add3(J_O, G.mul3(CPN, 12.4)), 3.5, { name: "stick.ball", owner: "stick" })), record(A.disc(G.frameAlong(J_O, CPN), 0.4, 8.95, 0.85, { name: "stick.shaft", owner: "stick" })), record(A.disc(G.frameAlong(J_O, CPN), 0, 0.4, 4.4, { name: "stick.washer", owner: "stick" }))], { bias: 2 }); const BUTTONS = [ { id: "fire", x: -18, y: 158, lamp: false }, { id: "jump", x: -6, y: 162, lamp: false }, { id: "p1", x: 18, y: 146, lamp: true }, { id: "p2", x: 32, y: 146, lamp: true }, ]; for (const b of BUTTONS) { const o = cpPoint(b.x, b.y); const F = CPF(o); const r = b.lamp ? 2.2 : 2.6; const bez = record(A.disc(F, 0, 0.7, r + 1, { name: `button.${b.id}.bezel` })); put(`button.${b.id}.bezel`, o, S(G.disc(0, 0.7, r + 1, F, P, { steps: 36 }), { tone: "mid" }), [bez], { bias: 0.5 }); const plunger = record(A.disc(F, 0.7, 2.2, r, { name: `button.${b.id}` })); const cap = S(G.disc(0.7, 2.2, r, F, P, { steps: 32 }), { tone: "hi" }) + Ln(G.circleOf(F, 2.2, r * 0.68, P, 24), { tone: "lo" }); put(`button.${b.id}`, G.add3(o, G.mul3(CPN, 1.5)), `${cap}`, [plunger], { bias: 0.8 }); disc(`button.${b.id}.housing`, F, -8, -4.6, 2.3, { tone: "mid" }); disc(`button.${b.id}.nut`, F, -4.6, -3, 3.6, { tone: "lo" }, { steps: 6 }); const SW = G.frameOf(G.add3(o, G.mul3(CPN, -8)), CPN, [1, 0, 0], CPD); prism(`button.${b.id}.switch`, SW, rect(-2, 2, -1.3, 1.3), -4.2, 0, { tone: "mid" }); } const DOOR = { x0: -57, x1: -3, z0: 38, z1: 120 }; const DOOR_CX = (DOOR.x0 + DOOR.x1) / 2; const FY = 156; box("door.frame", [DOOR.x0, FY, DOOR.z0], [DOOR.x1, FY + 1.4, DOOR.z1], { tone: "lo" }, { r: 1.2, steps: 3 }); box("door.plate", [DOOR.x0 + 2, FY + 1.4, DOOR.z0 + 2], [DOOR.x1 - 2, FY + 2.4, DOOR.z1 - 2], { tone: "mid" }, { r: 1, steps: 3, bevel: 0.4 }); const ENTRIES = [-42, -18]; const SLOT_Z = [100.5, 107.5]; for (const cx of ENTRIES) { const front = FY + 3.8; box("door.entry", [cx - 8, FY + 2.4, 88], [cx + 8, front, 114], { tone: "mid" }, { r: 1.2, steps: 3, bevel: 0.3 }); const slot = [[cx - 0.5, SLOT_Z[0]], [cx + 0.5, SLOT_Z[0]], [cx + 0.5, SLOT_Z[1]], [cx - 0.5, SLOT_Z[1]]]; const lamp = `${S(k.slabOf({ x: cx - 5, y: front, w: 10, d: 1.2, r: 0.6 }, 90, 8, P, 2, 0.3), { tone: "hi" })}`; put("door.slot", [cx, front + 0.1, 104], `` + lamp, [record(A.box([cx - 5, front, 90], [cx + 5, front + 1.2, 98], { name: "door.reject" }))], { bias: 1 }); } disc("door.lock", G.frameAlong([DOOR_CX, FY + 2.4, 72], [0, 1, 0]), 0, 1.6, 2.4, { tone: "hi" }, { extra: Ln(path3([[DOOR_CX, FY + 4.02, 70.8], [DOOR_CX, FY + 4.02, 73.2]]), { tone: "lo", free: true }) }); box("door.return", [DOOR_CX - 9, FY + 2.4, 46], [DOOR_CX + 9, FY + 4.4, 60], { tone: "mid" }, { r: 1.4, steps: 3 }); put("door.return.mouth", [DOOR_CX, FY + 4.5, 52], ``, [record(A.box([DOOR_CX - 6, FY + 4.4, 49], [DOOR_CX + 6, FY + 4.5, 55], { name: "door.return.mouth" }))], { bias: 1 }); for (const z of [48, 110]) disc("door.hinge", G.frameAlong([DOOR.x1 + 0.9, FY + 0.9, z], [0, 0, 1]), -3, 3, 0.9, { tone: "mid" }); box("door.price", [DOOR_CX - 6, FY + 2.4, 80], [DOOR_CX + 6, FY + 2.9, 85], { tone: "lo" }, { extra: Ln(path3([[DOOR_CX - 4, FY + 2.92, 82.5], [DOOR_CX + 2, FY + 2.92, 82.5]]), { tone: "lo", free: true }) }); box("door.back", [DOOR.x0, 150, DOOR.z0], [DOOR.x1, 152, DOOR.z1], { tone: "lo" }); const MECH = (cx) => ({ x0: cx - 6.5, x1: cx + 6.5, y0: 141, y1: 150, z0: 84, z1: 106 }); for (const cx of ENTRIES) { const m = MECH(cx); const side = m.x0; const extra = [ Ln(path3([[side, m.y0 + 2, m.z0 + 4], [side, m.y1 - 2, m.z0 + 4], [side, m.y1 - 2, m.z1 - 4], [side, m.y0 + 2, m.z1 - 4]], true), { tone: "faint" }), Dots([at([side, m.y0 + 2.4, m.z1 - 2.4]), at([side, m.y1 - 2.4, m.z1 - 2.4]), at([side, m.y0 + 2.4, m.z0 + 2.4]), at([side, m.y1 - 2.4, m.z0 + 2.4])], { size: 0.45 }), ].join(""); box(`mech`, [m.x0, m.y0, m.z0], [m.x1, m.y1, m.z1], { tone: "mid" }, { r: 0.6, steps: 2, bevel: 0.4, extra }); disc("mech.magnet", G.frameAlong([side, 145.5, 96], [-1, 0, 0]), 0, 1.4, 2.4, { tone: "hi" }); disc("mech.pivot", G.frameAlong([side, 146, 89], [-1, 0, 0]), 0, 0.8, 0.9, { tone: "lo" }); box("mech.lever", [cx - 1, 141.5, 106], [cx + 1, 150, 107.6], { tone: "lo" }); disc("door.socket", G.frameAlong([cx, 150, 112], [0, -1, 0]), 0, 3.4, 1.6, { tone: "mid" }); } const CHUTE = { x0: -50, x1: -10, y0: 148, y1: 104, z0: 82, slope: Math.tan((30 * Math.PI) / 180) }; const chuteZ = (y) => CHUTE.z0 - CHUTE.slope * (CHUTE.y0 - y); const CH_T = 0.8; const cs = Math.cos((30 * Math.PI) / 180); const sn = Math.sin((30 * Math.PI) / 180); const chuteFloor = [[CHUTE.y0, chuteZ(CHUTE.y0)], [CHUTE.y1, chuteZ(CHUTE.y1)], [CHUTE.y1 + CH_T * sn, chuteZ(CHUTE.y1) - CH_T * cs], [CHUTE.y0 + CH_T * sn, chuteZ(CHUTE.y0) - CH_T * cs]]; board("chute.floor", chuteFloor, CHUTE.x0, CHUTE.x1, { tone: "mid" }); const wallOf = (h) => [[CHUTE.y0, chuteZ(CHUTE.y0)], [CHUTE.y0, chuteZ(CHUTE.y0) + h], [CHUTE.y1, chuteZ(CHUTE.y1) + h], [CHUTE.y1, chuteZ(CHUTE.y1)]]; board("chute.far", wallOf(6), CHUTE.x1, CHUTE.x1 + 0.7, { tone: "mid" }); board("chute.lip", wallOf(1.2), CHUTE.x0 - 0.7, CHUTE.x0, { tone: "hi" }); box("chute.tab", [CHUTE.x0 + 2, CHUTE.y0, chuteZ(CHUTE.y0) - 2.6], [CHUTE.x1 - 2, 150, chuteZ(CHUTE.y0) - CH_T * cs], { tone: "lo" }); for (const x of [CHUTE.x0 + 1, CHUTE.x1 - 3]) box("chute.leg", [x, 109, 8], [x + 1.4, 111, chuteZ(109 - CH_T * sn) - CH_T * cs], { tone: "lo" }); const SW_Y = 124; const SWITCH = { x0: -54.4, x1: -50.7, y0: SW_Y - 2.6, y1: SW_Y + 2.6, z0: chuteZ(SW_Y) - 2.4, z1: chuteZ(SW_Y) + 3 }; box("coin.switch", [SWITCH.x0, SWITCH.y0, SWITCH.z0], [SWITCH.x1, SWITCH.y1, SWITCH.z1], { tone: "mid" }, { extra: Dots([at([SWITCH.x0, SW_Y - 1.4, SWITCH.z0 + 1]), at([SWITCH.x0, SW_Y + 1.4, SWITCH.z1 - 1])], { size: 0.4 }) }); box("coin.switch.bracket", [SWITCH.x1, SW_Y - 2.2, SWITCH.z0], [CHUTE.x0 - 0.7, SW_Y + 2.2, SWITCH.z0 + 1], { tone: "lo" }); const WIRE = { from: [SWITCH.x1, SW_Y, chuteZ(SW_Y) + 1.4], length: 13 }; const BOX = { x0: -58, x1: -16, y0: 62, y1: 104, z0: 8, z1: 30 }; const T = 0.7; box("cash.floor", [BOX.x0, BOX.y0, BOX.z0], [BOX.x1, BOX.y1, BOX.z0 + T], { tone: "lo" }); box("cash.back", [BOX.x0, BOX.y0, BOX.z0 + T], [BOX.x1, BOX.y0 + T, BOX.z1], { tone: "mid" }); box("cash.far", [BOX.x1 - T, BOX.y0 + T, BOX.z0 + T], [BOX.x1, BOX.y1, BOX.z1], { tone: "mid" }); box("cash.near", [BOX.x0, BOX.y0 + T, BOX.z0 + T], [BOX.x0 + T, BOX.y1, BOX.z1], { tone: "mid" }); box("cash.front", [BOX.x0 + T, BOX.y1 - T, BOX.z0 + T], [BOX.x1 - T, BOX.y1, BOX.z1], { tone: "mid" }); box("cash.handle", [BOX.x0 - 1.6, 78, 22], [BOX.x0, 88, 24], { tone: "hi" }); const METER = { x0: -58, x1: -52, y0: 108, y1: 118, z0: 12, z1: 20 }; box("meter.foot", [-58, 106, 8], [-50, 120, 12], { tone: "lo" }); box("meter", [METER.x0, METER.y0, METER.z0], [METER.x1, METER.y1, METER.z1], { tone: "mid" }, { r: 0.6 }); const METER_FACE = { o: [METER.x0 - 0.02, 109.6, 18.4], ex: [0, 1, 0], ey: [0, 0, -1] }; { const m = planeMatrix(METER_FACE.o, METER_FACE.ex, METER_FACE.ey); put("meter.face", [METER.x0, 113, 16], `004127`, [record(A.box([METER.x0 - 0.05, 109.6, 13.6], [METER.x0, 116.4, 18.4], { name: "meter.face" }))], { bias: 0.3 }); } const PCB = { y: 8, x0: -50, x1: 10, z0: 116, z1: 170 }; const px = (v) => PCB.x0 + v; const pz = (v) => PCB.z0 + v; const FACE_Y = PCB.y; const BF = G.frameOf([0, FACE_Y, 0], [0, 1, 0], [1, 0, 0], [0, 0, 1]); for (const [x, z] of [[3, 3], [57, 3], [3, 51], [57, 51]]) disc("pcb.standoff", G.frameAlong([px(x), 4, pz(z)], [0, 1, 0]), 0, 3.2, 1, { tone: "lo" }); box("pcb.board", [PCB.x0, FACE_Y - 0.8, PCB.z0], [PCB.x1, FACE_Y, PCB.z1], { tone: "lo" }, { r: 0.6 }); const chip = (name, x, z, len, wid, tall = 1.2) => { const y1 = FACE_Y + tall; const pins = []; for (let i = 0.6; i < len - 0.3; i += 1.27) pins.push(at([px(x + i), FACE_Y, pz(z) - 0.25]), at([px(x + i), FACE_Y, pz(z + wid) + 0.25])); box(name, [px(x), FACE_Y, pz(z)], [px(x + len), y1, pz(z + wid)], { tone: "hi" }, { r: 0.15, steps: 1, extra: Dots(pins, { size: 0.22, tone: "lo" }) + Dots([at([px(x + 0.8), y1, pz(z + wid / 2)])], { size: 0.35, tone: "lo" }) }); }; chip("pcb.cpu", 4, 40, 10.4, 3); for (let i = 0; i < 4; i++) chip("pcb.rom", 18 + i * 8.6, 45, 7.2, 3); for (let i = 0; i < 3; i++) chip("pcb.ram", 4 + i * 6, 33, 4.6, 1.6); for (let r = 0; r < 3; r++) for (let c = 0; c < 6; c++) chip("pcb.logic", 24 + c * 5.6, 12 + r * 7.4, 4, 1.6); chip("pcb.sound", 4, 22, 5.4, 3); chip("pcb.video", 4, 12, 7.2, 3, 1.6); box("pcb.crystal", [px(17), FACE_Y, pz(41)], [px(20), FACE_Y + 1.4, pz(42.6)], { tone: "hi" }, { r: 0.6, steps: 3 }); box("pcb.dips", [px(16), FACE_Y, pz(33)], [px(24), FACE_Y + 0.8, pz(35)], { tone: "mid" }, { extra: Dots(Array.from({ length: 8 }, (_, i) => at([px(16.5 + i), FACE_Y + 0.8, pz(34)])), { size: 0.25, tone: "hi" }) }); prism("pcb.heatsink", BF, rect(px(4), px(12), pz(3), pz(8)), 0, 4.2, { tone: "mid" }, { extra: Ln([5.6, 7.2, 8.8, 10.4].map((x) => path3([[px(x), FACE_Y + 4.2, pz(3)], [px(x), FACE_Y + 4.2, pz(8)]])).join(""), { tone: "lo" }) }); for (const [x, z, r, h] of [[50, 37.4, 1.6, 3.6], [56, 37.4, 1.2, 2.8], [16, 26, 1, 2.4], [18, 16, 1, 2.4]]) disc("pcb.cap", G.frameAlong([px(x), FACE_Y, pz(z)], [0, 1, 0]), 0, h, r, { tone: "hi" }); put("pcb.led", [px(54), FACE_Y + 0.4, pz(48)], `${Dots([at([px(54), FACE_Y + 0.4, pz(48)])], { size: 0.9, tone: "hi" })}`, [record(A.ball([px(54), FACE_Y + 0.4, pz(48)], 0.6, { name: "pcb.led" }))], { bias: 0.4 }); { const traces = []; const pads = []; const lane = (x0, z0, x1, z1, via) => { const pts = via ? [[x0, z0], [via, z0], [via, z1], [x1, z1]] : [[x0, z0], [x1, z0], [x1, z1]]; traces.push(path3(pts.map(([x, z]) => [px(x), FACE_Y + 0.02, pz(z)]))); pads.push(at([px(x0), FACE_Y + 0.02, pz(z0)]), at([px(x1), FACE_Y + 0.02, pz(z1)])); }; lane(15, 41.4, 18, 39, 16.6); lane(26.6, 45, 29, 37); lane(35.2, 45, 37.6, 37); lane(9, 39, 9, 35); lane(15, 34.6, 24, 27.6, 20); lane(9.6, 25, 24, 23.2, 16); lane(11.4, 15, 24, 11.4, 14); lane(34, 9.4, 44, 4, 39); lane(50, 18, 54, 26); traces.push(path3([[px(58), FACE_Y + 0.02, pz(2)], [px(58), FACE_Y + 0.02, pz(52)]])); pads.push(at([px(58), FACE_Y + 0.02, pz(2)]), at([px(58), FACE_Y + 0.02, pz(52)])); put("pcb.traces", [px(30), FACE_Y + 0.05, pz(27)], Ln(traces.join(""), { tone: "faint" }) + Dots(pads, { size: 0.3, tone: "lo" }), [record(A.box([PCB.x0, FACE_Y, PCB.z0], [PCB.x1, FACE_Y + 0.05, PCB.z1], { name: "pcb.traces" }))], { bias: 0.05 }); } const EDGE = { x0: PCB.x1, x1: PCB.x1 + 4.6, y0: 4.6, y1: 11, z0: 124, z1: 162 }; box("pcb.edge", [EDGE.x0, EDGE.y0, EDGE.z0], [EDGE.x1, EDGE.y1, EDGE.z1], { tone: "mid" }, { r: 0.5, extra: Ln(path3([[EDGE.x0 + 1, EDGE.y1, EDGE.z0], [EDGE.x0 + 1, EDGE.y1, EDGE.z1]]), { tone: "lo" }) }); const plugAt = (z) => [EDGE.x1, 7.8, z]; box("pcb.vplug", [px(6), 5.4, PCB.z1], [px(12), 10.4, PCB.z1 + 2.4], { tone: "mid" }); const FAN = { x: -18, z: 262, r: 12 }; const FANF = G.frameOf([FAN.x, 4, FAN.z], [0, 1, 0], [1, 0, 0], [0, 0, 1]); prism("fan.frame", FANF, rect(-13, 13, -13, 13), 0, 3.4, { tone: "mid" }, { extra: Dots([[-11, -11], [11, -11], [-11, 11], [11, 11]].map(([u, v]) => at([FAN.x + u, 7.4, FAN.z + v])), { size: 0.5, tone: "hi" }), }); { const m = planeMatrix([FAN.x, 7.42, FAN.z], [1, 0, 0], [0, 0, -1]); const blades = Array.from({ length: 7 }, (_, i) => { const a = (i / 7) * Math.PI * 2; const c = Math.cos(a); const s = Math.sin(a); const pt = (r, da) => [r * Math.cos(a + da), r * Math.sin(a + da)].map((v) => f2(v)).join(" "); return `M${pt(3.6, 0)}Q${pt(8, 0.25)} ${pt(11, 0.12)}L${pt(11, 0.62)}Q${pt(7.6, 0.72)} ${pt(3.6, 0.7)}Z`; }).join(""); const guard = [11.6, 8, 4.6].map((r) => `M${r} 0A${r} ${r} 0 1 1 ${-r} 0A${r} ${r} 0 1 1 ${r} 0Z`).join(""); const spokes = [0, 1, 2, 3].map((i) => `M${f2(3 * Math.cos(i * Math.PI / 2 + 0.4))} ${f2(3 * Math.sin(i * Math.PI / 2 + 0.4))}L${f2(11.6 * Math.cos(i * Math.PI / 2 + 0.4))} ${f2(11.6 * Math.sin(i * Math.PI / 2 + 0.4))}`).join(""); put("fan.rotor", [FAN.x, 7.5, FAN.z], ``, [record(A.disc(FANF, 3.4, 3.5, 12, { name: "fan.rotor" }))], { bias: 0.2 }); } box("psu.base", [-48, 10, 8], [-20, 40, 9.4], { tone: "lo" }, { extra: Dots([at([-46, 12, 9.4]), at([-22, 12, 9.4]), at([-46, 38, 9.4]), at([-22, 38, 9.4])], { size: 0.45 }) }); box("xfmr.core", [-46, 16, 9.4], [-22, 34, 30], { tone: "mid" }, { inner: Ln([12, 15, 18, 21, 24, 27].map((z) => k.sideSeam({ x: -46, y: 16, w: 24, d: 18, r: 0.4 }, z, P, 2)).join(""), { tone: "faint" }), }); box("xfmr.coil", [-42, 34, 13], [-26, 37, 27], { tone: "hi" }, { r: 1.4, steps: 3 }); box("xfmr.coil.back", [-42, 13, 13], [-26, 16, 27], { tone: "hi" }, { r: 1.4, steps: 3 }); box("xfmr.terminals", [-40, 22, 30], [-28, 28, 32], { tone: "lo" }, { extra: Dots([-38, -35, -32, -29].map((x) => at([x, 25, 32])), { size: 0.45, tone: "hi" }) }); box("psu.case", [-12, 10, 8], [30, 40, 22], { tone: "mid" }, { bevel: 0.4, extra: Dots(k.dotGrid(-8, 13, 14, 8, 2.6, 22, P), { size: 0.35, tone: "lo" }) }); box("psu.strip", [-8, 40, 9], [26, 43, 14], { tone: "lo" }, { extra: Dots([-5, -1, 3, 7, 11, 15, 19, 23].map((x) => at([x, 43, 12.4])), { size: 0.45, tone: "hi" }) }); const PW = { x: 58.6, y0: 14, y1: 58, z0: 28, z1: 70 }; box("pw.plate", [PW.x, PW.y0, PW.z0], [XI, PW.y1, PW.z1], { tone: "lo" }, { extra: Dots([[PW.y0 + 2, PW.z0 + 2], [PW.y1 - 2, PW.z0 + 2], [PW.y0 + 2, PW.z1 - 2], [PW.y1 - 2, PW.z1 - 2]].map(([y, z]) => at([PW.x, y, z])), { size: 0.45, tone: "hi" }) }); box("relay", [PW.x - 7, 18, 52], [PW.x, 30, 64], { tone: "mid" }, { r: 0.6, steps: 2, extra: `${Dots([at([PW.x - 7, 27.4, 61])], { size: 0.7, tone: "hi" })}` }); for (const z of [56, 62]) { box("fuse.holder", [PW.x - 2.6, 36, z - 1.6], [PW.x, 50, z + 1.6], { tone: "mid" }, { r: 1, steps: 3 }); disc("fuse.cap", G.frameAlong([PW.x - 1.3, 50, z], [0, 1, 0]), 0, 2, 1.3, { tone: "hi" }); } box("pw.strip", [PW.x - 3, 18, 34], [PW.x, 54, 39], { tone: "mid" }, { extra: Dots([21, 25, 29, 33, 37, 41, 45, 49].map((y) => at([PW.x - 3, y, 36.5])), { size: 0.45, tone: "hi" }) }); box("pw.filter", [PW.x - 6, 18, 42], [PW.x, 34, 49], { tone: "hi" }, { r: 0.8, steps: 2 }); const SV = { x: 58.6, y0: 16, y1: 52, z0: 98, z1: 120 }; box("service.plate", [SV.x, SV.y0, SV.z0], [XI, SV.y1, SV.z1], { tone: "lo" }, { extra: Dots([[SV.y0 + 2, SV.z0 + 2], [SV.y1 - 2, SV.z0 + 2], [SV.y0 + 2, SV.z1 - 2], [SV.y1 - 2, SV.z1 - 2]].map(([y, z]) => at([SV.x, y, z])), { size: 0.45, tone: "hi" }) }); box("service.toggle", [SV.x - 3, 20, 108], [SV.x, 26, 114], { tone: "mid" }, { r: 0.5, extra: Ln(path3([[SV.x - 3, 23, 111], [SV.x - 6, 23, 113.4]]), { tone: "hi", free: "end" }) }); disc("service.button.ring", G.frameAlong([SV.x, 33, 111], [-1, 0, 0]), 0, 1, 3, { tone: "mid" }); disc("service.button", G.frameAlong([SV.x - 1, 33, 111], [-1, 0, 0]), 0, 1.6, 2.1, { tone: "hi" }); disc("service.pot", G.frameAlong([SV.x, 44, 111], [-1, 0, 0]), 0, 1.6, 2.6, { tone: "mid" }); { const KF = G.frameAlong([SV.x - 1.6, 44, 111], [-1, 0, 0]); disc("service.knob", KF, 0, 2.6, 2.2, { tone: "hi" }, { extra: Faded(G.ribsOf(KF, 0, 2.6, 2.2, 24, P, { fade: [0.1, 0.55], seams: true }), { tone: "lo" }) + Ln(path3([[SV.x - 4.25, 44, 111], [SV.x - 4.25, 45.6, 112.2]]), { tone: "hi", free: "end" }) }); } disc("cord.grip", G.frameAlong([-30, 4, 22], [0, 1, 0]), 0, 2, 2.6, { tone: "mid" }); box("outlet", [-40, 4, 330], [-10, 8, 338], { tone: "mid" }, { extra: Dots([-34, -25, -16].map((x) => at([x, 8, 334])), { size: 0.5, tone: "lo" }) }); put("back.vents", [20, 4.1, 300], Ln(Array.from({ length: 5 }, (_, i) => path3([[8 + i * 9, 4.05, 290], [13 + i * 9, 4.05, 290], [13 + i * 9, 4.05, 314], [8 + i * 9, 4.05, 314]], true)).join(""), { tone: "faint" }), [record(A.box([8, 4, 290], [50, 4.1, 314], { name: "back.vents" }))], { bias: 0.1 }); const PLUG = { x0: -55, x1: -43, y0: 147.2, y1: 150.4, z0: 173.2, z1: 176.8 }; box("loom.plug", [PLUG.x0, PLUG.y0, PLUG.z0], [PLUG.x1, PLUG.y1, PLUG.z1], { tone: "mid" }, { r: 0.4 }); const plugTop = 192.1 - (148 - 135.24) * ((192.1 - 181.1) / (177.24 - 135.24)); box("loom.plug.bracket", [-51, 148, PLUG.z1], [-47.6, 149, plugTop], { tone: "lo" }); cable("loom", [[PLUG.x1, 148.8, 175], [46, 148.8, 175], [52, 146, 168], [52, 146, 146], [52, 20, 146], [28, 7.8, 146], plugAt(146)], 1.3, { tone: "mid", bend: 6, shells: [false, true], rings: { pitch: 1.1, twist: 0.8, cross: true, fade: [0.1, 0.55] } }); const LANES = { up: [-49, 175.8], left: [-53.6, 175], right: [-44.4, 175], down: [-50.8, 174.2] }; STICK_DATA.switches.forEach((sw) => { const tab = G.add3(sw.c, G.mul3(CPN, -2)); const [x, z] = LANES[sw.id]; const route = sw.id === "down" ? [tab, [tab[0], tab[1], z], [x, tab[1] - 3, z], [x, PLUG.y1, z]] : [tab, [tab[0], tab[1], z], [x, PLUG.y1, z]]; cable(`wire.stick.${sw.id}`, route, 0.25, { tone: "lo", bend: 1.2 }); }); const SWX = (SWITCH.x0 + SWITCH.x1) / 2; cable("wire.coin", [[SWX + 0.9, SW_Y, SWITCH.z0], [SWX + 0.9, SW_Y, 12.6], [50, SW_Y, 12.6], [50, 66, 12.6], [50, 66, 128], [50, 20, 128], [28, 7.8, 128], plugAt(128)], 0.5, { tone: "mid", bend: 3, shells: [false, true] }); cable("wire.meter", [[METER.x0 + 3, METER.y0 + 5, METER.z1], [METER.x0 + 3, METER.y0 + 5, 40], [SWX - 0.9, SW_Y - 1, 52], [SWX - 0.9, SW_Y, SWITCH.z0]], 0.4, { tone: "lo", bend: 3 }); cable("cable.power", [[-1, 43, 12.4], [-1, 50, 12.4], [44, 50, 12.4], [54, 62, 12.4], [54, 62, 136], [54, 20, 136], [28, 7.8, 136], plugAt(136)], 0.7, { tone: "mid", bend: 5, shells: [false, true] }); cable("wire.service", [[SV.x, 30, SV.z0 + 1.6], [56.6, 30, SV.z0 + 1.6], [56.6, 13, SV.z0 + 1.6], [56.6, 13, 141.4], [30, 7.8, 141.4], plugAt(141.4)], 0.4, { tone: "lo", bend: 3, shells: [false, true] }); cable("cable.mains", [[PW.x - 6, 26, 45.5], [46, 26, 45.5], [46, 26, 15], [30, 26, 15]], 0.6, { tone: "lo", bend: 4 }); cable("cord.ac", [[-30, 6, 22], [-30, 13, 22]], 0.9, { tone: "mid", bend: 3 }); const SPK_BACK = G.add3(SPK_C, G.mul3(SPK_N, 3.8)); cable("cable.speaker", [SPK_BACK, G.add3(SPK_BACK, G.mul3(SPK_N, 0.6)), [22, 104, 316.6], [22, 7.8, 316.6], [22, 7.8, 158], plugAt(158)], 0.4, { tone: "lo", bend: 3 }); const VPLUG = chPoint(59, 39, 3); cable("cable.video", [[px(9), 7.9, PCB.z1 + 2.4], [px(9), 7.9, 184], [-52, 36, 192], [-52, VPLUG[1], VPLUG[2]], VPLUG], 0.6, { tone: "mid", bend: 5 }); const flyTop = chPoint(51, 18, 4); const capTop = G.add3(anodeAt, G.mul3(anodeN, 2.2)); cable("lead.anode", [flyTop, G.add3(flyTop, G.mul3(bd, -6)), G.add3(capTop, G.mul3(anodeN, 6)), capTop], 0.8, { tone: "hi", bend: 5 }); const NPLUG = chPoint(59.5, 20.5, 3); cable("cable.neck", [monPoint(-4, 4, 91), monPoint(-4, 4, 94), monPoint(-30, 16, 94), G.add3(NPLUG, [-5, 0, 0]), NPLUG], 0.45, { tone: "lo", bend: 3 }); const OPEN = BEZEL_OPEN; const FACE_OFF = -5; const bezelPt = (u, w, off = 0) => G.add3(G.add3(G.add3(C3, [u, 0, 0]), G.mul3(bd, w)), G.mul3(NB, off)); const bezelMatrix = (off) => planeMatrix(bezelPt(0, 0, off), [1, 0, 0], bd); const roundRect = (u0, u1, w0, w1, r, steps = 5) => k.roundedPlan({ x: u0, y: w0, w: u1 - u0, d: w1 - w0, r }, steps); const openRing = roundRect(-OPEN.u, OPEN.u, -OPEN.w, OPEN.w, OPEN.r); const flat = (ring) => `M${ring.map(([u, w]) => `${f2(u)} ${f2(w)}`).join("L")}Z`; const HALF_LEN = 57; const bezelFace = `M-${XI} ${-HALF_LEN}H${XI}V${HALF_LEN}H-${XI}Z` + flat([...openRing].reverse()); const recess = []; { const ring = openRing; const n = ring.length; for (let i = 0; i < n; i++) { const [a, b] = [ring[i], ring[(i + 1) % n]]; const mid = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2]; const inward = G.unit3(G.add3(G.mul3([1, 0, 0], -mid[0]), G.mul3(bd, -mid[1]))); const along = G.unit3(G.add3(G.mul3([1, 0, 0], b[0] - a[0]), G.mul3(bd, b[1] - a[1]))); let normal = G.cross3(along, NB); if (G.dot3(normal, inward) < 0) normal = G.mul3(normal, -1); if (G.dot3(normal, V) <= 0) continue; const quad = [bezelPt(a[0], a[1], -1), bezelPt(b[0], b[1], -1), bezelPt(b[0], b[1], FACE_OFF), bezelPt(a[0], a[1], FACE_OFF)]; recess.push({ tone: G.toneOf(normal, P), d: path3(quad, true) }); } } const openClip = path3(openRing.map(([u, w]) => bezelPt(u, w, -1)), true); const faceClip = path3(roundRect(-33, 33, -41, 41, 7).map(([u, w]) => bezelPt(u, w, FACE_OFF)), true); const screenSvg = SCREEN.svg(); const bezelItem = [ ``, ``, ``, ``, `${screenSvg}`, ...recess.map((q) => ``), ``, ``, ``, ``, ].join(""); const bezelSection = [[0, -HALF_LEN], [0, HALF_LEN], [-1.6, HALF_LEN], [-1.6, -HALF_LEN]]; const BZF = G.frameOf(bezelPt(0, 0, 0), [1, 0, 0], NB, bd); { const shape = record(A.prism(BZF, [[-1.6, -HALF_LEN], [0, -HALF_LEN], [0, HALF_LEN], [-1.6, HALF_LEN]], -XI, XI, { name: "bezel" })); const glassEdge = S(prismPaths(BZF, bezelSection, -XI, XI), { tone: "lo", flat: true }); put("bezel", bezelPt(0, 0, 0), `${glassEdge}${bezelItem}`, [shape], { bias: 1 }); } A.settle(R, P); R.items.sort((a, b) => a.key - b.key); const indexOf = (name) => R.items.findIndex((item) => item.name === name); const slots = new Map(); slots.set(Math.max(indexOf("chute.floor"), indexOf("chute.far")), `${Ln(path3([WIRE.from, G.add3(WIRE.from, [WIRE.length, 0, 0])]), { tone: "hi", free: "end" })}`); slots.set(Math.max(indexOf("cash.floor"), indexOf("cash.back"), indexOf("cash.far")), ``); const groups = R.items.map((item, index) => `${item.svg}${slots.get(index) ?? ""}`); const trayF = G.frameOf([TRAY.x, TRAY.y, 0], [0, 0, 1], [1, 0, 0], [0, 1, 0]); const tray = S(G.lathe([[0, 0], [0, 9], [1.6, 9], [1.6, 7.6], [0.8, 7.2]], trayF, P, { steps: 48 }), { tone: "lo" }); const stack = Array.from({ length: STACK }, (_, i) => `${PARTS.coin([TRAY.x, TRAY.y, stackTop(i) + 0.2], [0, 0, 1], 0, { lit: false })}`).join(""); const LABEL_TEXT = "An upright arcade cabinet on a bench with its left side panel off: a CRT turned on its side behind the tilted glass, a marquee lamp and speaker above, a control panel with a joystick and four buttons whose microswitches hang below it, a coin door with two coin mechs, a coin switch, a meter and a cash box, the game board on the far wall, and the power supply on the floor. A stack of quarters sits on a tray on the bench."; const svg = k.figureSvg({ width: W, height: H, label: LABEL_TEXT, body: [...back, `${tray}${stack}`, `${groups.join("")}`, ``, ``], }); const DATA = { P, V, stick: STICK_DATA, tray: { x: TRAY.x, y: TRAY.y, top: stackTop(STACK - 1) + 0.2, step: COIN_STEP, count: STACK }, slot: { x: ENTRIES[0], y: FY + 3.8, z: (SLOT_Z[0] + SLOT_Z[1]) / 2 }, mech: MECH(ENTRIES[0]), chute: { ...CHUTE, slope: CHUTE.slope }, wire: WIRE, box: BOX, meterFace: METER_FACE, screen: { off: FACE_OFF }, routes: Object.fromEntries(["wire.coin", "cable.video", "cable.power", "loom"].map((name) => [name, R.routes.find((r) => r.name === name).points.map((p) => at(p).map(f2))])), meterMatrix: planeMatrix(METER_FACE.o, METER_FACE.ex, METER_FACE.ey), }; const CSS = readFileSync(join(HERE, "arcade-cabinet.css"), "utf8"); const latheSource = readFileSync(join(HERE, "..", "..", "kit", "lathe.mjs"), "utf8") .replace(/^import .*$/m, "") .replace(/^export /gm, ""); const latheScript = `const G = (() => {${latheSource}\nreturn { viewOf, scaleOf, frameAlong, frameOf, pointOf, disc, sphereOf, prismOf, circleOf, arcOf, dot3, add3, sub3, mul3, unit3, cross3, len3, lightOf, toneOf, radialOf };})();\n`; const partsScript = readFileSync(join(HERE, "parts.mjs"), "utf8").replace(/^export /gm, ""); const screenScript = readFileSync(join(HERE, "screen.mjs"), "utf8").replace(/^export /gm, ""); const LIVE = readFileSync(join(HERE, "live.js"), "utf8").replace("__DATA__", JSON.stringify(DATA)); const body = `` + k.plateHtml({ fig: "Fig 4", title: "Upright cabinet, side off", hint: "C or click the quarters · ← → · space", readout: "off · 0 credits", keys: [ { mark: "lit", label: "The picture: drawn in the plane of the CRT behind the tilted glass" }, { mark: "raised", label: "Coin path: slot, mech, switch wire, meter, cash box" }, { mark: "edge", label: "Harness from the joystick, buttons and coin switch to the board's edge connector" }, ], caption: "An upright cabinet in the style of 1981, 178 cm tall, with the left side panel off. Drop a quarter (24.26 mm) in the left slot: the mech checks it and lets it fall 27 cm past the coin-switch wire into the open cash box. The switch pulses the meter and the board's coin line, and on this machine it also latches the power relay, so the first coin wakes the cabinet: the marquee strikes, the CRT's heater warms for about two seconds, the board runs its RAM and ROM self-test and the attract mode starts. The monitor lies on its side for a vertical game, 224 × 288 pixels on a 15.734 kHz raster, so its scan lines run up and down the glass and it collapses to a vertical line when switched off. Move the stick to see the actuator close a microswitch under the panel.", body: `
${svg}
`, }); const page = k.pageHtml({ title: "Arcade cabinet", theme: THEME, body, script: kitScript() + latheScript + partsScript + screenScript + LIVE, width: 650 }); const name = THEME === "light" ? "arcade-cabinet-light.html" : "arcade-cabinet.html"; writeFileSync(join(HERE, name), page); console.log("wrote", name, `${(page.length / 1024).toFixed(0)} KB`, `${R.items.length} items`, `scale ${KS.toFixed(3)}`, `${CABLES.length} cables`); A.auditOrExit(R, P, {}); ``` ## examples/arcade-cabinet/live.js ```js const D = __DATA__; const P = D.P; const K = { iso, pathOf, solidSvg, lineSvg, dotsSvg }; const PARTS = makeParts(K, G, P, { stick: D.stick }); const stage = document.querySelector(".iso-stage"); const svg = stage.querySelector("svg"); const $ = (sel) => svg.querySelector(sel); const $$ = (sel) => [...svg.querySelectorAll(sel)]; const at = (p) => iso(p, P); const readout = document.querySelector("[data-readout]"); const status = document.querySelector("[data-status]"); const still = matchMedia("(prefers-reduced-motion: reduce)"); const el = { upper: $('[data-part="stick-upper"]'), lower: $('[data-part="stick-lower"]'), wire: $('[data-part="wire"]'), fall: $('[data-part="coin-fall"]'), chute: $('[data-part="coin-chute"]'), fly: $('[data-part="coin-fly"]'), pile: $('[data-part="pile"]'), screen: $('[data-part="screen"]'), raster: $('[data-part="raster"]'), dot: $('[data-part="dot"]'), test: $('[data-mode="test"]'), attract: $('[data-mode="attract"]'), steps: $$("[data-step]"), formation: $('[data-part="formation"]'), aliens: $$("[data-alien]"), ship: $('[data-part="ship"]'), shot: $('[data-part="shot"]'), boom: $('[data-part="boom"]'), score: $('[data-part="score"]'), insert: $('[data-part="insert"]'), start: $('[data-part="start"]'), credit: $('[data-part="credit"]'), meter: $('[data-part="meter"]'), glass: $('[data-part="glass"]'), stack: $$("[data-stack]"), fire: $('[data-button="fire"]'), p1: $('[data-button="p1"]'), lamps: $$(".ac-lamp"), leds: $$(".ac-led"), marquee: $$('[data-name="marquee.tube"], [data-name="marquee.plexi"], .ac-marquee'), }; const routes = {}; for (const g of $$("[data-route]")) (routes[g.dataset.route] ??= []).push(g); for (const list of Object.values(routes)) list.sort((a, b) => a.dataset.chunk - b.dataset.chunk); const smooth = (a, b, x) => { const t = Math.min(1, Math.max(0, (x - a) / (b - a))); return t * t * (3 - 2 * t); }; const lerp3 = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t]; const norm = (v) => { const l = Math.hypot(v[0], v[1], v[2]) || 1; return [v[0] / l, v[1] / l, v[2] / l]; }; const GRAV = 1962; const FLY = 0.9; const INSERT = 0.34; const MECH = 0.42; const DROP_FROM = D.mech.z0 + PARTS.COIN_R; const FLOOR = D.box.z0 + 0.7 + PARTS.COIN_T / 2; const HEATER = 2.2; const TEST = [1.0, 1.7, 2.3, 2.8]; const ATTRACT_AT = 3.6; const HKHZ = 15.734; const state = { power: 0, powerAt: -99, offAt: -99, credits: 0, meter: 4127, coins: [], pile: 0, stack: D.tray.count, stick: { x: 0, target: 0 }, fire: 0, fireHeld: 0, pulses: [], wire: { x: 0, v: 0, push: 0 }, game: null, clock: 0, }; function newGame() { return { step: 0, dir: 1, offset: 0, frame: 0, alive: D_FORMATION.map(() => true), shipX: 112, shot: null, boom: null, score: 0, cool: 1.2, userAt: -99, respawn: 0 }; } const D_FORMATION = SCREEN.FORMATION; const STACK_AT = (n) => [D.tray.x, D.tray.y, 1.6 + (n - 1) * D.tray.step + 0.2]; const SLOT_OUT = [D.slot.x, D.slot.y + 9, D.slot.z]; const SLOT_IN = [D.slot.x, D.slot.y - 12, D.slot.z]; const CH = D.chute; const SN = 0.5; const CS = Math.sqrt(3) / 2; const chuteZ = (y) => CH.z0 - CH.slope * (CH.y0 - y); const ROLL_FROM = D.mech.y0; const ROLL_A = (2 / 3) * GRAV * SN; const ROLL_LEN = (ROLL_FROM - CH.y1) / CS; const T_ROLL = Math.sqrt((2 * ROLL_LEN) / ROLL_A); const V_END = ROLL_A * T_ROLL; const END = [D.slot.x, CH.y1 - PARTS.COIN_R * SN, chuteZ(CH.y1) + PARTS.COIN_R * CS]; const EDGE_Z = FLOOR + PARTS.COIN_R; const T_DROP = (-V_END * SN + Math.sqrt((V_END * SN) ** 2 + 2 * GRAV * (END[2] - EDGE_Z))) / GRAV; const LAND_Y = END[1] - V_END * CS * T_DROP; function insertCoin() { if (state.stack <= 0) state.stack = D.tray.count; const from = STACK_AT(state.stack); state.stack--; showStack(); state.coins.push({ t: 0, from, landAt: pileSpot(state.pile + state.coins.length), switched: false, landed: false }); run(); } function pileSpot(i) { const a = i * 2.39996; const r = Math.min(5, 1.1 * Math.sqrt(i)); const lo = D.box.y0 + 0.7 + PARTS.COIN_R + 0.3; const hi = D.box.y1 - 0.7 - PARTS.COIN_R - 0.3; return [D.slot.x + Math.cos(a) * r * 1.2, Math.max(lo, Math.min(hi, LAND_Y + Math.sin(a) * r)), FLOOR + Math.floor(i / 12) * PARTS.COIN_T]; } function coinPose(c) { let t = c.t; if (t < FLY) { const s = smooth(0, 1, t / FLY); const mid = [(c.from[0] + SLOT_OUT[0]) / 2, (c.from[1] + SLOT_OUT[1]) / 2, Math.max(c.from[2], SLOT_OUT[2]) + 26]; const a = lerp3(c.from, mid, s); const b = lerp3(mid, SLOT_OUT, s); const p = lerp3(a, b, s); const turn = smooth(0.15, 0.85, t / FLY); return { layer: "fly", p, axis: norm(lerp3([0, 0, 1], [1, 0, 0], turn)), spin: s * 7 }; } t -= FLY; if (t < INSERT) return { layer: "fly", clip: "door", p: lerp3(SLOT_OUT, SLOT_IN, smooth(0, 1, t / INSERT)), axis: [1, 0, 0], spin: 7 }; t -= INSERT; if (t < MECH) return { layer: "none", stage: "mech" }; t -= MECH; if (t < T_ROLL) { const s = 0.5 * ROLL_A * t * t; const y = ROLL_FROM - s * CS; const p = [D.slot.x, y - PARTS.COIN_R * SN, chuteZ(y) + PARTS.COIN_R * CS]; return { layer: "chute", clip: p[1] + PARTS.COIN_R > D.mech.y0 ? "mech" : null, p, axis: [1, 0, 0], spin: 7 + s / PARTS.COIN_R, stage: "roll" }; } t -= T_ROLL; const land = c.landAt; if (t < T_DROP) { const share = t / T_DROP; const p = [END[0] + (land[0] - END[0]) * share, END[1] - V_END * CS * t, END[2] - V_END * SN * t - 0.5 * GRAV * t * t]; p[1] = END[1] + (land[1] - END[1]) * share; return { layer: "fall", p, axis: [1, 0, 0], spin: 7 + ROLL_LEN / PARTS.COIN_R + t * 20, stage: "drop" }; } const tl = t - T_DROP; const tip = smooth(0, 0.16, tl); const lie = [land[0], land[1], land[2] + PARTS.COIN_R * (1 - tip)]; return { layer: "fall", p: lie, axis: norm(lerp3([1, 0, 0], [0, 0, 1], tip)), spin: 7, settled: tl > 0.22, stage: "drop" }; } const CLIP_DOOR = (() => { const a = at([D.slot.x, D.slot.y, -100]); const b = at([D.slot.x, D.slot.y, 300]); return `M${a[0]} ${a[1]}L${b[0]} ${b[1]}L${b[0] + 400} ${b[1]}L${a[0] + 400} ${a[1]}Z`; })(); const CLIP_MECH = (() => { const a = at([D.slot.x, D.mech.y0, -100]); const b = at([D.slot.x, D.mech.y0, 300]); return `M${a[0]} ${a[1]}L${b[0]} ${b[1]}L${b[0] - 400} ${b[1]}L${a[0] - 400} ${a[1]}Z`; })(); svg.querySelector("defs") || svg.insertAdjacentHTML("afterbegin", ""); svg.querySelector("defs").insertAdjacentHTML("beforeend", ``); function drawCoins() { const out = { fly: "", chute: "", fall: "" }; for (const c of state.coins) { const pose = coinPose(c); if (pose.layer === "none") continue; const coin = PARTS.coin(pose.p, pose.axis, pose.spin); out[pose.layer] += pose.clip ? `${coin}` : coin; } for (const key of ["fly", "chute", "fall"]) if (el[key].innerHTML !== out[key]) el[key].innerHTML = out[key]; } function showStack() { el.stack.forEach((g, i) => (g.style.display = i < state.stack ? "" : "none")); } function drawPile() { let out = ""; for (let i = 0; i < state.pile; i++) out += PARTS.coin(pileSpot(i), [0, 0, 1], i * 1.7, { lit: false }); el.pile.innerHTML = out; } function wireStep(dt, push) { const w = state.wire; if (push > w.x) { w.x = push; w.v = 0; } else { const k = 900; const c = 9; for (let i = 0; i < 4; i++) { const h = dt / 4; w.v += (-k * w.x - c * w.v) * h; w.x += w.v * h; } if (Math.abs(w.x) < 1e-3 && Math.abs(w.v) < 1e-2) (w.x = 0), (w.v = 0); } const from = D.wire.from; const angle = Math.atan2(w.x, D.wire.length); const tip = [from[0] + D.wire.length * Math.cos(angle), from[1], from[2] - D.wire.length * Math.sin(angle)]; el.wire.innerHTML = lineSvg(pathOf([at(from), at(tip)]), { tone: w.x > 0.3 ? "lit" : "hi", free: "end" }); return w.x !== 0; } function wirePush() { let push = 0; const wz = D.wire.from[2]; const wy = D.wire.from[1]; for (const c of state.coins) { const pose = coinPose(c); if (pose.stage !== "roll") continue; const dy = wy - pose.p[1]; if (Math.abs(dy) >= PARTS.COIN_R) continue; const low = pose.p[2] - Math.sqrt(PARTS.COIN_R ** 2 - dy * dy); push = Math.max(push, Math.min(1.2, wz - low)); } return Math.max(0, push) * (D.wire.length / (D.slot.x - D.wire.from[0])); } function pulse(route, delay = 0, seconds = 0.5) { if (!routes[route]) return; state.pulses.push({ route, t: -delay, seconds }); } function drawPulses(dt) { const hot = new Set(); state.pulses = state.pulses.filter((p) => { p.t += dt; if (p.t < 0) return true; const list = routes[p.route]; const at = (p.t / p.seconds) * (list.length + 1); list.forEach((g, i) => Math.abs(i - at + 0.5) < 1.1 && hot.add(g)); return p.t < p.seconds * 1.25; }); for (const list of Object.values(routes)) for (const g of list) g.toggleAttribute("data-hot", hot.has(g)); return state.pulses.length > 0; } function setPower(on) { if (!!on === !!state.power) return; state.power = on ? 1 : 0; if (on) { state.powerAt = state.clock; state.game = newGame(); } else { state.offAt = state.clock; state.credits = 0; } el.leds.forEach((g) => g.toggleAttribute("data-on", !!on)); el.lamps.forEach((g) => g.toggleAttribute("data-on", !!on)); status.textContent = on ? "Coin accepted. The cabinet wakes and the CRT warms up." : "Switched off."; run(); } function marqueeLevel(t) { if (!state.power) return 0; if (t < 0.06) return 0; if (t < 0.12) return 1; if (t < 0.24) return 0; if (t < 0.3) return 1; if (t < 0.42) return 0.2; return 1; } function picture() { const t = state.clock - state.powerAt; const off = state.clock - state.offAt; let bright = 0; let sx = 1; let sy = 1; let dot = 0; let mode = "none"; if (state.power) { bright = smooth(0.9, HEATER + 0.4, t); mode = t < ATTRACT_AT ? (t > 0.9 ? "test" : "none") : t < ATTRACT_AT + 0.08 ? "none" : "attract"; } else if (off < 1.2 && state.offAt > 0) { bright = 1; mode = state.lastMode; if (off < 0.09) sx = 1 - 0.99 * smooth(0, 0.09, off); else if (off < 0.26) (sx = 0.01), (sy = 1 - smooth(0.09, 0.26, off)); else (sx = 0), (sy = 0); dot = off < 0.2 ? 0 : 1 - smooth(0.26, 1.1, off); } if (state.power) state.lastMode = mode; el.raster.setAttribute("transform", `scale(${Math.max(sx, 0.001).toFixed(3)} ${Math.max(sy, 0.004).toFixed(3)})`); el.raster.style.opacity = (sx === 0 ? 0 : bright).toFixed(3); el.dot.style.opacity = dot.toFixed(3); el.test.style.display = mode === "test" ? "" : "none"; el.attract.style.display = mode === "attract" ? "" : "none"; el.steps.forEach((s, i) => (s.style.display = t > TEST[i] ? "" : "none")); el.glass.toggleAttribute("data-on", bright > 0.05 && sx > 0); const m = marqueeLevel(t); el.marquee.forEach((g) => g.toggleAttribute("data-on", m > 0.5)); return { mode, t, busy: state.power ? t < ATTRACT_AT + 0.2 : off < 1.2 }; } const SHOT_SPEED = 220; function gameStep(dt, mode) { const g = state.game; if (!g || mode !== "attract") return; g.step += dt; if (g.step > 0.32) { g.step = 0; g.offset += g.dir * 2; if (Math.abs(g.offset) >= 16) g.dir = -g.dir; g.frame = 1 - g.frame; el.formation.setAttribute("transform", `translate(${g.offset} 0)`); for (const a of el.aliens) { a.children[0].style.display = g.frame ? "none" : ""; a.children[1].style.display = g.frame ? "" : "none"; } } const user = state.clock - g.userAt < 3; if (user) g.shipX += state.stick.x * 420 * dt; else { const live = D_FORMATION.map((a, i) => (g.alive[i] ? a.x + 5 + g.offset : null)).filter((x) => x !== null); const target = live.length ? live[Math.floor((state.clock * 0.37) % live.length)] : 112; g.shipX += Math.max(-50 * dt, Math.min(50 * dt, target - g.shipX)); } g.shipX = Math.max(14, Math.min(210, g.shipX)); el.ship.setAttribute("transform", `translate(${g.shipX.toFixed(1)} ${SCREEN.SHIP_Y})`); g.cool -= dt; if (!g.shot && ((state.fire > 0 && user) || (!user && g.cool < 0))) { g.shot = { x: Math.round(g.shipX), y: SCREEN.SHIP_Y - 6 }; g.cool = 0.9 + Math.random() * 0.8; } if (g.shot) { g.shot.y -= SHOT_SPEED * dt; let hit = -1; D_FORMATION.forEach((a, i) => { if (!g.alive[i] || hit >= 0) return; const x = a.x + g.offset; if (g.shot.x >= x && g.shot.x <= x + 10 && g.shot.y <= a.y + 8 && g.shot.y + 5 >= a.y) hit = i; }); if (hit >= 0) { g.alive[hit] = false; el.aliens[hit].style.display = "none"; const a = D_FORMATION[hit]; g.boom = { x: a.x + g.offset, y: a.y, t: 0.22 }; g.score += a.kind === "eye" ? 30 : 10; el.score.setAttribute("d", SCREEN.text(String(g.score).padStart(5, "0"), 16, 20)); g.shot = null; } else if (g.shot.y < 30) g.shot = null; } el.shot.style.display = g.shot ? "" : "none"; if (g.shot) el.shot.setAttribute("transform", `translate(${g.shot.x} ${g.shot.y.toFixed(1)})`); if (g.boom) { g.boom.t -= dt; el.boom.style.display = g.boom.t > 0 ? "" : "none"; el.boom.setAttribute("transform", `translate(${g.boom.x} ${g.boom.y})`); if (g.boom.t <= 0) g.boom = null; } if (g.alive.every((a) => !a)) { g.respawn += dt; if (g.respawn > 1.2) { g.respawn = 0; g.alive = g.alive.map(() => true); el.aliens.forEach((a) => (a.style.display = "")); } } const blink = Math.floor(state.clock / 0.5) % 2 === 0; el.insert.style.display = !state.credits && blink ? "" : "none"; el.start.style.display = state.credits && blink ? "" : "none"; el.p1?.toggleAttribute("data-blink", state.credits > 0 && blink); } let creditShown = -1; function showCredit() { if (creditShown === state.credits) return; creditShown = state.credits; el.credit.setAttribute("d", SCREEN.text(`CREDIT ${Math.min(9, state.credits)}`, 120, 274)); } const TILT = 0.21; let stickShown = null; function stickStep(dt, calm) { const s = state.stick; const before = s.x; s.x = calm ? s.target : s.x + (s.target - s.x) * (1 - Math.exp(-dt / 0.05)); if (Math.abs(s.x - s.target) < 1e-3) s.x = s.target; const key = s.x.toFixed(3); if (key !== stickShown) { stickShown = key; el.upper.innerHTML = PARTS.stickUpper(s.x * TILT, 0); el.lower.innerHTML = PARTS.stickLower(s.x * TILT, 0); } return s.x !== s.target || before !== s.x; } const firePush = axisVector(P, D.stick.nc.map((v) => -v * 1.1)); function fireStep(dt) { state.fireHeld = Math.max(0, state.fireHeld - dt); const want = state.fireHeld > 0 ? 1 : 0; state.fire += (want - state.fire) * (1 - Math.exp(-dt / 0.03)); if (Math.abs(want - state.fire) < 0.01) state.fire = want; el.fire.setAttribute("transform", state.fire ? `translate(${(firePush[0] * state.fire).toFixed(2)} ${(firePush[1] * state.fire).toFixed(2)})` : ""); el.fire.toggleAttribute("data-down", state.fire > 0.5); return state.fire !== want || state.fireHeld > 0; } let phase = ""; function say(mode, t) { let text; const coin = state.coins.find((c) => !c.landed); if (coin) { const tt = coin.t; text = tt < FLY ? "coin · 24.26 mm quarter" : tt < FLY + INSERT ? "coin · into the slot" : tt < FLY + INSERT + MECH ? "mech · checking the coin" : coin.switched ? `coin switch · meter ${String(state.meter).padStart(6, "0")}` : "coin · rolling down the chute"; } else if (!state.power) text = state.clock - state.offAt < 1.2 && state.offAt > 0 ? "off · picture folds to a line" : `off · ${state.pile ? "insert another coin" : "insert coin"}`; else if (mode === "test") text = t < TEST[1] ? "self-test" : t < TEST[2] ? "self-test · RAM OK" : "self-test · RAM OK · ROM OK"; else if (mode !== "attract") text = `warming · heater ${Math.min(HEATER, t).toFixed(1)} s`; else { const dir = state.stick.target < 0 ? " · stick ←" : state.stick.target > 0 ? " · stick →" : state.fireHeld > 0 ? " · fire" : ""; text = `credit ${state.credits} · ${HKHZ} kHz${dir}`; } if (readout.textContent !== text) readout.textContent = text; const now = !state.power ? "off" : mode; if (now !== phase) { phase = now; if (now === "attract") status.textContent = `Attract mode, ${state.credits} credit${state.credits === 1 ? "" : "s"}.`; if (now === "test") status.textContent = "Self-test."; } } let frame = 0; let last = 0; let visible = false; let touring = !still.matches; let tourClock = 0; let idle = 0; const TOUR = [ [1.4, () => insertCoin()], [9.5, () => press("right", 0.5)], [10.4, () => press("left", 0.6)], [11.4, () => fireButton()], [12.6, () => press("right", 0.35)], [13.3, () => fireButton()], [15.2, () => insertCoin()], [24, () => setPower(0)], [27.5, null], ]; let tourIndex = 0; function tourStep(dt) { tourClock += dt; while (tourIndex < TOUR.length && tourClock >= TOUR[tourIndex][0]) { const action = TOUR[tourIndex][1]; tourIndex++; if (action) action(); else { tourClock = 0; tourIndex = 0; state.pile = 0; state.stack = D.tray.count; showStack(); drawPile(); } } } let releaseTimer = 0; function press(dir, seconds) { state.stick.target = dir === "left" ? -1 : 1; if (state.game) state.game.userAt = state.clock; clearTimeout(releaseTimer); releaseTimer = setTimeout(() => ((state.stick.target = 0), run()), seconds * 1000); run(); } function fireButton() { state.fireHeld = 0.16; if (state.game) state.game.userAt = state.clock; run(); } function tick(now) { const dt = last ? Math.min((now - last) / 1000, 1 / 30) : 1 / 60; last = now; const calm = still.matches; state.clock += dt; if (touring) tourStep(dt); for (const c of state.coins) { c.t += calm ? 10 : dt; const pose = coinPose(c); if (!c.switched && pose.stage === "roll" && pose.p[1] < D.wire.from[1]) { c.switched = true; state.meter++; el.meter.textContent = String(state.meter).padStart(6, "0"); pulse("wire.coin", 0, 0.45); pulse("wire.meter", 0, 0.25); if (!state.power) { setTimeout(() => { setPower(1); pulse("cable.power", 0, 0.5); pulse("cable.video", 0.5, 0.5); }, calm ? 0 : 420); } setTimeout(() => { state.credits++; showCredit(); run(); }, calm ? 0 : 450); } if (!c.landed && (pose.settled || calm)) { c.landed = true; state.pile++; drawPile(); } } state.coins = state.coins.filter((c) => !c.landed); drawCoins(); const wireBusy = wireStep(dt, wirePush()); const pulsing = drawPulses(dt); const { mode, t, busy } = picture(); gameStep(dt, mode); showCredit(); const sticking = stickStep(dt, calm); const firing = fireStep(dt); say(mode, t); const alive = touring || state.coins.length || wireBusy || pulsing || busy || sticking || firing || (state.power && !calm); frame = visible && alive ? requestAnimationFrame(tick) : 0; } function run() { if (!frame && visible) { last = 0; frame = requestAnimationFrame(tick); } } function takeOver() { if (touring) { touring = false; } clearTimeout(idle); idle = setTimeout(() => { if (still.matches) return; touring = true; tourClock = state.power ? 4 : 0; tourIndex = TOUR.findIndex(([t]) => t > tourClock); if (state.power) tourIndex = TOUR.findIndex(([t]) => t > 9); tourClock = state.power ? 9 : 0; run(); }, 12000); } new IntersectionObserver((entries) => { visible = entries[entries.length - 1].isIntersecting; if (visible) run(); }, { rootMargin: "120px 0px" }).observe(stage); stage.addEventListener("keydown", (event) => { if (event.metaKey || event.ctrlKey || event.altKey) return; const key = event.key; if (key === "c" || key === "C" || key === "5") { event.preventDefault(); takeOver(); insertCoin(); } else if (key === "ArrowLeft" || key === "ArrowRight") { event.preventDefault(); takeOver(); state.stick.target = key === "ArrowLeft" ? -1 : 1; if (state.game) state.game.userAt = state.clock; clearTimeout(releaseTimer); run(); } else if (key === " " || key === "Enter") { event.preventDefault(); takeOver(); state.fireHeld = 0.5; if (state.game) state.game.userAt = state.clock; run(); } else if (key === "Escape") { event.preventDefault(); takeOver(); setPower(0); } }); stage.addEventListener("keyup", (event) => { if (event.key === "ArrowLeft" || event.key === "ArrowRight") { state.stick.target = 0; run(); } if (event.key === " " || event.key === "Enter") state.fireHeld = Math.min(state.fireHeld, 0.06); }); svg.addEventListener("click", (event) => { const hit = event.target.closest('[data-part="tray"], [data-name^="door"]'); if (hit) { takeOver(); insertCoin(); stage.focus({ preventScroll: true }); } }); showStack(); drawPile(); showCredit(); wireStep(0, 0); picture(); say("none", 0); if (still.matches) touring = false; ``` ## examples/arcade-cabinet/parts.mjs ```js export function makeParts(k, G, P, D) { const V = G.viewOf(P); const at = (p) => k.iso(p, P); const S = (paths, style) => k.solidSvg(paths, style); const Ln = (d, style) => k.lineSvg(d, style); const rot = (v, axis, angle) => { const c = Math.cos(angle); const s = Math.sin(angle); const d = G.dot3(axis, v); const x = G.cross3(axis, v); return [v[0] * c + x[0] * s + axis[0] * d * (1 - c), v[1] * c + x[1] * s + axis[1] * d * (1 - c), v[2] * c + x[2] * s + axis[2] * d * (1 - c)]; }; const J = D.stick; const UP = J.nc; const ALONG = J.dc; const X = [1, 0, 0]; const axisOf = (tx, tv) => G.unit3(rot(rot(UP, ALONG, tx), X, -tv)); const pivot = G.add3(J.o, G.mul3(UP, J.pivot)); const depth = (p) => G.dot3(p, V); function stickUpper(tx = 0, tv = 0) { const a = axisOf(tx, tv); const F = G.frameAlong(pivot, a); const t = -J.pivot / G.dot3(a, UP); const cross = G.add3(pivot, G.mul3(a, t)); const W = G.frameOf(cross, UP, X, ALONG); const washer = S(G.disc(0, 0.4, 4.4, W, P, { steps: 40 }), { tone: "mid" }) + Ln(G.circleOf(W, 0.4, 1.3, P, 20), { tone: "faint" }); const shaft = S(G.disc(t + 0.4, t + 8.95, 0.85, F, P, { steps: 16 }), { tone: "mid" }); const ballAt = G.add3(pivot, G.mul3(a, t + 12.4)); const ball = S(G.sphereOf(ballAt, 3.5, P, { steps: 40 }), { tone: "hi", lit: true }); return washer + shaft + ball; } function stickLower(tx = 0, tv = 0) { const a = axisOf(tx, tv); const F = G.frameAlong(pivot, a); const parts = []; parts.push({ d: depth(G.add3(pivot, G.mul3(a, -5))), svg: S(G.disc(-9.4, -0.6, 0.85, F, P, { steps: 16 }), { tone: "mid" }) }); const act = S(G.disc(-8.6, -4.6, 2.4, F, P, { steps: 32, bevel: 0.3 }), { tone: "hi" }) + Ln(G.arcOf(F, -6.6, 2.4, P), { tone: "faint" }); parts.push({ d: depth(G.add3(pivot, G.mul3(a, -6.6))) + 0.01, svg: act }); parts.push({ d: depth(G.add3(pivot, G.mul3(a, -9.6))), svg: S(G.disc(-10, -9.4, 1.5, F, P, { steps: 20 }), { tone: "lo" }) }); const closed = switchesClosed(tx, tv); for (const sw of J.switches) { const on = closed.includes(sw.id); const body = G.frameOf(sw.c, UP, sw.out, G.cross3(UP, sw.out)); const poly = [[-0.65, -2], [0.65, -2], [0.65, 2], [-0.65, 2]]; const box = S(G.prismOf(body, poly, -1, 1, P), { tone: "mid" }); const lever0 = G.add3(sw.c, G.add3(G.mul3(sw.out, -0.65), G.mul3(G.cross3(UP, sw.out), 1.6))); const tip = G.add3(sw.c, G.add3(G.mul3(sw.out, on ? -0.85 : -1.45), G.mul3(G.cross3(UP, sw.out), -1.2))); const lever = Ln(k.pathOf([at(lever0), at(tip)]), { tone: on ? "lit" : "hi" }); const tabs = [-1.1, 0, 1.1].map((o) => G.add3(sw.c, G.add3(G.mul3(UP, -1), G.mul3(G.cross3(UP, sw.out), o)))); const tabSvg = tabs.map((p) => S(G.prismOf(G.frameOf(p, UP, sw.out, G.cross3(UP, sw.out)), [[-0.3, -0.35], [0.3, -0.35], [0.3, 0.35], [-0.3, 0.35]], -1, 0, P), { tone: "lo" })).join(""); parts.push({ d: depth(sw.c), svg: `${tabSvg}${box}${lever}` }); } parts.sort((p, q) => p.d - q.d); return parts.map((p) => p.svg).join(""); } function switchesClosed(tx, tv) { const out = []; const limit = 0.12; if (tx > limit) out.push("left"); if (tx < -limit) out.push("right"); if (tv > limit) out.push("up"); if (tv < -limit) out.push("down"); return out; } const COIN_R = 2.426; const COIN_T = 0.35; function coin(centre, axis, spin = 0, { lit = true } = {}) { const F0 = G.frameAlong(centre, axis); const F = { o: F0.o, a: F0.a, u: rot(F0.u, F0.a, spin), v: rot(F0.v, F0.a, spin) }; const face = G.dot3(F.a, V) >= 0 ? COIN_T / 2 : -COIN_T / 2; const body = S(G.disc(-COIN_T / 2, COIN_T / 2, COIN_R, F, P, { steps: 36 }), { tone: "hi", lit }); const facing = Math.abs(G.dot3(F.a, V)); let marks = ""; if (facing > 0.2) { marks += Ln(G.circleOf(F, face, COIN_R - 0.35, P, 28), { tone: "lo" }); const p0 = G.pointOf(F, face, 0.3, 0); const p1 = G.pointOf(F, face, 1.5, 0); marks += Ln(k.pathOf([at(p0), at(p1)]), { tone: "lo", free: true }); } return body + marks; } return { stickUpper, stickLower, switchesClosed, coin, axisOf, COIN_R, COIN_T }; } ``` ## examples/arcade-cabinet/screen.mjs ```js export const SCREEN = (() => { const W = 224; const H = 288; const FONT = { A: ["01110", "10001", "10001", "11111", "10001", "10001", "10001"], C: ["01110", "10001", "10000", "10000", "10000", "10001", "01110"], D: ["11110", "10001", "10001", "10001", "10001", "10001", "11110"], E: ["11111", "10000", "10000", "11110", "10000", "10000", "11111"], F: ["11111", "10000", "10000", "11110", "10000", "10000", "10000"], H: ["10001", "10001", "10001", "11111", "10001", "10001", "10001"], I: ["01110", "00100", "00100", "00100", "00100", "00100", "01110"], K: ["10001", "10010", "10100", "11000", "10100", "10010", "10001"], L: ["10000", "10000", "10000", "10000", "10000", "10000", "11111"], M: ["10001", "11011", "10101", "10101", "10001", "10001", "10001"], N: ["10001", "11001", "10101", "10011", "10001", "10001", "10001"], O: ["01110", "10001", "10001", "10001", "10001", "10001", "01110"], P: ["11110", "10001", "10001", "11110", "10000", "10000", "10000"], R: ["11110", "10001", "10001", "11110", "10100", "10010", "10001"], S: ["01111", "10000", "10000", "01110", "00001", "00001", "11110"], T: ["11111", "00100", "00100", "00100", "00100", "00100", "00100"], U: ["10001", "10001", "10001", "10001", "10001", "10001", "01110"], Y: ["10001", "10001", "01010", "00100", "00100", "00100", "00100"], Z: ["11111", "00001", "00010", "00100", "01000", "10000", "11111"], 0: ["01110", "10011", "10101", "10101", "10101", "11001", "01110"], 1: ["00100", "01100", "00100", "00100", "00100", "00100", "01110"], 2: ["01110", "10001", "00001", "00110", "01000", "10000", "11111"], 3: ["11111", "00010", "00100", "00010", "00001", "10001", "01110"], 4: ["00010", "00110", "01010", "10010", "11111", "00010", "00010"], 5: ["11111", "10000", "11110", "00001", "00001", "10001", "01110"], 6: ["00110", "01000", "10000", "11110", "10001", "10001", "01110"], 7: ["11111", "00001", "00010", "00100", "01000", "01000", "01000"], 8: ["01110", "10001", "10001", "01110", "10001", "10001", "01110"], 9: ["01110", "10001", "10001", "01111", "00001", "00010", "01100"], "-": ["00000", "00000", "00000", "11111", "00000", "00000", "00000"], ".": ["00000", "00000", "00000", "00000", "00000", "01100", "01100"], " ": ["00000", "00000", "00000", "00000", "00000", "00000", "00000"], }; const SPRITES = { jellyA: ["0001111000", "0011111100", "0110110110", "1111111111", "1111111111", "0010110100", "0100000010", "0010000100"], jellyB: ["0001111000", "0011111100", "0110110110", "1111111111", "1111111111", "0010110100", "0001001000", "0010000100"], eyeA: ["0011110000", "0111111000", "1101101100", "1111111100", "0110011000", "1100001100"].map((r) => r.slice(0, 8)), eyeB: ["0011110000", "0111111000", "1101101100", "1111111100", "0110011000", "0011110000"].map((r) => r.slice(0, 8)), ship: ["00000100000", "00001110000", "00001110000", "01111111110", "11111111111", "11011111011", "10000100001"], boom: ["1000100010", "0100100100", "0010001000", "1100000011", "0010001000", "0100100100", "1000100010"], }; const n = (v) => Math.round(v * 100) / 100; function bitmap(rows, x, y, s = 1) { let d = ""; rows.forEach((row, r) => { let c = 0; while (c < row.length) { if (row[c] === "1") { let e = c; while (e < row.length && row[e] === "1") e++; d += `M${n(x + c * s)} ${n(y + r * s)}h${n((e - c) * s)}v${n(s)}h${n(-(e - c) * s)}z`; c = e; } else c++; } }); return d; } function text(str, x, y, s = 1, adv = 8) { return [...String(str)].map((ch, i) => bitmap(FONT[ch] ?? FONT[" "], x + i * adv * s, y, s)).join(""); } const centred = (str, s = 1, adv = 8) => n((W - (String(str).length * adv - (adv - 5)) * s) / 2); const FORMATION = []; for (let row = 0; row < 3; row++) for (let col = 0; col < 6; col++) FORMATION.push({ row, col, x: 34 + col * 26, y: 92 + row * 18, kind: row === 0 ? "eye" : "jelly" }); const SHIP_Y = 250; const px = (d, extra = "") => ``; function svg() { const out = []; const hatch = []; for (let x = 0; x <= W; x += 16) hatch.push(`M${Math.min(x, W - 1)} 0h1v${H}h-1z`); for (let y = 0; y <= H; y += 16) hatch.push(`M0 ${Math.min(y, H - 1)}h${W}v1h${-W}z`); out.push(``); out.push(``); out.push(px(text("SELF TEST", centred("SELF TEST"), 56), ` data-step="0"`)); out.push(px(text("RAM OK", 56, 104), ` data-step="1"`)); out.push(px(text("ROM OK", 56, 120), ` data-step="2"`)); out.push(px(text("Z80 3.072 MHZ", 56, 152), ` data-step="3"`)); out.push(``); out.push(``); out.push(px(text("1UP", 24, 8) + text("HI-SCORE", 80, 8) + text("2UP", 176, 8))); out.push(px(text("00000", 16, 20), ` data-part="score"`)); out.push(px(text("12500", 92, 20))); out.push(px(text("ANATOMY", centred("ANATOMY", 2), 44, 2))); out.push(``); FORMATION.forEach((a, i) => { const [fa, fb] = a.kind === "eye" ? [SPRITES.eyeA, SPRITES.eyeB] : [SPRITES.jellyA, SPRITES.jellyB]; const ox = a.kind === "eye" ? 1 : 0; out.push(`${px(bitmap(fa, a.x + ox, a.y), ' data-frame="a"')}${px(bitmap(fb, a.x + ox, a.y), ' data-frame="b" style="display:none"')}`); }); out.push(``); out.push(px(bitmap(SPRITES.boom, 0, 0), ` data-part="boom" style="display:none"`)); out.push(px("M0 0h1v5h-1z", ` data-part="shot" style="display:none"`)); out.push(px(bitmap(SPRITES.ship, -5.5, 0), ` data-part="ship" transform="translate(112 ${SHIP_Y})"`)); out.push(px(`M8 ${SHIP_Y + 12}h${W - 16}v1h${-(W - 16)}z`)); out.push(px(text("INSERT COIN", centred("INSERT COIN"), 200), ` data-part="insert"`)); out.push(px(text("PUSH START", centred("PUSH START"), 200), ` data-part="start" style="display:none"`)); out.push(px(text("CREDIT 0", 120, 274), ` data-part="credit"`)); out.push(``); const k = 58 / W; const scan = []; for (let i = 0; i <= 112; i++) scan.push(`M${n(-29 + i * 0.518)} -37.3V37.3`); return [ `${out.join("")}`, ``, ``, ].join(""); } return { W, H, FONT, SPRITES, FORMATION, SHIP_Y, bitmap, text, centred, svg }; })(); ``` ## examples/desk-computer ``` ``` ## examples/desk-computer/build.mjs ```js import { writeFileSync } from "node:fs"; import { dirname, join } from "node:path"; import { fileURLToPath } from "node:url"; import * as k from "../../kit/iso-kit.mjs"; import { kitScript } from "../../scripts/inline-kit.mjs"; const HERE = dirname(fileURLToPath(import.meta.url)); const theme = process.argv.includes("--light") ? "light" : "dark"; const WIDTH = 600; const HEIGHT = 440; const PLATE = { x: -100, y: -84, w: 210, d: 242, r: 10 }; const PLATE_H = 10; const FOOT_H = 5; const CASE = { x: -62, y: -62, w: 124, d: 118, r: 8 }; const FRONT = CASE.y + CASE.d; const SIDE = CASE.x + CASE.w; const PLINTH_H = 5; const TOP = 170; const SEAM = FRONT - 12; const BEZEL = { x0: -48, x1: 48, z0: 68, z1: 158, r: 6, depth: 1.6 }; const CRT = { x0: -40, x1: 40, z0: 77, z1: 150, r: 8, depth: 5 }; const GLASS_Y = FRONT - BEZEL.depth - CRT.depth; const CRT_MID = (CRT.z0 + CRT.z1) / 2; const SLOT = { x0: 8, x1: 46, z0: 45, z1: 50.5, r: 2.4, depth: 4 }; const KB = { x: -76, y: 84, w: 152, d: 58, r: 4 }; const KB_Z = 1.6; const KB_TOP = 8.6; const U = 9.2; const KEYS_X = -U * 7.5; const KEYS_Y = 88.5; const ROWS = [ [["`", 1], ["1", 1], ["2", 1], ["3", 1], ["4", 1], ["5", 1], ["6", 1], ["7", 1], ["8", 1], ["9", 1], ["0", 1], ["-", 1], ["=", 1], ["Backspace", 2]], [["Tab", 1.5], ["q", 1], ["w", 1], ["e", 1], ["r", 1], ["t", 1], ["y", 1], ["u", 1], ["i", 1], ["o", 1], ["p", 1], ["[", 1], ["]", 1], ["\\", 1.5]], [["CapsLock", 1.75], ["a", 1], ["s", 1], ["d", 1], ["f", 1], ["g", 1], ["h", 1], ["j", 1], ["k", 1], ["l", 1], [";", 1], ["'", 1], ["Enter", 2.25]], [["Shift", 2.25], ["z", 1], ["x", 1], ["c", 1], ["v", 1], ["b", 1], ["n", 1], ["m", 1], [",", 1], [".", 1], ["/", 1], ["ShiftRight", 2.75]], [["Alt", 1.5], ["Meta", 1.5], [" ", 9], ["NumpadEnter", 1.5], ["AltRight", 1.5]], ]; const ROW_H = [5.6, 5.2, 4.8, 4.4, 4]; const PORT = { y: 28, z: 9 }; const COIL = { x: 80, z: 3.6, r: 3.2, from: 44, to: 84, turns: 17 }; const P = k.fitProjection( [...k.boxCorners(PLATE, -PLATE_H - FOOT_H, 0), ...k.boxCorners(CASE, 0, TOP)], WIDTH, HEIGHT, { pad: 30, azimuth: 56 }, ); const at = (point) => k.iso(point, P); const S = (paths, style) => k.solidSvg(paths, style); const L = (d, style) => k.lineSvg(d, style); const D = (points, style) => k.dotsSvg(points, style); const byDepth = (points) => [...points].sort((a, b) => k.depthOf([a[0], a[1], 0], P) - k.depthOf([b[0], b[1], 0], P)); const planeOf = (y) => k.sideMatrix([0, y], 0, P, "left"); const flat = (x0, z0, x1, z1, r, steps = 6) => k.pathOf(k.roundedPlan({ x: x0, y: z0, w: x1 - x0, d: z1 - z0, r }, steps).map(([u, z]) => [u, -z]), true); const onFront = (points, y = FRONT) => k.pathOf(points.map(([x, z]) => at([x, y, z]))); const sideSlot = (y, z0, z1, half = 0.8) => k.pathOf(k.roundedPlan({ x: y - half, y: z0, w: half * 2, d: z1 - z0, r: half }, 4).map(([u, z]) => at([SIDE, u, z])), true); let clips = 0; function recess({ x0, x1, z0, z1, r, depth }, y, back = "", backClass = "pc-well", inside = "") { const id = `pc-clip-${clips++}`; const ring = k.roundedPlan({ x: x0, y: z0, w: x1 - x0, d: z1 - z0, r }, 6); const cx = (x0 + x1) / 2; const cz = (z0 + z1) / 2; const { sinA } = k.cameraOf(P); const tops = []; const sides = [[], [], [], []]; ring.forEach(([ax, az], index) => { const [bx, bz] = ring[(index + 1) % ring.length]; const length = Math.hypot(bx - ax, bz - az) || 1; let [nx, nz] = [(bz - az) / length, -(bx - ax) / length]; if (nx * (cx - (ax + bx) / 2) + nz * (cz - (az + bz) / 2) < 0) [nx, nz] = [-nx, -nz]; if (nx <= 0 && nz <= 0) return; const quad = k.pathOf([at([ax, y, az]), at([bx, y, bz]), at([bx, y - depth, bz]), at([ax, y - depth, az])], true); if (nz >= nx) tops.push(quad); else sides[Math.min(3, Math.max(0, Math.floor(((nx * -sinA + 1) / 2) * 4)))].push(quad); }); const shape = flat(x0, z0, x1, z1, r); return [ ``, ``, ``, ...sides.map((d, shade) => (d.length ? `` : "")), `${back}`, inside, ``, ``, ].join(""); } function plate() { const out = [``]; for (const [x, y] of byDepth(k.corners(PLATE, 22))) { out.push(S(k.cylinder(x, y, 7, -PLATE_H - FOOT_H, 1.6, P, 28), { tone: "lo" })); out.push(S(k.cylinder(x, y, 5.4, -PLATE_H - FOOT_H + 1.6, FOOT_H - 1.6, P, 28), { tone: "mid" })); } out.push(S(k.slabOf(PLATE, -PLATE_H, PLATE_H, P, 8, 1.6), { tone: "mid" })); out.push(L(k.planOutline(k.insetPlan(PLATE, 5), 0, P), { tone: "lo" })); const screws = k.corners(PLATE, 10); out.push(L(screws.map(([x, y]) => k.ring(x, y, 2.2, 0, P, 16)).join(""), { tone: "lo" })); out.push(D(screws.map(([x, y]) => at([x, y, 0])), { size: 0.5 })); const label = { x: -88, y: 144, w: 40, d: 9, r: 1.2 }; out.push(S(k.slabOf(label, 0, 0.8, P, 3), { tone: "lo", crease: "none" })); out.push(L([30, 22].map((w, i) => k.lineOnTop([label.x + 4, label.y + 3 + i * 3], [label.x + 4 + w, label.y + 3 + i * 3], 0.8, P)).join(""), { tone: "lo", free: true })); out.push(D([at([label.x + label.w - 3, label.y + label.d / 2, 0.8])], { size: 0.45 })); return out.join(""); } function screen() { const H = 19; const left = -H * 0.61; const base = CRT_MID + 2; const glyph = (points) => k.pathOf(points.map(([gx, gy]) => [left + gx * H, -(base + gy * H)]), true); const logo = glyph([[0, 0], [0.37, 1], [0.55, 1], [0.92, 0], [0.71, 0], [0.63, 0.23], [0.29, 0.23], [0.21, 0]]) + glyph([[0.35, 0.41], [0.57, 0.41], [0.46, 0.72]]) + glyph([[0.68, 1], [0.89, 1], [1.26, 0], [1.05, 0]]); const lines = []; for (let z = CRT.z0 + 1.2; z < CRT.z1; z += 1.6) lines.push(`M${CRT.x0} ${(-z).toFixed(1)}H${CRT.x1}`); const glow = flat(-30, CRT.z0 + 8, 30, CRT.z1 - 8, 26, 10); const textX = CRT.x0 + 8; const textZ = CRT.z0 + 14; const crt = [ ``, ``, `