diff --git a/playground/css/style.css b/playground/css/style.css index fab1d66..182f72d 100644 --- a/playground/css/style.css +++ b/playground/css/style.css @@ -397,11 +397,36 @@ html, body { flex-shrink: 0; } +.param-container.synth-mode { + max-height: 50vh; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: #444 #1a1a1a; +} + +.param-container.synth-mode .param-row { + height: 16px; +} + .param-container.synth-mode .param-label { - width: 72px; + width: 82px; + font-size: 9px; color: #886644; } +.param-container.synth-mode .param-track { + height: 6px; +} + +.param-container.synth-mode .param-value { + font-size: 8px; + min-width: 24px; +} + +.param-container.synth-mode.draggable .param-track { + height: 10px; +} + .param-track { flex: 1; height: 8px; diff --git a/playground/js/app.js b/playground/js/app.js index 8d3c688..43386a6 100644 --- a/playground/js/app.js +++ b/playground/js/app.js @@ -11,7 +11,9 @@ import { Arpeggiator } from './synth/arpeggiator.js'; import { SYNTH_PARAM_MAP, SYNTH_PARAM_NAMES, SYNTH_PARAM_COLORS } from './synth/param-map.js'; const N_INPUTS = 2; -const N_OUTPUTS = 20; +const N_VISUAL_OUTPUTS = 20; +const N_SYNTH_OUTPUTS = SYNTH_PARAM_MAP.length; // 126 +const N_OUTPUTS = N_SYNTH_OUTPUTS; // MLP always produces full output; visual uses first 20 // Visual mode param display config const VISUAL_PARAM_NAMES = ['Flow', 'Scale', 'Speed', 'Hue', 'Spread', 'Size', 'Trail', 'Turb', 'Attract', 'Radius', 'DispRate', 'DispAmt', 'Lifetime', 'Respawn', 'Advection', 'Inertia', 'Drag', 'Repulse', 'RepCnt', 'RepRate']; @@ -43,7 +45,7 @@ let arpeggiator = null; // --- Init --- function init() { - iml = new IML(N_INPUTS, N_OUTPUTS, [10, 10, 14], 1000, 1.0, 0.00001); + iml = new IML(N_INPUTS, N_OUTPUTS, [32, 48, 64], 1000, 1.0, 0.00001); iml.setLogger(msg => console.log('[NISPS]', msg)); // Visualizer @@ -65,8 +67,8 @@ function init() { }, }); - // Parameter display - paramDisplay = new ParamDisplay(document.getElementById('param-display'), N_OUTPUTS); + // Parameter display (start in visual mode with 20 params) + paramDisplay = new ParamDisplay(document.getElementById('param-display'), N_VISUAL_OUTPUTS); // Controls controls = new Controls(document.getElementById('controls-container'), { @@ -181,8 +183,9 @@ function setOutputMode(mode) { modeBadge.classList.add('synth'); paramContainer.classList.add('synth-mode'); - // Rebuild param display with synth labels/colors - paramDisplay.setNamesAndColors(SYNTH_PARAM_NAMES, SYNTH_PARAM_COLORS); + // Rebuild param display with all synth params + paramDisplay.rebuild(N_SYNTH_OUTPUTS, SYNTH_PARAM_NAMES, SYNTH_PARAM_COLORS); + paramDisplay.setDraggable(learningMode === 'examples'); } else { synthControls.classList.add('hidden'); visualInfo.classList.remove('hidden'); @@ -191,8 +194,9 @@ function setOutputMode(mode) { modeBadge.classList.remove('synth'); paramContainer.classList.remove('synth-mode'); - // Restore visual param labels/colors - paramDisplay.setNamesAndColors(VISUAL_PARAM_NAMES, VISUAL_PARAM_COLORS); + // Rebuild param display with visual params (first 20) + paramDisplay.rebuild(N_VISUAL_OUTPUTS, VISUAL_PARAM_NAMES, VISUAL_PARAM_COLORS); + paramDisplay.setDraggable(learningMode === 'examples'); } // Re-run inference and route outputs @@ -438,26 +442,33 @@ function setVisualExpanded(expanded) { } // --- Presets --- +// Pad a 20-element visual preset array to N_OUTPUTS with 0.5 defaults +function padPreset(values20) { + const padded = new Array(N_OUTPUTS).fill(0.5); + for (let i = 0; i < values20.length; i++) padded[i] = values20[i]; + return padded; +} + window.loadPreset = function(name) { iml.clearDataset(); if (name === 'calm-to-chaotic') { // Bottom-left: slow, smooth, cool; top-right: fast, turbulent, warm - iml.addExample([0.1, 0.9], [0.25, 0.3, 0.1, 0.55, 0.2, 0.3, 0.02, 0.05, 0.9, 0.45, 0.25, 0.2, 0.9, 0.0, 0.0, 0.2, 0.05, 0.0, 0.0, 0.2]); - iml.addExample([0.9, 0.1], [0.75, 0.7, 0.9, 0.05, 0.8, 0.7, 0.9, 0.95, 0.3, 0.2, 0.85, 0.7, 0.25, 0.55, 1.0, 0.92, 0.02, 0.95, 0.8, 0.85]); - iml.addExample([0.5, 0.5], [0.5, 0.5, 0.5, 0.3, 0.5, 0.5, 0.4, 0.5, 0.7, 0.6, 0.5, 0.45, 0.55, 0.9, 0.5, 0.65, 0.08, 0.45, 0.4, 0.5]); + iml.addExample([0.1, 0.9], padPreset([0.25, 0.3, 0.1, 0.55, 0.2, 0.3, 0.02, 0.05, 0.9, 0.45, 0.25, 0.2, 0.9, 0.0, 0.0, 0.2, 0.05, 0.0, 0.0, 0.2])); + iml.addExample([0.9, 0.1], padPreset([0.75, 0.7, 0.9, 0.05, 0.8, 0.7, 0.9, 0.95, 0.3, 0.2, 0.85, 0.7, 0.25, 0.55, 1.0, 0.92, 0.02, 0.95, 0.8, 0.85])); + iml.addExample([0.5, 0.5], padPreset([0.5, 0.5, 0.5, 0.3, 0.5, 0.5, 0.4, 0.5, 0.7, 0.6, 0.5, 0.45, 0.55, 0.9, 0.5, 0.65, 0.08, 0.45, 0.4, 0.5])); } else if (name === 'rainbow-sweep') { // Left to right sweeps through hues - iml.addExample([0.0, 0.5], [0.5, 0.5, 0.4, 0.0, 0.3, 0.4, 0.05, 0.3, 0.8, 0.55, 0.4, 0.3, 0.8, 0.0, 0.0, 0.45, 0.08, 0.2, 0.25, 0.45]); - iml.addExample([0.5, 0.5], [0.5, 0.5, 0.4, 0.5, 0.3, 0.4, 0.05, 0.3, 0.8, 0.55, 0.55, 0.35, 0.7, 0.0, 0.4, 0.45, 0.08, 0.45, 0.4, 0.6]); - iml.addExample([1.0, 0.5], [0.5, 0.5, 0.4, 1.0, 0.3, 0.4, 0.05, 0.3, 0.8, 0.55, 0.75, 0.45, 0.6, 0.0, 0.8, 0.45, 0.08, 0.7, 0.55, 0.75]); + iml.addExample([0.0, 0.5], padPreset([0.5, 0.5, 0.4, 0.0, 0.3, 0.4, 0.05, 0.3, 0.8, 0.55, 0.4, 0.3, 0.8, 0.0, 0.0, 0.45, 0.08, 0.2, 0.25, 0.45])); + iml.addExample([0.5, 0.5], padPreset([0.5, 0.5, 0.4, 0.5, 0.3, 0.4, 0.05, 0.3, 0.8, 0.55, 0.55, 0.35, 0.7, 0.0, 0.4, 0.45, 0.08, 0.45, 0.4, 0.6])); + iml.addExample([1.0, 0.5], padPreset([0.5, 0.5, 0.4, 1.0, 0.3, 0.4, 0.05, 0.3, 0.8, 0.55, 0.75, 0.45, 0.6, 0.0, 0.8, 0.45, 0.08, 0.7, 0.55, 0.75])); } else if (name === 'vortex') { // Center: tight spiral, edges: wide flow - iml.addExample([0.5, 0.5], [0.0, 0.8, 0.8, 0.6, 0.1, 0.15, 0.02, 1.0, 1.0, 0.3, 0.95, 0.85, 0.25, 1.0, 0.5, 0.95, 0.01, 1.0, 1.0, 1.0]); - iml.addExample([0.0, 0.0], [0.5, 0.2, 0.3, 0.8, 0.9, 0.6, 0.08, 0.1, 0.35, 0.8, 0.25, 0.15, 0.8, 0.5, 0.2, 0.35, 0.2, 0.15, 0.2, 0.25]); - iml.addExample([1.0, 1.0], [0.5, 0.2, 0.3, 0.2, 0.9, 0.6, 0.08, 0.1, 0.35, 0.8, 0.25, 0.15, 0.8, 0.5, 0.8, 0.35, 0.2, 0.15, 0.2, 0.25]); - iml.addExample([0.0, 1.0], [0.3, 0.4, 0.5, 0.4, 0.5, 0.4, 0.05, 0.5, 0.65, 0.5, 0.55, 0.45, 0.45, 0.2, 0.4, 0.7, 0.1, 0.5, 0.4, 0.55]); - iml.addExample([1.0, 0.0], [0.7, 0.4, 0.5, 0.0, 0.5, 0.4, 0.05, 0.5, 0.65, 0.5, 0.55, 0.45, 0.45, 0.2, 0.9, 0.7, 0.1, 0.5, 0.4, 0.55]); + iml.addExample([0.5, 0.5], padPreset([0.0, 0.8, 0.8, 0.6, 0.1, 0.15, 0.02, 1.0, 1.0, 0.3, 0.95, 0.85, 0.25, 1.0, 0.5, 0.95, 0.01, 1.0, 1.0, 1.0])); + iml.addExample([0.0, 0.0], padPreset([0.5, 0.2, 0.3, 0.8, 0.9, 0.6, 0.08, 0.1, 0.35, 0.8, 0.25, 0.15, 0.8, 0.5, 0.2, 0.35, 0.2, 0.15, 0.2, 0.25])); + iml.addExample([1.0, 1.0], padPreset([0.5, 0.2, 0.3, 0.2, 0.9, 0.6, 0.08, 0.1, 0.35, 0.8, 0.25, 0.15, 0.8, 0.5, 0.8, 0.35, 0.2, 0.15, 0.2, 0.25])); + iml.addExample([0.0, 1.0], padPreset([0.3, 0.4, 0.5, 0.4, 0.5, 0.4, 0.05, 0.5, 0.65, 0.5, 0.55, 0.45, 0.45, 0.2, 0.4, 0.7, 0.1, 0.5, 0.4, 0.55])); + iml.addExample([1.0, 0.0], padPreset([0.7, 0.4, 0.5, 0.0, 0.5, 0.4, 0.05, 0.5, 0.65, 0.5, 0.55, 0.45, 0.45, 0.2, 0.9, 0.7, 0.1, 0.5, 0.4, 0.55])); } const loss = trainModel(); @@ -485,7 +496,12 @@ function loadState() { const data = JSON.parse(localStorage.getItem('nisps-playground')); if (data && data.features && data.features.length > 0) { for (let i = 0; i < data.features.length; i++) { - iml.addExample(data.features[i], data.labels[i]); + // Pad old saves (20 outputs) to current N_OUTPUTS with 0.5 defaults + const labels = data.labels[i]; + if (labels.length < N_OUTPUTS) { + while (labels.length < N_OUTPUTS) labels.push(0.5); + } + iml.addExample(data.features[i], labels); } trainModel(); const outputs = iml.getOutputs(); diff --git a/playground/js/synth/param-map.js b/playground/js/synth/param-map.js index 3027879..5f4ba9d 100644 --- a/playground/js/synth/param-map.js +++ b/playground/js/synth/param-map.js @@ -1,38 +1,237 @@ -// Maps 20 NISPS outputs (0-1) to curated C15 synth parameters -// Each entry: { id, name, label, defaultValue, bipolar } -// Chosen for maximum sonic impact and exploration potential +// Maps NISPS outputs (0-1) to curated C15 synth parameters +// 126 params: all sonically meaningful continuous parameters +// Excludes: hardware routing, macros, scale/tuning, key tracking, velocity, +// envelope modulation depths, discrete switches, dangerous volume/pitch controls +// +// Grouped by synthesis section for readability: +// Envelopes (20) → Oscillators (10) → Shapers (12) → Filters (25) → +// Feedback Mixer (9) → Output Mixer (14) → Cabinet (8) → +// Flanger (13) → Echo (7) → Reverb (6) → Unison (3) → Mono (1) export const SYNTH_PARAM_MAP = [ - { id: 60, name: 'Osc_A_PM_Self', label: 'OscA Self-PM', defaultValue: 0.00, bipolar: true }, - { id: 64, name: 'Osc_A_PM_B', label: 'OscA PM-B', defaultValue: 0.00, bipolar: true }, - { id: 90, name: 'Osc_B_PM_Self', label: 'OscB Self-PM', defaultValue: 0.00, bipolar: true }, - { id: 94, name: 'Osc_B_PM_A', label: 'OscB PM-A', defaultValue: 0.00, bipolar: true }, - { id: 71, name: 'Shp_A_Drive', label: 'ShpA Drive', defaultValue: 0.20, bipolar: false }, - { id: 74, name: 'Shp_A_Fold', label: 'ShpA Fold', defaultValue: 0.50, bipolar: false }, - { id: 101, name: 'Shp_B_Drive', label: 'ShpB Drive', defaultValue: 0.20, bipolar: false }, - { id: 140, name: 'SV_Flt_Cut', label: 'SVF Cutoff', defaultValue: 0.50, bipolar: false }, - { id: 144, name: 'SV_Flt_Res', label: 'SVF Reso', defaultValue: 0.50, bipolar: false }, - { id: 148, name: 'SV_Flt_Spread', label: 'SVF Spread', defaultValue: 0.20, bipolar: true }, - { id: 115, name: 'Comb_Flt_Pitch', label: 'Comb Pitch', defaultValue: 0.50, bipolar: false }, - { id: 119, name: 'Comb_Flt_Decay', label: 'Comb Decay', defaultValue: 0.00, bipolar: true }, - { id: 127, name: 'Comb_Flt_AP_Res', label: 'Comb AP Res', defaultValue: 0.50, bipolar: false }, - { id: 235, name: 'Reverb_Size', label: 'Reverb Size', defaultValue: 0.33, bipolar: false }, - { id: 238, name: 'Reverb_Color', label: 'Reverb Color', defaultValue: 0.50, bipolar: false }, - { id: 225, name: 'Echo_Time', label: 'Echo Time', defaultValue: 0.43, bipolar: false }, - { id: 229, name: 'Echo_Feedback', label: 'Echo FB', defaultValue: 0.50, bipolar: false }, - { id: 219, name: 'Flanger_Feedback', label: 'Flanger FB', defaultValue: 0.00, bipolar: true }, - { id: 169, name: 'Out_Mix_A_Lvl', label: 'Out A Level', defaultValue: 0.75, bipolar: true }, - { id: 172, name: 'Out_Mix_B_Lvl', label: 'Out B Level', defaultValue: 0.00, bipolar: true }, + // --- Envelope A (7) --- + { id: 0, name: 'Env_A_Att', label: 'EnvA Att', defaultValue: 0, bipolar: false }, + { id: 2, name: 'Env_A_Dec_1', label: 'EnvA Dec1', defaultValue: 0.59, bipolar: false }, + { id: 4, name: 'Env_A_BP', label: 'EnvA BP', defaultValue: 0.5, bipolar: false }, + { id: 6, name: 'Env_A_Dec_2', label: 'EnvA Dec2', defaultValue: 0.79, bipolar: false }, + { id: 8, name: 'Env_A_Sus', label: 'EnvA Sus', defaultValue: 0, bipolar: false }, + { id: 10, name: 'Env_A_Rel', label: 'EnvA Rel', defaultValue: 0.53, bipolar: false }, + { id: 12, name: 'Env_A_Gain', label: 'EnvA Gain', defaultValue: 0, bipolar: true }, + + // --- Envelope B (7) --- + { id: 19, name: 'Env_B_Att', label: 'EnvB Att', defaultValue: 0, bipolar: false }, + { id: 21, name: 'Env_B_Dec_1', label: 'EnvB Dec1', defaultValue: 0.59, bipolar: false }, + { id: 23, name: 'Env_B_BP', label: 'EnvB BP', defaultValue: 0.5, bipolar: false }, + { id: 25, name: 'Env_B_Dec_2', label: 'EnvB Dec2', defaultValue: 0.79, bipolar: false }, + { id: 27, name: 'Env_B_Sus', label: 'EnvB Sus', defaultValue: 0, bipolar: false }, + { id: 29, name: 'Env_B_Rel', label: 'EnvB Rel', defaultValue: 0.53, bipolar: false }, + { id: 31, name: 'Env_B_Gain', label: 'EnvB Gain', defaultValue: 0, bipolar: true }, + + // --- Envelope C (6) --- + { id: 38, name: 'Env_C_Att', label: 'EnvC Att', defaultValue: 0, bipolar: false }, + { id: 40, name: 'Env_C_Dec_1', label: 'EnvC Dec1', defaultValue: 0.59, bipolar: false }, + { id: 42, name: 'Env_C_BP', label: 'EnvC BP', defaultValue: 0.5, bipolar: true }, + { id: 44, name: 'Env_C_Dec_2', label: 'EnvC Dec2', defaultValue: 0.79, bipolar: false }, + { id: 46, name: 'Env_C_Rel', label: 'EnvC Rel', defaultValue: 0.53, bipolar: false }, + { id: 297, name: 'Env_C_Sus', label: 'EnvC Sus', defaultValue: 0, bipolar: true }, + + // --- Oscillator A (5) --- + { id: 57, name: 'Osc_A_Fluct', label: 'OscA Fluct', defaultValue: 0, bipolar: false }, + { id: 60, name: 'Osc_A_PM_Self', label: 'OscA PM-Self', defaultValue: 0, bipolar: true }, + { id: 64, name: 'Osc_A_PM_B', label: 'OscA PM-B', defaultValue: 0, bipolar: true }, + { id: 68, name: 'Osc_A_PM_FB', label: 'OscA PM-FB', defaultValue: 0, bipolar: true }, + { id: 301, name: 'Osc_A_Phase', label: 'OscA Phase', defaultValue: 0, bipolar: true }, + + // --- Oscillator B (5) --- + { id: 87, name: 'Osc_B_Fluct', label: 'OscB Fluct', defaultValue: 0, bipolar: false }, + { id: 90, name: 'Osc_B_PM_Self', label: 'OscB PM-Self', defaultValue: 0, bipolar: true }, + { id: 94, name: 'Osc_B_PM_A', label: 'OscB PM-A', defaultValue: 0, bipolar: true }, + { id: 98, name: 'Osc_B_PM_FB', label: 'OscB PM-FB', defaultValue: 0, bipolar: true }, + { id: 302, name: 'Osc_B_Phase', label: 'OscB Phase', defaultValue: 0, bipolar: true }, + + // --- Shaper A (6) --- + { id: 71, name: 'Shp_A_Drive', label: 'ShpA Drive', defaultValue: 0.2, bipolar: false }, + { id: 74, name: 'Shp_A_Fold', label: 'ShpA Fold', defaultValue: 0.5, bipolar: false }, + { id: 75, name: 'Shp_A_Asym', label: 'ShpA Asym', defaultValue: 0, bipolar: false }, + { id: 76, name: 'Shp_A_Mix', label: 'ShpA Mix', defaultValue: 0, bipolar: true }, + { id: 78, name: 'Shp_A_FB_Mix', label: 'ShpA FB Mix', defaultValue: 0, bipolar: false }, + { id: 81, name: 'Shp_A_Ring_Mod', label: 'ShpA Ring', defaultValue: 0, bipolar: false }, + + // --- Shaper B (6) --- + { id: 101, name: 'Shp_B_Drive', label: 'ShpB Drive', defaultValue: 0.2, bipolar: false }, + { id: 104, name: 'Shp_B_Fold', label: 'ShpB Fold', defaultValue: 0.5, bipolar: false }, + { id: 105, name: 'Shp_B_Asym', label: 'ShpB Asym', defaultValue: 0, bipolar: false }, + { id: 106, name: 'Shp_B_Mix', label: 'ShpB Mix', defaultValue: 0, bipolar: true }, + { id: 108, name: 'Shp_B_FB_Mix', label: 'ShpB FB Mix', defaultValue: 0, bipolar: false }, + { id: 111, name: 'Shp_B_Ring_Mod', label: 'ShpB Ring', defaultValue: 0, bipolar: false }, + + // --- Comb Filter (9) --- + { id: 113, name: 'Comb_Flt_In_A_B', label: 'Comb In A/B', defaultValue: 0, bipolar: false }, + { id: 115, name: 'Comb_Flt_Pitch', label: 'Comb Pitch', defaultValue: 0.5, bipolar: false }, + { id: 119, name: 'Comb_Flt_Decay', label: 'Comb Decay', defaultValue: 0, bipolar: true }, + { id: 123, name: 'Comb_Flt_AP_Tune', label: 'Comb AP Tune', defaultValue: 1, bipolar: false }, + { id: 127, name: 'Comb_Flt_AP_Res', label: 'Comb AP Res', defaultValue: 0.5, bipolar: false }, + { id: 129, name: 'Comb_Flt_LP_Tune', label: 'Comb LP Tune', defaultValue: 1, bipolar: false }, + { id: 133, name: 'Comb_Flt_PM', label: 'Comb PM', defaultValue: 0, bipolar: true }, + { id: 135, name: 'Comb_Flt_PM_A_B', label: 'Comb PM A/B', defaultValue: 0, bipolar: false }, + + // --- State Variable Filter (9) --- + { id: 136, name: 'SV_Flt_In_A_B', label: 'SVF In A/B', defaultValue: 0, bipolar: false }, + { id: 138, name: 'SV_Flt_Comb_Mix', label: 'SVF CombMix', defaultValue: 0, bipolar: true }, + { id: 140, name: 'SV_Flt_Cut', label: 'SVF Cutoff', defaultValue: 0.5, bipolar: false }, + { id: 144, name: 'SV_Flt_Res', label: 'SVF Reso', defaultValue: 0.5, bipolar: false }, + { id: 148, name: 'SV_Flt_Spread', label: 'SVF Spread', defaultValue: 0.2, bipolar: true }, + { id: 150, name: 'SV_Flt_LBH', label: 'SVF L/B/H', defaultValue: 0, bipolar: false }, + { id: 152, name: 'SV_Flt_Par', label: 'SVF Par', defaultValue: 0, bipolar: true }, + { id: 153, name: 'SV_Flt_FM', label: 'SVF FM', defaultValue: 0, bipolar: true }, + { id: 155, name: 'SV_Flt_FM_A_B', label: 'SVF FM A/B', defaultValue: 0, bipolar: false }, + + // --- Gap Filter (6) --- + { id: 201, name: 'Gap_Flt_Center', label: 'Gap Center', defaultValue: 0.5, bipolar: false }, + { id: 203, name: 'Gap_Flt_Stereo', label: 'Gap Stereo', defaultValue: 0, bipolar: true }, + { id: 204, name: 'Gap_Flt_Gap', label: 'Gap Width', defaultValue: 0.125, bipolar: false }, + { id: 206, name: 'Gap_Flt_Res', label: 'Gap Res', defaultValue: 0.5, bipolar: false }, + { id: 207, name: 'Gap_Flt_Bal', label: 'Gap Bal', defaultValue: 0, bipolar: true }, + { id: 209, name: 'Gap_Flt_Mix', label: 'Gap Mix', defaultValue: 0, bipolar: true }, + + // --- Feedback Mixer (9) --- + { id: 156, name: 'FB_Mix_Comb', label: 'FB Comb', defaultValue: 0, bipolar: true }, + { id: 158, name: 'FB_Mix_SVF', label: 'FB SVF', defaultValue: 0, bipolar: true }, + { id: 160, name: 'FB_Mix_FX', label: 'FB FX', defaultValue: 0, bipolar: true }, + { id: 162, name: 'FB_Mix_Rvb', label: 'FB Reverb', defaultValue: 0.5, bipolar: false }, + { id: 164, name: 'FB_Mix_Drive', label: 'FB Drive', defaultValue: 0.286, bipolar: false }, + { id: 166, name: 'FB_Mix_Fold', label: 'FB Fold', defaultValue: 0.5, bipolar: false }, + { id: 167, name: 'FB_Mix_Asym', label: 'FB Asym', defaultValue: 0, bipolar: false }, + { id: 299, name: 'FB_Mix_Lvl', label: 'FB Level', defaultValue: 0.38, bipolar: false }, + { id: 346, name: 'FB_Mix_Osc', label: 'FB Osc', defaultValue: 0, bipolar: true }, + + // --- Output Mixer (14) --- + { id: 169, name: 'Out_Mix_A_Lvl', label: 'Out A Lvl', defaultValue: 0.75, bipolar: true }, + { id: 171, name: 'Out_Mix_A_Pan', label: 'Out A Pan', defaultValue: 0, bipolar: true }, + { id: 172, name: 'Out_Mix_B_Lvl', label: 'Out B Lvl', defaultValue: 0, bipolar: true }, + { id: 174, name: 'Out_Mix_B_Pan', label: 'Out B Pan', defaultValue: 0, bipolar: true }, + { id: 175, name: 'Out_Mix_Comb_Lvl', label: 'Out Comb Lvl', defaultValue: 0, bipolar: true }, + { id: 177, name: 'Out_Mix_Comb_Pan', label: 'Out Comb Pan', defaultValue: 0, bipolar: true }, + { id: 178, name: 'Out_Mix_SVF_Lvl', label: 'Out SVF Lvl', defaultValue: 0, bipolar: true }, + { id: 180, name: 'Out_Mix_SVF_Pan', label: 'Out SVF Pan', defaultValue: 0, bipolar: true }, + { id: 181, name: 'Out_Mix_Drive', label: 'Out Drive', defaultValue: 0, bipolar: false }, + { id: 183, name: 'Out_Mix_Fold', label: 'Out Fold', defaultValue: 0.5, bipolar: false }, + { id: 184, name: 'Out_Mix_Asym', label: 'Out Asym', defaultValue: 0, bipolar: false }, + { id: 185, name: 'Out_Mix_Lvl', label: 'Out Level', defaultValue: 0.38, bipolar: false }, + { id: 187, name: 'Out_Mix_Key_Pan', label: 'Out KeyPan', defaultValue: 0, bipolar: false }, + { id: 362, name: 'Out_Mix_To_FX', label: 'Out ToFX', defaultValue: 0, bipolar: false }, + + // --- Cabinet (8) --- + { id: 188, name: 'Cabinet_Drive', label: 'Cab Drive', defaultValue: 0.4, bipolar: false }, + { id: 190, name: 'Cabinet_Fold', label: 'Cab Fold', defaultValue: 0.25, bipolar: false }, + { id: 191, name: 'Cabinet_Asym', label: 'Cab Asym', defaultValue: 0.25, bipolar: false }, + { id: 192, name: 'Cabinet_Tilt', label: 'Cab Tilt', defaultValue: 0.5, bipolar: true }, + { id: 194, name: 'Cabinet_Hi_Cut', label: 'Cab HiCut', defaultValue: 0.625, bipolar: false }, + { id: 196, name: 'Cabinet_Lo_Cut', label: 'Cab LoCut', defaultValue: 0.125, bipolar: false }, + { id: 197, name: 'Cabinet_Cab_Lvl', label: 'Cab Level', defaultValue: 0.72, bipolar: false }, + { id: 199, name: 'Cabinet_Mix', label: 'Cab Mix', defaultValue: 0, bipolar: false }, + + // --- Flanger (13) --- + { id: 211, name: 'Flanger_Time_Mod', label: 'Flng TimeMod', defaultValue: 0, bipolar: true }, + { id: 213, name: 'Flanger_Phase', label: 'Flng Phase', defaultValue: 0.5, bipolar: false }, + { id: 214, name: 'Flanger_Rate', label: 'Flng Rate', defaultValue: 0.317, bipolar: false }, + { id: 216, name: 'Flanger_Time', label: 'Flng Time', defaultValue: 0.317, bipolar: false }, + { id: 218, name: 'Flanger_Stereo', label: 'Flng Stereo', defaultValue: 0, bipolar: true }, + { id: 219, name: 'Flanger_Feedback', label: 'Flng FB', defaultValue: 0, bipolar: true }, + { id: 221, name: 'Flanger_Cross_FB', label: 'Flng XFB', defaultValue: 0.5, bipolar: true }, + { id: 222, name: 'Flanger_Hi_Cut', label: 'Flng HiCut', defaultValue: 0.75, bipolar: false }, + { id: 223, name: 'Flanger_Mix', label: 'Flng Mix', defaultValue: 0, bipolar: true }, + { id: 307, name: 'Flanger_Envelope', label: 'Flng Env', defaultValue: 0, bipolar: false }, + { id: 308, name: 'Flanger_AP_Mod', label: 'Flng AP Mod', defaultValue: 0, bipolar: true }, + { id: 310, name: 'Flanger_AP_Tune', label: 'Flng AP Tune', defaultValue: 1, bipolar: false }, + { id: 389, name: 'Flanger_Tremolo', label: 'Flng Trem', defaultValue: 0, bipolar: false }, + + // --- Echo (7) --- + { id: 225, name: 'Echo_Time', label: 'Echo Time', defaultValue: 0.433, bipolar: false }, + { id: 227, name: 'Echo_Stereo', label: 'Echo Stereo', defaultValue: 0, bipolar: true }, + { id: 229, name: 'Echo_Feedback', label: 'Echo FB', defaultValue: 0.5, bipolar: false }, + { id: 231, name: 'Echo_Cross_FB', label: 'Echo XFB', defaultValue: 0.5, bipolar: false }, + { id: 232, name: 'Echo_Hi_Cut', label: 'Echo HiCut', defaultValue: 0.75, bipolar: false }, + { id: 233, name: 'Echo_Mix', label: 'Echo Mix', defaultValue: 0, bipolar: false }, + { id: 342, name: 'Echo_Send', label: 'Echo Send', defaultValue: 1, bipolar: false }, + + // --- Reverb (6) --- + { id: 235, name: 'Reverb_Size', label: 'Verb Size', defaultValue: 0.33, bipolar: false }, + { id: 237, name: 'Reverb_Pre_Dly', label: 'Verb PreDly', defaultValue: 0.33, bipolar: false }, + { id: 238, name: 'Reverb_Color', label: 'Verb Color', defaultValue: 0.5, bipolar: false }, + { id: 240, name: 'Reverb_Chorus', label: 'Verb Chorus', defaultValue: 0.25, bipolar: false }, + { id: 241, name: 'Reverb_Mix', label: 'Verb Mix', defaultValue: 0, bipolar: false }, + { id: 344, name: 'Reverb_Send', label: 'Verb Send', defaultValue: 1, bipolar: false }, + + // --- Unison (3) --- + { id: 250, name: 'Unison_Detune', label: 'Uni Detune', defaultValue: 0.004, bipolar: false }, + { id: 252, name: 'Unison_Phase', label: 'Uni Phase', defaultValue: 0, bipolar: false }, + { id: 253, name: 'Unison_Pan', label: 'Uni Pan', defaultValue: 0, bipolar: false }, + + // --- Mono (1) --- + { id: 367, name: 'Mono_Grp_Glide', label: 'Mono Glide', defaultValue: 0, bipolar: false }, ]; // Parameter display names for the param bar UI export const SYNTH_PARAM_NAMES = SYNTH_PARAM_MAP.map(p => p.label); -// Colors for synth mode param bars (warm/synth palette) -export const SYNTH_PARAM_COLORS = [ - '#ff6b35', '#ff9a3c', '#e85d04', '#ffb703', - '#fb5607', '#ff006e', '#8338ec', '#3a86ff', - '#06d6a0', '#118ab2', '#073b4c', '#ef476f', - '#ffd166', '#06d6a0', '#118ab2', '#8ecae6', - '#219ebc', '#ffb4a2', '#e5989b', '#b5838d', -]; +// Generate colors by group using HSL for visual distinction +// Each synthesis section gets a hue range, params within get varying lightness +function generateParamColors() { + // Group hues: envelope=warm red, osc=orange, shaper=magenta, comb=cyan, + // svf=blue, gap=teal, fb=purple, out=green, cab=brown, flanger=pink, + // echo=sky, reverb=lavender, unison=lime, mono=gold + const groupColors = [ + // Envelope A (7) - warm red + ...hslRange(0, 75, 55, 7), + // Envelope B (7) - coral + ...hslRange(15, 75, 55, 7), + // Envelope C (6) - salmon + ...hslRange(30, 70, 55, 6), + // Oscillator A (5) - orange + ...hslRange(35, 85, 55, 5), + // Oscillator B (5) - amber + ...hslRange(45, 85, 55, 5), + // Shaper A (6) - magenta + ...hslRange(320, 75, 55, 6), + // Shaper B (6) - rose + ...hslRange(340, 70, 55, 6), + // Comb Filter (9) - cyan + ...hslRange(180, 70, 50, 9, true), + // State Variable Filter (9) - blue + ...hslRange(210, 75, 55, 9, true), + // Gap Filter (6) - teal + ...hslRange(165, 65, 50, 6), + // Feedback Mixer (9) - purple + ...hslRange(270, 65, 55, 9, true), + // Output Mixer (14) - green + ...hslRange(130, 65, 50, 14, true), + // Cabinet (8) - brown/earth + ...hslRange(25, 55, 50, 8), + // Flanger (13) - pink + ...hslRange(300, 60, 60, 13, true), + // Echo (7) - sky blue + ...hslRange(195, 70, 55, 7), + // Reverb (6) - lavender + ...hslRange(255, 55, 65, 6), + // Unison (3) - lime + ...hslRange(90, 70, 50, 3), + // Mono (1) - gold + ...hslRange(50, 80, 55, 1), + ]; + return groupColors; +} + +function hslRange(hue, sat, lightBase, count, varyHue = false) { + const colors = []; + for (let i = 0; i < count; i++) { + const t = count > 1 ? i / (count - 1) : 0; + const l = lightBase + (t - 0.5) * 16; + const h = varyHue ? hue + (t - 0.5) * 15 : hue; + const s = sat; + colors.push(`hsl(${Math.round(h)}, ${Math.round(s)}%, ${Math.round(l)}%)`); + } + return colors; +} + +export const SYNTH_PARAM_COLORS = generateParamColors(); diff --git a/playground/js/ui/param-display.js b/playground/js/ui/param-display.js index 550b824..cb94542 100644 --- a/playground/js/ui/param-display.js +++ b/playground/js/ui/param-display.js @@ -121,4 +121,13 @@ export class ParamDisplay { this.bars[i].fill.style.background = this.paramColors[i] || '#888'; } } + + rebuild(numParams, names, colors) { + this.numParams = numParams; + this.values = new Array(numParams).fill(0.5); + this.paramNames = names || DEFAULT_PARAM_NAMES; + this.paramColors = colors || DEFAULT_PARAM_COLORS; + this.activeBar = -1; + this.build(); + } }