memlnaut-nisps/playground
w1n5t0n 43e066484b docs(playground): add comprehensive control surface spec
Design spec for input zoom, compound control axes, pinning system,
exploration noise controls, and visualization enhancements. Covers
the full parameter inventory with implementation phases and open
design questions for experimentation.
2026-03-24 21:38:33 +02:00
..
c15 feat(playground): add C15 synth mode with NISPS-controlled parameters and arpeggiator 2026-03-21 22:26:37 +02:00
css fix(playground): restore play drawer and preset button fixes 2026-03-24 12:01:40 +02:00
devlog feat(playground): add three alternative UI design explorations 2026-03-22 00:57:58 +02:00
js refactor(shapeseq): restore arpeggiator, gate ShapeSeq behind ?shapeseq=1 2026-03-24 11:54:13 +02:00
wasm feat(playground): replace JS ML engine with WASM nisps-core 2026-03-23 23:23:07 +02:00
a-immersive.html refactor(shapeseq): restore arpeggiator, gate ShapeSeq behind ?shapeseq=1 2026-03-24 11:54:13 +02:00
b-workbench.html feat(playground): unify learning modes, add MIDI input and gamepad support 2026-03-22 11:01:50 +02:00
c-journey.html feat(playground): unify learning modes, add MIDI input and gamepad support 2026-03-22 11:01:50 +02:00
designs.html style(playground): unify dark theme with orange accents and improve RL button layout 2026-03-22 01:36:00 +02:00
index.html tweak(playground): simplify descriptions in card body text 2026-03-22 02:22:47 +02:00
README.md docs: update CLAUDE.md and playground README for 126-param C15 map 2026-03-21 23:11:45 +02:00
serve-coop.py feat(playground): add C15 synth mode with NISPS-controlled parameters and arpeggiator 2026-03-21 22:26:37 +02:00
serve.sh feat(playground): add C15 synth mode with NISPS-controlled parameters and arpeggiator 2026-03-21 22:26:37 +02:00
SPEC-controls.md docs(playground): add comprehensive control surface spec 2026-03-24 21:38:33 +02:00
SPEC-shapeseq.md docs(playground): revise ShapeSeq spec after fresh-eyes review 2026-03-24 00:30:43 +02:00
TODOS.md feat(playground): add synth parameter tooltips, group drawer with per-param curve/mute controls 2026-03-22 21:57:21 +02:00

NISPS Playground

Browser-based interactive demo of the NISPS ML engine.

Run locally

python3 -m http.server
# Open http://localhost:8000

Run the command from the playground/ directory.

What it does

  • Maps 2D joystick input (X/Y) through an MLP ([3, 32, 48, 64, 126]) to 126 outputs.
  • Visual mode: first 20 outputs drive a flow-field particle visualization on Canvas2D.
  • Synth mode (C15): all 126 outputs control the C15 WASM synthesizer — envelopes, oscillators, shapers, filters, feedback/output mixers, cabinet, and effects.
  • Supports two learning modes:
    • Examples: add explicit input/output pairs and train.
    • RL Feedback: give thumbs up/down while exploring outputs.

C15 synth parameters

The 126 synth parameters (js/synth/param-map.js) cover all sonically meaningful continuous parameters of the C15 engine. Excluded from the C15's 287 total params:

  • Hardware routing (56) — no physical MIDI in browser
  • Macro controls (12) — conflicts with direct ML control
  • Scale/tuning (13) — would break pitch
  • Key tracking / velocity (22) — depend on note context ML can't observe
  • Envelope mod depths (19) — too many multiplicative interactions for 2-input ML
  • Discrete/structural/dangerous (19) — pitch sweep, volume, switches, resets
  • Secondary config (15) — curves, chirp, shaper blend, source selects

UI controls

  • Output mode tabs (side panel): switch between Visual and Synth modes.
  • Expand / Collapse button on the canvas: makes the visual surface nearly full-screen and compresses lower controls into a minimal view.
  • Presets: quick demo mappings (Calm/Chaos, Rainbow, Vortex) — visual mode only.
  • Help (?) overlay: in-app usage guide.
  • Follow mode: double-click joystick in RL mode to toggle no-hold interaction.
  • Keyboard in Follow mode (RL): 2 = thumbs up, 1 = thumbs down.
  • Gamepad in RL: RB = thumbs up, LB = thumbs down.

Files

  • index.html - page structure.
  • css/style.css - layout and visual styling.
  • js/app.js - app wiring and interaction logic.
  • js/ui/ - visualizer, joystick, controls, parameter display.
  • js/nisps/ - JavaScript MLP + IML core.
  • js/synth/ - C15 WASM bridge, parameter map, arpeggiator.
  • c15/ - C15 engine WASM binary and parameter definitions.