AT-ORR // instrument palette — README

a seeded, interactive, sound-making generative art control room. plain HTML + Canvas + Web Audio. zero dependencies, zero build, zero network.

What is this

73 live panels. Each is a classic algorithm from the generative-art / complexity-science canon, dressed as an instrument on a fictional research console. Every panel reacts to the pointer; with AUDIO armed, most of them answer in sound.

Inspired by the "Anthropic's new Fable model is freakishly good" reel by @rndyrbrts — a mood-board-to-code-art workflow where an LLM writes a single-file generative dashboard. This folder was written the same way: described in conversation, generated by Claude, smoke-tested headlessly, iterated.

Running it

Open index.html in any modern browser. Works straight from file:// — the modules are plain <script> tags, not ES modules, so nothing needs a server. (Serving it with python3 -m http.server just makes the seed stick in the URL more reliably.)

Controls

Panels outside the viewport pause (IntersectionObserver); prefers-reduced-motion lowers the update rate.

Seeding model

• Global seed: 8 hex chars in the URL, e.g. index.html?seed=12B1B2CF.
• Each panel derives its own PRNG: mulberry32(fnv1a(SEED + ":" + panelIndex + ":" + regenCount)).
• All compositional choices (presets, counts, angles, rules) come from that PRNG; only cosmetic dither uses Math.random(). Share a seed, share the room.

Architecture

at-orr/
├── index.html          shell: CSS, header, empty grid, script tags
├── README.md / .html   this document
└── js/
    ├── core.js          seeded RNG, value noise, audio engine,
    │                    panel builder, render loop, global controls
    ├── inst-fields.js   lattice instruments (9)
    ├── inst-agents.js   agent instruments (4)
    ├── inst-geometry.js geometry instruments (6)
    ├── inst-waves.js    wave / oscillator / attractor instruments (8)
    ├── inst-signals.js  signal & chromatic instruments (10)
    ├── inst-chroma.js   chroma wing (10)
    ├── inst-flora.js    flora wing: blooms × rasterizers (4)
    ├── inst-morph.js    morph wing: shapeshifters & misc (8)
    ├── inst-arcana.js   arcana wing: fractals & deep math (7)
    └── inst-bureau.js   bureau wing: simulations with paperwork energy (7)

Instrument files self-register into the core. To add one:

(function (A) {
  A.register({
    title: "My Instrument", tag: "MY ALGORITHM",
    desc: "One poetic sentence about what it does.",
    hint: "drag to do x",
    make(rng) {                     // rng = the panel's seeded PRNG
      // build all state here, derived from rng()
      return {
        chips: [["PARAM", 42], ["LIVE()", () => liveValue]],
        step()         {/* advance one frame                 */},
        draw(ctx)      {/* paint onto a 480×360 2d context   */},
        pointer(x,y,t) {/* t: "down" | "move" | "up"         */}
      };
    }
  });
})(window.ATORR);

Drop the file in js/, add a <script src> line to index.html — FOCUS / REGEN / PNG wire up automatically. Helpers on ATORR: grid(w,h) for ImageData renderers, vnoise(x,y,seed), clamp, audio.blip / swoosh / toneStart.

Where the designs come from

There is no single catalog these were copied from. Generative art runs on a canon of classic algorithms, published over ~60 years and retold endlessly by the community. Every panel follows one recipe: phenomenon → state + update rule → mapping to pixels → one pointer gesture → one sound → seeded parameters. The knowledge lives in five layers:

1. The closest thing to "a catalog on the internet": morphogenesis-resources by Jason Webb — a curated cheat-sheet of growth algorithms (reaction-diffusion, DLA, differential growth, space colonization…) with links to papers, code, and artists. One bookmark to rule them all.

2. Textbooks: The Nature of Code (Shiffman, free) and his YouTube The Coding Train; Generative Design (Gross et al.); The Algorithmic Beauty of Plants (Prusinkiewicz & Lindenmayer, free PDF).

3. Artists' personal encyclopedias: paulbourke.net (attractors, fractals, geometry), inconvergent.net (differential growth essays), Red Blob Games (hex grids), Tyler Hobbs' essays (flow fields), Sage Jenson (the physarum essay).

4. Primary papers — the per-panel references in the index below. Pearson 1993, Reynolds 1987, Witten & Sander 1981, Werner 1995, Lorenz 1963, Kuramoto 1975… Tutorials are retellings; the papers are the source.

5. Community folklore: demoscene effect tutorials (lodev.org), Fabien Sanglard's write-ups (PSX Doom fire), Kim Asendorf (pixel sorting), and galleries with readable source — OpenProcessing, Shadertoy, r/generative, the awesome-creative-coding list.

How a panel gets designed: pick a phenomenon; write its state and one-step update from first principles (most are short — a lattice, an ODE, a turtle); choose the pixel mapping; tune constants toward the critical regime where behaviour is liveliest; attach one gesture and one sound; route all compositional randomness through the seed. The instrument names and plaque texts are original flavor.

The instrument index (per-panel references)

General companions: The Nature of Code (natureofcode.com, free), The Coding Train, the p5.js examples gallery.

Palettes

The first 27 instruments live on the green console; every wing after the green console (28–73) deliberately breaks the palette — a light-grey radar with bone-white nodes, ultramarine wireframes, full-RGB glitch buffers, red×cyan moiré, CMYK-ish timeline freight. Each instrument owns its colours; only the typography and chrome are shared law.

The buffer trick (flora wing)

Panels 48–51 (and the morph wing's centerpiece, 52) share one pipeline: the subject is drawn each frame into a hidden 240×180 canvas, then sampled on a coarse grid and re-rendered in one of five styles — VECTOR, PIXEL mosaic, HALFTONE dots sized by luminance, ASCII glyphs from a brightness ramp, GLITCH (band offsets, channel swaps, stray glyphs). Model and rasterizer fully decoupled — the architecture behind @jesusemans' peony.

Sound

One master gain, throwaway oscillators for blips, filtered noise for swooshes, one sustained sine for the "played" instruments. Two panels are literal sonifications: Cymatic Stele (the sine you hear is the mode shaping the sand) and Sunflower Minute (pitch tracks the divergence angle).

Provenance & license

Classic algorithms (see table) → the rndyrbrts reel's "AI as creative-coding compiler" workflow → this folder, generated by Claude (Anthropic) in conversation, June 2026. Do whatever you want with it (MIT-style). Algorithms belong to everyone; the rest is just enthusiasm.