d0bc34d8c9
Restore the original arpeggiator as the default sequencer. ShapeSeq code is preserved but gated behind a URL feature flag (?shapeseq=1): - Arpeggiator import, state, and all wiring fully restored - ShapeSeq modules loaded via dynamic import() only when flag is on - ensureShapeSeqInit() creates engine/viz/UI lazily on first audio start - animate loop routes inputs to ShapeSeq only when flag + playing - setOutputMode shows/hides ShapeSeq container only when flag is on - HTML: ShapeSeq container added but hidden by default - CSS: ShapeSeq styles added (inert when container is hidden) All 13 ShapeSeq modules in playground/js/shapeseq/ are untouched. To test ShapeSeq: add ?shapeseq=1 to the URL.
312 lines
16 KiB
HTML
312 lines
16 KiB
HTML
<!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>
|
|
<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">
|
|
<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>
|
|
<select class="preset-select" id="synth-preset-select" title="Synth preset">
|
|
<option value="">Manual</option>
|
|
<optgroup label="Beginner">
|
|
<option value="beginner-1">1.1</option>
|
|
<option value="beginner-2">1.2</option>
|
|
<option value="beginner-3">1.3</option>
|
|
<option value="beginner-4">1.4</option>
|
|
</optgroup>
|
|
<optgroup label="Intermediate">
|
|
<option value="intermediate-1">2.1</option>
|
|
<option value="intermediate-2">2.2</option>
|
|
<option value="intermediate-3">2.3</option>
|
|
<option value="intermediate-4">2.4</option>
|
|
</optgroup>
|
|
<optgroup label="Advanced">
|
|
<option value="advanced-1">3.1</option>
|
|
<option value="advanced-2">3.2</option>
|
|
<option value="advanced-3">3.3</option>
|
|
</optgroup>
|
|
<optgroup label="Expert">
|
|
<option value="expert-1">4.1</option>
|
|
<option value="expert-2">4.2</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Fullscreen flow field canvas -->
|
|
<canvas id="vis-canvas"></canvas>
|
|
|
|
<!-- Synth visualization canvas -->
|
|
<canvas id="synth-vis-canvas"></canvas>
|
|
|
|
<!-- ShapeSeq UI (hidden by default, enabled with ?shapeseq=1) -->
|
|
<div class="shapeseq-container hidden" id="shapeseq-container">
|
|
<canvas id="shapeseq-viz"></canvas>
|
|
<div class="shapeseq-chain-wrap" id="shapeseq-chain"></div>
|
|
</div>
|
|
|
|
<!-- 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>
|
|
<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>
|
|
</div>
|
|
|
|
<!-- Hand tracking PIP (replaces joystick position when active) -->
|
|
<div class="hand-pip hidden" id="hand-pip">
|
|
<video id="hand-video" playsinline autoplay muted></video>
|
|
<canvas id="hand-overlay"></canvas>
|
|
<div class="hand-status" id="hand-status">Loading...</div>
|
|
<div class="gesture-indicator" id="gesture-indicator">
|
|
<svg class="gesture-ring" viewBox="0 0 36 36">
|
|
<circle class="gesture-ring-bg" cx="18" cy="18" r="16" />
|
|
<circle class="gesture-ring-progress" cx="18" cy="18" r="16" />
|
|
</svg>
|
|
<span class="gesture-label" id="gesture-label"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RL floating buttons -->
|
|
<div class="rl-buttons" id="rl-buttons">
|
|
<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>
|
|
</div>
|
|
|
|
<!-- Bottom sheet -->
|
|
<div class="bottom-sheet collapsed" id="bottom-sheet">
|
|
<!-- Floating mode bar (sticky inside sheet) -->
|
|
<div class="floating-bar" id="floating-bar">
|
|
<div class="pill-toggle pill-toggle-sm" id="input-toggle">
|
|
<button class="pill-opt active" data-input="joystick">Joystick</button>
|
|
<button class="pill-opt" data-input="hands">Hands</button>
|
|
</div>
|
|
<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>
|
|
<button class="float-btn accent" id="btn-train-bar" title="Train on examples">Train</button>
|
|
<button class="float-btn" id="btn-randomize-bar" title="Randomize weights">Randomize</button>
|
|
<button class="float-btn" id="btn-clear-examples-bar" title="Clear examples">Clear Ex</button>
|
|
<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 -->
|
|
<div class="action-row" id="examples-actions">
|
|
<button class="action-btn" id="btn-add-example">Add Example</button>
|
|
<button class="action-btn accent" id="btn-train">Train</button>
|
|
<button class="action-btn dim" id="btn-clear-examples">Clear Examples</button>
|
|
<button class="action-btn dim" id="btn-clear">Clear All</button>
|
|
<button class="action-btn dim" id="btn-randomize">Randomize</button>
|
|
</div>
|
|
|
|
<!-- Preset palette -->
|
|
<div class="preset-row" id="preset-row">
|
|
<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>
|
|
<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>
|
|
</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>
|
|
|
|
<!-- 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>Hand Tracking</h3>
|
|
<p>Toggle to <strong>Hands</strong> mode in the bottom bar to use your webcam for input.</p>
|
|
<ul>
|
|
<li><strong>Right hand</strong> controls parameters — palm position, finger curls, spread, rotation, and pinch map to 14 input dimensions</li>
|
|
<li><strong>Left hand</strong> gives feedback via gestures:</li>
|
|
<ul>
|
|
<li><strong>1 finger</strong> (index) held 0.4s → positive feedback (+)</li>
|
|
<li><strong>2 fingers</strong> (index + middle) held 0.4s → negative feedback (−)</li>
|
|
</ul>
|
|
<li>If only one hand is visible, it's treated as the tracking hand — use keyboard/buttons for feedback</li>
|
|
<li>Camera permission is requested only when you switch to Hands mode</li>
|
|
</ul>
|
|
</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, pulses orange when audio is off) to start audio, then explore</li>
|
|
<li>Tap a heatmap cell to see which parameter it controls</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="help-section">
|
|
<h3>Synth Controls</h3>
|
|
<ul>
|
|
<li><strong>Presets</strong> — use the dropdown (top left, next to play) to choose a parameter preset. Lower tiers (1.x) expose fewer parameters for simpler exploration; higher tiers (3.x, 4.x) unlock cross-modulation, feedback, and the full engine. You can tweak any preset afterwards using the controls below.</li>
|
|
<li><strong>Hover any bar</strong> in the synth visualizer to see parameter name, current value, range, and curve</li>
|
|
<li><strong>Hover a group name</strong> (e.g. "Env A", "Osc B") at the top to open its control drawer:</li>
|
|
<ul>
|
|
<li><strong>Group curve</strong> — drag the top graph vertically to shape the response curve for the whole group (adjusts all param curves relatively)</li>
|
|
<li><strong>Per-param curve</strong> — drag each small graph to shape that parameter individually (down = exponential, up = logarithmic)</li>
|
|
<li><strong>Min/Max range</strong> — dual-thumb slider constrains the parameter's output range</li>
|
|
<li><strong>Mute (M)</strong> — removes the parameter from NISPS control; its bar disappears and you get a manual value slider instead</li>
|
|
</ul>
|
|
<li><strong>MIDI input</strong> — connect a MIDI controller and it will be detected automatically; MIDI notes trigger the synth directly</li>
|
|
<li><strong>Arpeggiator</strong> — expand the bottom bar to access the built-in arpeggiator with tempo, octave range, offset, and chord progression controls; press Pause to stop it</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<button class="help-got-it" id="help-got-it">Got it</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="js/a-app.js"></script>
|
|
</body>
|
|
</html>
|