From 2c2c9f769d6afdbf4147854c408c92c0c764e26a Mon Sep 17 00:00:00 2001 From: w1n5t0n Date: Sat, 14 Feb 2026 08:47:47 +0000 Subject: [PATCH] playground: add expandable visual mode and docs --- README.md | 2 + playground/README.md | 37 ++++++++++++ playground/css/style.css | 124 +++++++++++++++++++++++++++++++++++++++ playground/index.html | 1 + playground/js/app.js | 46 ++++++++++++++- 5 files changed, 208 insertions(+), 2 deletions(-) create mode 100644 playground/README.md diff --git a/README.md b/README.md index 20e47e7..343f605 100644 --- a/README.md +++ b/README.md @@ -13,3 +13,5 @@ python3 -m http.server ``` Train a neural network to map joystick positions to generative visuals through interactive machine learning. Two learning modes: direct example mapping and reinforcement learning with thumbs up/down feedback. + +The playground UI includes an **Expand** toggle on the visual surface so you can make the canvas nearly full-screen while compressing parameter/control panels into a minimal strip beneath it. diff --git a/playground/README.md b/playground/README.md new file mode 100644 index 0000000..8ca2c04 --- /dev/null +++ b/playground/README.md @@ -0,0 +1,37 @@ +# NISPS Playground + +Browser-based interactive demo of the NISPS ML engine. + +## Run locally + +```bash +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 to 20 visualization parameters. +- Renders a flow-field particle visualization on a Canvas2D surface. +- Supports two learning modes: + - **Examples**: add explicit input/output pairs and train. + - **RL Feedback**: give thumbs up/down while exploring outputs. + +## UI controls + +- **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`). +- **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. diff --git a/playground/css/style.css b/playground/css/style.css index c88bc42..66c8731 100644 --- a/playground/css/style.css +++ b/playground/css/style.css @@ -37,6 +37,15 @@ html, body { margin: 0 auto; } +.header, +.visual-container, +.param-container, +.controls-area, +.presets, +.expand-visual-btn { + transition: all 0.2s ease; +} + /* Header */ .header { display: flex; @@ -70,6 +79,30 @@ html, body { min-height: 0; } +.expand-visual-btn { + position: absolute; + top: 8px; + right: 8px; + z-index: 2; + background: rgba(26, 26, 26, 0.82); + border: 1px solid #333; + color: #9f9f9f; + border-radius: 12px; + font-size: 11px; + line-height: 1; + padding: 6px 10px; + cursor: pointer; + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); +} + +.expand-visual-btn:active, +.expand-visual-btn[aria-pressed="true"] { + border-color: var(--accent-dim); + color: var(--accent); + background: rgba(0, 255, 136, 0.15); +} + .visual-container canvas { width: 100%; height: 100%; @@ -171,6 +204,97 @@ html, body { border-top: 1px solid #222; } +.app.expanded { + grid-template-rows: auto minmax(0, 1fr) 58px 102px 0; +} + +.app.expanded .header { + padding-top: 6px; + padding-bottom: 6px; +} + +.app.expanded .header h1 { + font-size: 13px; + color: #9a9a9a; +} + +.app.expanded .presets { + top: 6px; + left: 6px; + gap: 4px; +} + +.app.expanded .preset-pill { + font-size: 10px; + padding: 3px 7px; + color: #868686; +} + +.app.expanded .param-container { + padding: 4px 10px; + overflow: hidden; + opacity: 0.78; +} + +.app.expanded .param-row { + height: 17px; +} + +.app.expanded .param-track { + height: 5px; +} + +.app.expanded .draggable .param-track { + height: 9px; +} + +.app.expanded .param-label, +.app.expanded .param-value { + font-size: 9px; +} + +.app.expanded .controls-area { + padding: 6px 10px; + gap: 8px; + overflow: hidden; + opacity: 0.82; +} + +.app.expanded #joystick-container { + width: 94px; + height: 94px; + overflow: hidden; +} + +.app.expanded #joystick-container canvas { + transform: scale(0.58); + transform-origin: top left; +} + +.app.expanded .controls-mode-toggle, +.app.expanded .controls-actions { + margin-bottom: 4px; +} + +.app.expanded .btn, +.app.expanded .mode-btn { + font-size: 10px; + padding: 5px 10px; + border-radius: 6px; +} + +.app.expanded .btn-good, +.app.expanded .btn-bad { + font-size: 14px; + padding: 5px 12px; +} + +.app.expanded .controls-status, +.app.expanded .metrics-grid, +.app.expanded .loss-plot-wrap { + display: none; +} + #joystick-container { flex-shrink: 0; } diff --git a/playground/index.html b/playground/index.html index 5c02633..e8ef002 100644 --- a/playground/index.html +++ b/playground/index.html @@ -25,6 +25,7 @@ + diff --git a/playground/js/app.js b/playground/js/app.js index 0b8a568..47d753b 100644 --- a/playground/js/app.js +++ b/playground/js/app.js @@ -25,6 +25,9 @@ let gamepadButtonsPrev = []; let gamepadConnected = false; let gamepadLastAxes = [0.5, 0.5]; let followMode = false; +let visualExpanded = false; +let appRoot; +let expandVisualBtn; // --- Init --- function init() { @@ -32,6 +35,9 @@ function init() { iml.setLogger(msg => console.log('[NISPS]', msg)); // Visualizer + appRoot = document.querySelector('.app'); + expandVisualBtn = document.getElementById('expand-visual-btn'); + const canvas = document.getElementById('visual-canvas'); visualizer = new FlowFieldVisualizer(canvas); @@ -63,10 +69,14 @@ function init() { // Resize handling window.addEventListener('resize', () => { - visualizer.resize(); - visualizer.initParticles(); + resizeVisualizerSurface(); }); + if (expandVisualBtn) { + expandVisualBtn.addEventListener('click', () => setVisualExpanded(!visualExpanded)); + updateExpandButtonState(); + } + // Help overlay const helpBtn = document.getElementById('help-btn'); const helpOverlay = document.getElementById('help-overlay'); @@ -215,6 +225,11 @@ function onModeChange(mode) { } function onKeyDown(e) { + if (e.key === 'Escape' && visualExpanded) { + setVisualExpanded(false); + return; + } + if (!followMode || learningMode !== 'rl' || e.repeat) return; if (e.key === '1' || e.code === 'Numpad1') { e.preventDefault(); @@ -225,6 +240,33 @@ function onKeyDown(e) { } } +function resizeVisualizerSurface() { + visualizer.resize(); + visualizer.initParticles(); +} + +function updateExpandButtonState() { + if (!expandVisualBtn) return; + expandVisualBtn.textContent = visualExpanded ? 'Collapse' : 'Expand'; + expandVisualBtn.title = visualExpanded ? 'Collapse visual area' : 'Expand visual area'; + expandVisualBtn.setAttribute('aria-pressed', visualExpanded ? 'true' : 'false'); +} + +function setVisualExpanded(expanded) { + visualExpanded = expanded; + if (appRoot) { + appRoot.classList.toggle('expanded', visualExpanded); + } + updateExpandButtonState(); + + // Let CSS layout settle before resizing the drawing surface. + requestAnimationFrame(() => { + requestAnimationFrame(() => { + resizeVisualizerSurface(); + }); + }); +} + // --- Presets --- window.loadPreset = function(name) { iml.clearDataset();