2026-03-21 23:57:58 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
< meta name = "apple-mobile-web-app-capable" content = "yes" >
< meta name = "mobile-web-app-capable" content = "yes" >
< title > NISPS Immersive< / title >
2026-03-22 00:36:00 +01:00
< link rel = "preconnect" href = "https://fonts.googleapis.com" >
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin >
< link href = "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel = "stylesheet" >
2026-03-21 23:57:58 +01:00
< link rel = "stylesheet" href = "css/a-immersive.css" >
< / head >
< body >
<!-- Back button -->
< a href = "designs.html" class = "back-btn" title = "Back to designs" >
< svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" >
< path d = "M10 2L4 8l6 6" / >
< / svg >
< / a >
<!-- Synth quick controls (play button + drawer, next to back button) -->
< div class = "synth-quick-controls hidden" id = "synth-quick-controls" >
< button class = "play-btn" id = "quick-play" title = "Start audio + arpeggiator" >
< svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "currentColor" id = "quick-play-icon" > < path d = "M4 2l10 6-10 6z" / > < / svg >
< / button >
< div class = "play-drawer" id = "play-drawer" >
< label > Vol < input type = "range" id = "quick-vol" min = "0" max = "1" step = "0.01" value = "0.5" > < / label >
< label > BPM < input type = "range" id = "quick-bpm" min = "40" max = "240" step = "1" value = "120" > < span id = "quick-bpm-val" > 120< / span > < / label >
< / div >
< / div >
<!-- Fullscreen flow field canvas -->
< canvas id = "vis-canvas" > < / canvas >
<!-- Synth visualization canvas -->
< canvas id = "synth-vis-canvas" > < / canvas >
<!-- Heatmap strip (top) -->
< div class = "heatmap-strip" id = "heatmap-strip" >
< div class = "heatmap-cells" id = "heatmap-cells" > < / div >
< div class = "heatmap-tooltip" id = "heatmap-tooltip" > < / div >
< / div >
<!-- Floating joystick with integrated map -->
< div class = "joystick-container" id = "joystick-container" >
< div class = "joystick-glow" id = "joystick-glow" > < / div >
< canvas id = "joy-map" width = "160" height = "160" > < / canvas >
< div class = "noise-ring" id = "noise-ring" > < / div >
< div class = "follow-badge hidden" id = "follow-badge" > FOLLOW< / div >
2026-03-22 10:01:50 +01:00
< div id = "gamepad-status" style = "color: #ff6a00; font-size: 0.6rem; text-align: center; position: absolute; bottom: -16px; left: 0; right: 0; pointer-events: none;" > < / div >
2026-03-21 23:57:58 +01:00
< / div >
<!-- RL floating buttons -->
< div class = "rl-buttons" id = "rl-buttons" >
2026-03-22 00:36:00 +01:00
< button class = "rl-btn rl-down" id = "btn-thumbsdown" title = "Explore more" > < span class = "rl-icon" > − < / span > < span class = "key-num" > 1< / span > < / button >
< button class = "rl-btn rl-up" id = "btn-thumbsup" title = "Keep this" > < span class = "rl-icon" > +< / span > < span class = "key-num" > 2< / span > < / button >
2026-03-21 23:57:58 +01:00
< / div >
<!-- Bottom sheet -->
< div class = "bottom-sheet collapsed" id = "bottom-sheet" >
<!-- Floating mode bar (sticky inside sheet) -->
< div class = "floating-bar" id = "floating-bar" >
2026-03-22 10:07:38 +01:00
< div class = "pill-toggle pill-toggle-sm" id = "output-toggle-float" >
< button class = "pill-opt active" data-mode = "visual" > Visual< / button >
< button class = "pill-opt" data-mode = "synth" > Synth< / button >
< / div >
2026-03-22 10:01:50 +01:00
< button class = "float-btn accent" id = "btn-train-bar" title = "Train on examples" > Train< / button >
2026-03-21 23:57:58 +01:00
< button class = "float-btn" id = "btn-randomize-bar" title = "Randomize weights" > Randomize< / button >
2026-03-22 10:01:50 +01:00
< button class = "float-btn" id = "btn-clear-examples-bar" title = "Clear examples" > Clear Ex< / button >
2026-03-21 23:57:58 +01:00
< button class = "follow-pill" id = "follow-pill" title = "Toggle follow mode" > Follow< / button >
< button class = "chevron-btn" id = "chevron-btn" title = "Expand panel" > ▲ < / button >
< / div >
<!-- Status line -->
< div class = "sheet-status" id = "sheet-status" >
< span id = "status-text" > 0 examples · untrained< / span >
< / div >
<!-- Sheet content -->
< div class = "sheet-content" id = "sheet-content" >
<!-- Examples mode actions -->
2026-03-22 10:01:50 +01:00
< div class = "action-row" id = "examples-actions" >
2026-03-21 23:57:58 +01:00
< button class = "action-btn" id = "btn-add-example" > Add Example< / button >
< button class = "action-btn accent" id = "btn-train" > Train< / button >
2026-03-22 10:01:50 +01:00
< button class = "action-btn dim" id = "btn-clear-examples" > Clear Examples< / button >
< button class = "action-btn dim" id = "btn-clear" > Clear All< / button >
2026-03-21 23:57:58 +01:00
< button class = "action-btn dim" id = "btn-randomize" > Randomize< / button >
< / div >
<!-- Preset palette -->
2026-03-22 10:01:50 +01:00
< div class = "preset-row" id = "preset-row" >
2026-03-21 23:57:58 +01:00
< span class = "preset-label" > Presets< / span >
< button class = "preset-chip" data-preset = "calm-to-chaotic" > Calm/Chaos< / button >
< button class = "preset-chip" data-preset = "rainbow-sweep" > Rainbow< / button >
< button class = "preset-chip" data-preset = "vortex" > Vortex< / button >
< button class = "preset-chip" data-preset = "spiral" > Spiral< / button >
< button class = "preset-chip" data-preset = "embers" > Embers< / button >
< / div >
<!-- Synth controls -->
< div class = "synth-panel hidden" id = "synth-panel" >
< div class = "synth-row" >
< button class = "action-btn accent" id = "synth-start" > Start Audio< / button >
< span class = "synth-status" id = "synth-status" > Stopped< / span >
< / div >
< div class = "synth-row" >
< label > Volume< / label >
< input type = "range" id = "synth-volume" min = "0" max = "1" step = "0.01" value = "0.5" >
< / div >
< div class = "synth-row" >
< label > Arpeggiator< / label >
< button class = "action-btn" id = "arp-toggle" > Play< / button >
< / div >
< div class = "synth-row" >
< label > Progression< / label >
< select id = "arp-progression" >
< option value = "I-vi-IV-V" > I-vi-IV-V< / option >
< option value = "I-IV-vi-V" > I-IV-vi-V< / option >
< option value = "i-VI-III-VII" > i-VI-III-VII< / option >
< option value = "I-V-vi-IV" > I-V-vi-IV< / option >
< / select >
< / div >
< div class = "synth-row" >
< label > Tempo < span id = "tempo-val" > 120< / span > < / label >
< input type = "range" id = "arp-tempo" min = "40" max = "240" step = "1" value = "120" >
< / div >
< div class = "synth-row" >
< label > Octaves < span id = "octaves-val" > 2< / span > < / label >
< input type = "range" id = "arp-octaves" min = "1" max = "5" step = "1" value = "2" >
< / div >
< div class = "synth-row" >
< label > Oct Offset < span id = "offset-val" > 0< / span > < / label >
< input type = "range" id = "arp-offset" min = "-2" max = "3" step = "1" value = "0" >
< / div >
2026-03-22 10:01:50 +01:00
< div class = "synth-row" id = "midi-row" style = "display:none" >
< label > MIDI Input< / label >
< button class = "action-btn" id = "midi-toggle" > Enable< / button >
< select id = "midi-select" style = "flex:1;min-width:0" > < / select >
< / div >
< div class = "synth-row" id = "midi-status-row" style = "display:none" >
< span class = "synth-status" id = "midi-status" > < / span >
< / div >
2026-03-21 23:57:58 +01:00
< / div >
<!-- Loss plot -->
< div class = "loss-section" >
< label > Loss History< / label >
< canvas id = "loss-canvas" width = "280" height = "80" > < / canvas >
< / div >
<!-- Advanced: raw param sliders -->
< details class = "advanced-section" >
< summary > Advanced: Raw Parameters< / summary >
< div class = "raw-params" id = "raw-params" > < / div >
< / details >
< / div >
< / div >
2026-03-22 21:41:49 +01:00
<!-- Help button -->
< button class = "help-btn" id = "help-btn" title = "Help" > ?< / button >
<!-- Help modal -->
< div class = "help-overlay hidden" id = "help-overlay" >
< div class = "help-modal" id = "help-modal" >
< button class = "help-close" id = "help-close" > × < / button >
< h2 > Welcome to NISPS< / h2 >
< p class = "help-subtitle" > Neural Interactive Shaping of Parameter Spaces< / p >
< div class = "help-section" >
< h3 > What is this?< / h3 >
< p > NISPS lets you < strong > teach a neural network< / strong > how to map a 2D joystick position to a rich set of visual or audio parameters. Move the joystick, shape the outputs you want, and the network learns your preferences in real time.< / p >
< / div >
< div class = "help-section" >
< h3 > How it works< / h3 >
< p > A small neural network takes your joystick X/Y position as input and produces dozens of output parameters. You teach it by either:< / p >
< ul >
< li > < strong > Examples< / strong > — set the parameter sliders to what you want at a given joystick position, add the example, then hit Train. Do this a few times from different positions and the network interpolates between them.< / li >
< li > < strong > Feedback (RL)< / strong > — move the joystick around. If you like what you see/hear, press < strong > +< / strong > (keep this). If you don't, press < strong > − < / strong > (explore more). The network gradually learns what you prefer.< / li >
< / ul >
< / div >
< div class = "help-section" >
< h3 > What to expect< / h3 >
< ul >
< li > < strong > Moving the joystick< / strong > changes all outputs in real time through the network< / li >
< li > < strong > Randomize< / strong > shuffles the network weights — instant new mapping< / li >
< li > < strong > Train< / strong > fits the network to your saved examples< / li >
< li > < strong > + / − feedback< / strong > nudges the network: + reinforces the current mapping, − adds exploration noise< / li >
< li > Switch between < strong > Visual< / strong > (particle flow field) and < strong > Synth< / strong > (C15 synthesizer) output modes< / li >
< li > The < strong > heatmap bar< / strong > at the top shows all output parameters at a glance< / li >
< / ul >
< / div >
< div class = "help-section" >
< h3 > Controls< / h3 >
< table class = "help-keys" >
< tr > < th colspan = "2" > Touch / Mouse< / th > < / tr >
< tr > < td > Drag joystick< / td > < td > Move through parameter space< / td > < / tr >
< tr > < td > + / − buttons< / td > < td > Positive / negative feedback< / td > < / tr >
< tr > < td > Bottom bar< / td > < td > Train, Randomize, Clear, Follow mode< / td > < / tr >
< tr > < th colspan = "2" > Keyboard< / th > < / tr >
< tr > < td > < kbd > 1< / kbd > < / td > < td > Negative feedback (− )< / td > < / tr >
< tr > < td > < kbd > 2< / kbd > < / td > < td > Positive feedback (+)< / td > < / tr >
< tr > < th colspan = "2" > Gamepad (Steam Deck, Xbox, etc.)< / th > < / tr >
< tr > < td > Left stick< / td > < td > Joystick control< / td > < / tr >
< tr > < td > LB (left bumper)< / td > < td > Negative feedback< / td > < / tr >
< tr > < td > RB (right bumper)< / td > < td > Positive feedback< / td > < / tr >
< tr > < td > A< / td > < td > Train< / td > < / tr >
< tr > < td > X< / td > < td > Randomize< / td > < / tr >
< tr > < td > B< / td > < td > Clear examples< / td > < / tr >
< / table >
< / div >
< div class = "help-section" >
< h3 > Tips< / h3 >
< ul >
< li > Start with < strong > Randomize< / strong > a few times to hear/see different mappings, then use feedback to refine< / li >
< li > Use < strong > Follow< / strong > mode to let the joystick wander automatically while you give feedback< / li >
< li > In Synth mode, press the < strong > play button< / strong > (top left) to start audio, then explore< / li >
< li > Tap a heatmap cell to see which parameter it controls< / li >
< / ul >
< / div >
< button class = "help-got-it" id = "help-got-it" > Got it< / button >
< / div >
< / div >
2026-03-21 23:57:58 +01:00
< script type = "module" src = "js/a-app.js" > < / script >
< / body >
< / html >
