diff options
Diffstat (limited to 'tools')
| -rw-r--r-- | tools/mq_editor/README.md | 26 | ||||
| -rw-r--r-- | tools/mq_editor/app.js | 222 | ||||
| -rw-r--r-- | tools/mq_editor/editor.js | 62 | ||||
| -rw-r--r-- | tools/mq_editor/index.html | 441 | ||||
| -rw-r--r-- | tools/mq_editor/mq_extract.js | 51 | ||||
| -rw-r--r-- | tools/mq_editor/mq_synth.js | 117 | ||||
| -rw-r--r-- | tools/mq_editor/style.css | 104 | ||||
| -rw-r--r-- | tools/mq_editor/test_fft.html | 229 | ||||
| -rw-r--r-- | tools/mq_editor/utils.js | 66 | ||||
| -rw-r--r-- | tools/mq_editor/viewer.js | 245 |
10 files changed, 695 insertions, 868 deletions
diff --git a/tools/mq_editor/README.md b/tools/mq_editor/README.md index d79a2f8..7d7d06b 100644 --- a/tools/mq_editor/README.md +++ b/tools/mq_editor/README.md @@ -8,9 +8,9 @@ McAulay-Quatieri sinusoidal analysis and synthesis tool. open tools/mq_editor/index.html ``` -1. Click **Open WAV** (or **âš— Test WAV** for a built-in 440+660 Hz test signal) +1. Click **Open WAV** 2. Click **Extract Partials** (optional — Explore/Contour modes work immediately after load) -3. Press **1** to play synthesized, **2** to play original +3. Press **1** to play original, **2** to play synthesized, **3** to play current partial ## UI @@ -86,8 +86,8 @@ Committed partials are prepended to the partial list with full undo support. | Key | Action | |-----|--------| -| `1` | Play synthesized audio | -| `2` | Play original audio | +| `1` | Play original audio | +| `2` | Play synthesized audio | | `3` | Play selected partial alone | | `E` | Extract Partials | | `N` | New partial (flat 440 Hz, full duration) | @@ -95,6 +95,7 @@ Committed partials are prepended to the partial list with full undo support. | `C` | Toggle ≋ Contour mode (iso-energy tracking) | | `P` | Toggle raw peak overlay | | `A` | Toggle mini-spectrum: original ↔ synthesized | +| `Delete` | Delete selected partial | | `Esc` | Exit explore/contour mode · deselect partial | | `Ctrl+Z` | Undo | | `Ctrl+Y` / `Ctrl+Shift+Z` | Redo | @@ -104,10 +105,12 @@ Committed partials are prepended to the partial list with full undo support. ## Architecture - `index.html` — UI, playback, extraction orchestration, keyboard shortcuts +- `style.css` — All UI styles (extracted from inline styles) - `editor.js` — Property panel and amplitude bezier editor for selected partials - `fft.js` — Cooley-Tukey radix-2 FFT + STFT cache - `mq_extract.js` — MQ algorithm: peak detection, forward tracking, backward expansion, bezier fitting - `mq_synth.js` — Oscillator bank + two-pole resonator synthesis from extracted partials +- `utils.js` — Shared helpers: `evalBezier`, `evalBezierAmp`, `clamp`, canvas coordinate utilities - `viewer.js` — Visualization: coordinate API, spectrogram, partials, mini-spectrum, mouse/zoom ### viewer.js coordinate API @@ -123,6 +126,19 @@ Committed partials are prepended to the partial list with full undo support. | `normalizeDB(db, maxDB)` | dB → intensity [0..1] over 80 dB range | | `partialColor(p)` | partial index → display color | +## Amplitude Bezier Editor + +The bottom panel shows the amplitude envelope for the selected partial as a **Lagrange interpolating curve** through four control points P0–P3. + +- **P0, P3** (endpoints): drag vertically to adjust amplitude at the start/end of the partial. Time positions are fixed to `t_start`/`t_end`. +- **P1, P2** (inner points): drag in **both axes** — vertically for amplitude, horizontally for time position. The ordering constraint `t0 < t1 < t2 < t3` is enforced automatically. + +Cursor hints: `ns-resize` for P0/P3, `move` for P1/P2. + +All four time and amplitude values are also editable as numbers in the property panel above. + +--- + ## Post-Synthesis Filters Global LP/HP filters applied after the oscillator bank, before normalization. @@ -200,7 +216,7 @@ For a partial at 440 Hz with `spread = 0.02`: `BW ≈ 8.8 Hz`, `r ≈ exp(−π - [x] Synthesized STFT cache for FFT comparison - [x] Phase 3: Editing UI - [x] Partial selection with property panel (freq/amp/synth tabs) - - [x] Amplitude bezier drag editor + - [x] Amplitude bezier drag editor (P1/P2 horizontally movable, ordering constrained) - [x] Synth params with jog sliders (decay, jitter, spread) - [x] Auto-spread detection per partial and global - [x] Mute / delete partials diff --git a/tools/mq_editor/app.js b/tools/mq_editor/app.js index 59849da..9df00fb 100644 --- a/tools/mq_editor/app.js +++ b/tools/mq_editor/app.js @@ -4,19 +4,36 @@ function k1ToHz(k, sr) { if (k >= 1.0) return sr / 2; const cosW = (2 - 2*k - k*k) / (2*(1 - k)); - return Math.acos(Math.max(-1, Math.min(1, cosW))) * sr / (2 * Math.PI); + return Math.acos(clamp(cosW, -1, 1)) * sr / (2 * Math.PI); } // HP: y[n] = k*(y[n-1]+x[n]-x[n-1]) => -3dB from peak at cos(w) = 2k/(1+k²) function k2ToHz(k, sr) { if (k >= 1.0) return 0; const cosW = 2*k / (1 + k*k); - return Math.acos(Math.max(-1, Math.min(1, cosW))) * sr / (2 * Math.PI); + return Math.acos(clamp(cosW, -1, 1)) * sr / (2 * Math.PI); } function fmtHz(f) { return f >= 1000 ? (f/1000).toFixed(1) + 'k' : Math.round(f) + 'Hz'; } function getSR() { return (typeof audioBuffer !== 'undefined' && audioBuffer) ? audioBuffer.sampleRate : 44100; } +// Params dropdown toggle +(function() { + const btn = document.getElementById('paramsBtn'); + const panel = document.getElementById('paramsPanel'); + btn.addEventListener('click', (e) => { + e.stopPropagation(); + const open = panel.classList.toggle('open'); + btn.classList.toggle('params-open', open); + }); + document.addEventListener('click', (e) => { + if (!panel.contains(e.target) && e.target !== btn) { + panel.classList.remove('open'); + btn.classList.remove('params-open'); + } + }); +})(); + // LP/HP slider live display document.getElementById('lpK1').addEventListener('input', function() { const k = parseFloat(this.value); @@ -70,14 +87,18 @@ function pushUndo() { _updateUndoRedoBtns(); } -function _applySnapshot(snap) { - extractedPartials = snap; - editor.setPartials(snap); +function refreshPartialsView(selectIdx = -1) { + editor.setPartials(extractedPartials); if (viewer) { - viewer.setPartials(snap); - viewer.setKeepCount(snap.length > 0 ? getKeepCount() : 0); - viewer.selectPartial(-1); + viewer.setPartials(extractedPartials); + viewer.setKeepCount(extractedPartials && extractedPartials.length > 0 ? getKeepCount() : 0); + viewer.selectPartial(selectIdx); } +} + +function _applySnapshot(snap) { + extractedPartials = snap; + refreshPartialsView(); _updateUndoRedoBtns(); } @@ -168,6 +189,7 @@ function loadAudioBuffer(buffer, label) { }); } + if (viewer) viewer.destroy(); viewer = new SpectrogramViewer(canvas, audioBuffer, stftCache); viewer.setFrames(peakFrames); document.getElementById('exploreBtn').disabled = false; @@ -198,15 +220,13 @@ function loadAudioBuffer(buffer, label) { if (!extractedPartials) extractedPartials = []; pushUndo(); const {spread_above, spread_below} = autodetectSpread(partial, stftCache, fftSize, audioBuffer.sampleRate); - partial.replicas = { ...partial.replicas, spread_above, spread_below }; + if (!partial.harmonics) partial.harmonics = { decay: 0.0, freq_mult: 2.0, jitter: 0.05, spread_above: 0.02, spread_below: 0.02 }; + partial.harmonics.spread_above = spread_above; + partial.harmonics.spread_below = spread_below; extractedPartials.unshift(partial); - editor.setPartials(extractedPartials); - viewer.setPartials(extractedPartials); - viewer.setKeepCount(getKeepCount()); - viewer.selectPartial(0); + refreshPartialsView(0); setStatus(`${exploreMode}: added partial (${extractedPartials.length} total)`, 'info'); }; - if (label.startsWith('Test WAV')) validateTestWAVPeaks(stftCache); }, 10); } @@ -231,25 +251,6 @@ wavFile.addEventListener('change', async (e) => { } }); -// Test WAV: generate synthetic signal (two sine waves) in-memory -document.getElementById('testWavBtn').addEventListener('click', () => { - initAudioContext(); - const SR = 32000; - const duration = 2.0; - const numSamples = SR * duration; - - // Two sine waves: 440 Hz (A4) + 660 Hz (E5, perfect fifth), equal amplitude - const buf = audioContext.createBuffer(1, numSamples, SR); - const data = buf.getChannelData(0); - for (let i = 0; i < numSamples; ++i) { - data[i] = 0.5 * Math.sin(2 * Math.PI * 440 * i / SR) - + 0.5 * Math.sin(2 * Math.PI * 660 * i / SR); - } - - fileLabel.textContent = 'test-440+660hz.wav'; - loadAudioBuffer(buf, 'Test WAV: 440Hz + 660Hz (2s, 32kHz)'); -}); - // Update cache when hop size changes hopSize.addEventListener('change', () => { const val = Math.max(64, parseInt(hopSize.value) || 64); @@ -295,12 +296,10 @@ function runExtraction() { }); extractedPartials = result.partials; - editor.setPartials(result.partials); + autoSpreadAll(); viewer.setFrames(result.frames); setStatus(`Extracted ${result.partials.length} partials`, 'info'); - viewer.setPartials(result.partials); - viewer.setKeepCount(getKeepCount()); - viewer.selectPartial(-1); + refreshPartialsView(); } catch (err) { setStatus('Extraction error: ' + err.message, 'error'); @@ -334,27 +333,17 @@ function createNewPartial() { v0: 440, v1: 440, v2: 440, v3: 440, a0: 1.0, a1: 1.0, a2: 1.0, a3: 1.0, }, - replicas: { decay_alpha: 0.1, jitter: 0.05, spread_above: 0.02, spread_below: 0.02 }, + harmonics: { decay: 0.0, freq_mult: 2.0, jitter: 0.05, spread_above: 0.02, spread_below: 0.02 }, }; extractedPartials.unshift(newPartial); - editor.setPartials(extractedPartials); - if (viewer) { - viewer.setPartials(extractedPartials); - viewer.setKeepCount(getKeepCount()); - viewer.selectPartial(0); - } + refreshPartialsView(0); } function clearAllPartials() { if (!extractedPartials || extractedPartials.length === 0) return; pushUndo(); extractedPartials = []; - editor.setPartials([]); - if (viewer) { - viewer.setPartials([]); - viewer.setKeepCount(0); - viewer.selectPartial(-1); - } + refreshPartialsView(); } document.getElementById('newPartialBtn').addEventListener('click', createNewPartial); @@ -364,22 +353,24 @@ document.getElementById('contourBtn').addEventListener('click', () => setExplore document.getElementById('undoBtn').addEventListener('click', undo); document.getElementById('redoBtn').addEventListener('click', redo); -autoSpreadAllBtn.addEventListener('click', () => { +function autoSpreadAll() { if (!extractedPartials || !stftCache) return; const fs = stftCache.fftSize; const sr = audioBuffer.sampleRate; - const defaults = { decay_alpha: 0.1, jitter: 0.05, spread_above: 0.02, spread_below: 0.02 }; + const defaults = { decay: 0.0, freq_mult: 2.0, jitter: 0.05, spread_above: 0.02, spread_below: 0.02 }; for (const p of extractedPartials) { const {spread_above, spread_below} = autodetectSpread(p, stftCache, fs, sr); - if (!p.replicas) p.replicas = { ...defaults }; - p.replicas.spread_above = spread_above; - p.replicas.spread_below = spread_below; + if (!p.harmonics) p.harmonics = { ...defaults }; + p.harmonics.spread_above = spread_above; + p.harmonics.spread_below = spread_below; } if (viewer) viewer.render(); const sel = viewer ? viewer.selectedPartial : -1; if (sel >= 0) editor.onPartialSelect(sel); setStatus(`Auto-spread applied to ${extractedPartials.length} partials`, 'info'); -}); +} + +autoSpreadAllBtn.addEventListener('click', autoSpreadAll); threshold.addEventListener('change', () => { if (stftCache) runExtraction(); @@ -428,12 +419,14 @@ function stopAudio() { setStatus('Stopped', 'info'); } -// Play audio -playBtn.addEventListener('click', () => { +function playOriginal() { if (!audioBuffer || !audioContext) return; stopAudio(); playAudioBuffer(audioBuffer, 'Playing...'); -}); +} + +// Play audio +playBtn.addEventListener('click', playOriginal); // Stop audio stopBtn.addEventListener('click', () => { @@ -464,6 +457,25 @@ function getSynthParams() { }; } +// Synthesize partials and return an AudioBuffer, trimmed to [t_start-margin, t_end+margin] +function getAudioBuffer(partials, margin = 0) { + const sr = audioBuffer.sampleRate; + const {integratePhase, opts} = getSynthParams(); + const pcm = synthesizeMQ(partials, sr, audioBuffer.duration, integratePhase, opts); + let startSample = 0, endSample = pcm.length; + if (margin >= 0 && partials.length > 0) { + const times = partials.flatMap(p => p.times); + const tStart = Math.min(...times); + const tEnd = Math.max(...times); + startSample = Math.max(0, Math.floor((tStart - margin) * sr)); + endSample = Math.min(pcm.length, Math.ceil((tEnd + margin) * sr)); + } + const trimmed = pcm.subarray(startSample, endSample); + const buf = audioContext.createBuffer(1, trimmed.length, sr); + buf.getChannelData(0).set(trimmed); + return buf; +} + // Play synthesized audio function playSynthesized() { if (!extractedPartials || extractedPartials.length === 0) { @@ -480,16 +492,14 @@ function playSynthesized() { const partialsToUse = extractedPartials.slice(0, keepCount).filter(p => !p.muted); setStatus(`Synthesizing ${partialsToUse.length}/${extractedPartials.length} partials (${keepPct.value}%)...`, 'info'); - const {integratePhase, opts} = getSynthParams(); - const pcm = synthesizeMQ(partialsToUse, audioBuffer.sampleRate, audioBuffer.duration, - integratePhase, opts); - if (viewer) { + const {integratePhase, opts} = getSynthParams(); + const pcm = synthesizeMQ(partialsToUse, audioBuffer.sampleRate, audioBuffer.duration, + integratePhase, opts); viewer.setSynthStftCache(new STFTCache(pcm, audioBuffer.sampleRate, fftSize, parseInt(hopSize.value))); } - const synthBuffer = audioContext.createBuffer(1, pcm.length, audioBuffer.sampleRate); - synthBuffer.getChannelData(0).set(pcm); + const synthBuffer = getAudioBuffer(partialsToUse); playAudioBuffer(synthBuffer, `Playing synthesized (${partialsToUse.length}/${extractedPartials.length} partials, ${keepPct.value}%)...`); } @@ -505,12 +515,10 @@ document.addEventListener('keydown', (e) => { } if (e.code === 'Digit1') { e.preventDefault(); - playSynthesized(); + if (!playBtn.disabled) playOriginal(); } else if (e.code === 'Digit2') { e.preventDefault(); - if (!playBtn.disabled) { - playBtn.click(); - } + playSynthesized(); } else if (e.code === 'Digit3') { e.preventDefault(); const sel = viewer ? viewer.selectedPartial : -1; @@ -518,12 +526,7 @@ document.addEventListener('keydown', (e) => { const partial = extractedPartials[sel]; if (!partial) return; stopAudio(); - const {integratePhase, opts} = getSynthParams(); - const pcm = synthesizeMQ([partial], audioBuffer.sampleRate, audioBuffer.duration, - integratePhase, opts); - const buf = audioContext.createBuffer(1, pcm.length, audioBuffer.sampleRate); - buf.getChannelData(0).set(pcm); - playAudioBuffer(buf, `Playing partial #${sel}...`); + playAudioBuffer(getAudioBuffer([partial], 0.05), `Playing partial #${sel}...`); } else if (e.code === 'KeyP') { e.preventDefault(); if (viewer) viewer.togglePeaks(); @@ -542,6 +545,9 @@ document.addEventListener('keydown', (e) => { } else if (e.code === 'KeyC' && !e.ctrlKey && !e.metaKey) { e.preventDefault(); if (!document.getElementById('contourBtn').disabled) setExploreMode(exploreMode === 'contour' ? false : 'contour'); + } else if (e.code === 'Delete' || e.code === 'Backspace') { + e.preventDefault(); + document.getElementById('deletePartialBtn').click(); } else if (e.code === 'Escape') { if (exploreMode) { setExploreMode(false); return; } if (viewer) viewer.selectPartial(-1); @@ -557,69 +563,3 @@ document.querySelectorAll('.tab-btn').forEach(btn => { document.getElementById('tab' + btn.dataset.tab).style.display = ''; }); }); - -// --- Test WAV peak validation --- -function validateTestWAVPeaks(cache) { - const SR = cache.sampleRate; - const N = cache.fftSize; - const binWidth = SR / N; // Hz per bin - const numBins = N / 2; - const numBars = 100; // mini-spectrum bar count - - // Use a mid-signal frame (avoid edge effects) - const midFrame = cache.frames[Math.floor(cache.frames.length / 2)]; - if (!midFrame) { console.error('[TestWAV] No frames computed'); return; } - const sq = midFrame.squaredAmplitude; - const t = midFrame.time; - - console.group('[TestWAV] Peak validation @ t=' + t.toFixed(3) + 's'); - - // Top 5 bins by magnitude - const ranked = Array.from(sq) - .map((v, i) => ({ bin: i, freq: i * binWidth, db: 10 * Math.log10(Math.max(v, 1e-20)) })) - .sort((a, b) => b.db - a.db); - console.log('Top 5 FFT bins:'); - ranked.slice(0, 5).forEach(x => - console.log(` bin ${x.bin.toString().padStart(3)}: ${x.freq.toFixed(1).padStart(7)}Hz ${x.db.toFixed(1)}dB`)); - - // Expected bins for 440/660 Hz - const bin440 = Math.round(440 / binWidth); - const bin660 = Math.round(660 / binWidth); - const db440 = 10 * Math.log10(Math.max(sq[bin440], 1e-20)); - const db660 = 10 * Math.log10(Math.max(sq[bin660], 1e-20)); - console.log(`440Hz → bin ${bin440} (${(bin440 * binWidth).toFixed(1)}Hz): ${db440.toFixed(1)}dB`); - console.log(`660Hz → bin ${bin660} (${(bin660 * binWidth).toFixed(1)}Hz): ${db660.toFixed(1)}dB`); - - // Validate: 440/660 Hz must be in top-10 - const top10Freqs = ranked.slice(0, 10).map(x => x.freq); - const pass440 = top10Freqs.some(f => Math.abs(f - 440) < binWidth * 2); - const pass660 = top10Freqs.some(f => Math.abs(f - 660) < binWidth * 2); - console.log('Peak check: 440Hz ' + (pass440 ? 'PASS ✓' : 'FAIL ✗') + - ', 660Hz ' + (pass660 ? 'PASS ✓' : 'FAIL ✗')); - - // Mini-spectrum: which bar do these peaks land in? - const bar440 = Math.floor(bin440 * numBars / numBins); - const bar660 = Math.floor(bin660 * numBars / numBins); - const sampledBin440 = Math.floor(bar440 * numBins / numBars); - const sampledBin660 = Math.floor(bar660 * numBars / numBars); - console.log('Mini-spectrum (linear scale, 100 bars):'); - console.log(` 440Hz (bin ${bin440}) → bar ${bar440}/100 [bar samples bin ${sampledBin440} = ${(sampledBin440 * binWidth).toFixed(1)}Hz]`); - console.log(` 660Hz (bin ${bin660}) → bar ${bar660}/100 [bar samples bin ${Math.floor(bar660 * numBins / numBars)} = ${(Math.floor(bar660 * numBins / numBars) * binWidth).toFixed(1)}Hz]`); - if (bar440 < 5 || bar660 < 5) { - console.warn(' âš BUG: peaks fall in bars ' + bar440 + ' and ' + bar660 + - ' (leftmost ~' + Math.max(bar440, bar660) * 2 + 'px of 200px canvas)' + - ' — linear scale hides low-frequency peaks. Need log-scale bar mapping.'); - } - - // Main spectrogram: confirm bins are in draw range - const mainFreqStart = 20, mainFreqEnd = 16000; - const inRange440 = 440 >= mainFreqStart && 440 <= mainFreqEnd; - const inRange660 = 660 >= mainFreqStart && 660 <= mainFreqEnd; - const norm440 = (Math.log2(440) - Math.log2(mainFreqStart)) / (Math.log2(mainFreqEnd) - Math.log2(mainFreqStart)); - const norm660 = (Math.log2(660) - Math.log2(mainFreqStart)) / (Math.log2(mainFreqEnd) - Math.log2(mainFreqStart)); - console.log('Main spectrogram (log Y-axis, 600px):'); - console.log(` 440Hz: in range=${inRange440}, y=${Math.round(600 * (1 - norm440))}px, db=${db440.toFixed(1)}dB → intensity=${Math.min(1, Math.pow(Math.max(0, (db440 + 80) / 80), 2)).toFixed(2)}`); - console.log(` 660Hz: in range=${inRange660}, y=${Math.round(600 * (1 - norm660))}px, db=${db660.toFixed(1)}dB → intensity=${Math.min(1, Math.pow(Math.max(0, (db660 + 80) / 80), 2)).toFixed(2)}`); - - console.groupEnd(); -} diff --git a/tools/mq_editor/editor.js b/tools/mq_editor/editor.js index 0854ec0..b07664e 100644 --- a/tools/mq_editor/editor.js +++ b/tools/mq_editor/editor.js @@ -25,8 +25,7 @@ class PartialEditor { // Private state this._selectedIndex = -1; - this._dragPointIndex = -1; - this._dragCompanionOff = null; // {dt, dv} offset of companion handle relative to anchor + this._dragPointIndex = -1; this._amp = { tMin: 0, tMax: 1, ampTop: 1 }; this._setupButtons(); @@ -125,8 +124,8 @@ class PartialEditor { const grid = this._synthGrid; grid.innerHTML = ''; - const repDefaults = { decay_alpha: 0.1, jitter: 0.05, spread_above: 0.02, spread_below: 0.02 }; - const resDefaults = { r: 0.995, gainComp: 1.0 }; + const harmDefaults = { decay: 0.0, freq_mult: 2.0, jitter: 0.05, spread_above: 0.02, spread_below: 0.02 }; + const resDefaults = { r: 0.995, gainComp: 1.0 }; const isResonator = !!(partial.resonator && partial.resonator.enabled); @@ -157,16 +156,17 @@ class PartialEditor { sinSection.style.cssText = 'display:contents;'; sinSection.dataset.section = 'sinusoid'; - const rep = partial.replicas || {}; + const harm = partial.harmonics || {}; const sinParams = [ - { key: 'decay_alpha', label: 'decay', step: '0.001' }, + { key: 'decay', label: 'h.decay', step: '0.01', max: '0.90' }, + { key: 'freq_mult', label: 'h.freq', step: '0.01' }, { key: 'jitter', label: 'jitter', step: '0.001' }, { key: 'spread_above', label: 'spread ↑', step: '0.001' }, { key: 'spread_below', label: 'spread ↓', step: '0.001' }, ]; const sinInputs = {}; for (const p of sinParams) { - const val = rep[p.key] != null ? rep[p.key] : repDefaults[p.key]; + const val = harm[p.key] != null ? harm[p.key] : harmDefaults[p.key]; const lbl = document.createElement('span'); lbl.textContent = p.label; const inp = document.createElement('input'); @@ -174,22 +174,25 @@ class PartialEditor { inp.value = val.toFixed(3); inp.step = p.step; inp.min = '0'; + if (p.max) inp.max = p.max; inp.addEventListener('change', (e) => { if (!this.partials) return; - const v = parseFloat(e.target.value); + let v = parseFloat(e.target.value); if (isNaN(v)) return; - if (!this.partials[index].replicas) this.partials[index].replicas = { ...repDefaults }; - this.partials[index].replicas[p.key] = v; + if (p.max) v = Math.min(v, parseFloat(p.max)); + if (!this.partials[index].harmonics) this.partials[index].harmonics = { ...harmDefaults }; + this.partials[index].harmonics[p.key] = v; if (this.viewer) this.viewer.render(); }); sinInputs[p.key] = inp; const jog = this._makeJogSlider(inp, { step: parseFloat(p.step), + max: p.max ? parseFloat(p.max) : undefined, onUpdate: (newVal) => { if (!this.partials || !this.partials[index]) return; - if (!this.partials[index].replicas) this.partials[index].replicas = { ...repDefaults }; - this.partials[index].replicas[p.key] = newVal; + if (!this.partials[index].harmonics) this.partials[index].harmonics = { ...harmDefaults }; + this.partials[index].harmonics[p.key] = newVal; if (this.viewer) this.viewer.render(); } }); @@ -214,9 +217,9 @@ class PartialEditor { const sr = this.viewer ? this.viewer.audioBuffer.sampleRate : 44100; const fs = sc ? sc.fftSize : 2048; const {spread_above, spread_below} = autodetectSpread(p, sc, fs, sr); - if (!p.replicas) p.replicas = { ...repDefaults }; - p.replicas.spread_above = spread_above; - p.replicas.spread_below = spread_below; + if (!p.harmonics) p.harmonics = { ...harmDefaults }; + p.harmonics.spread_above = spread_above; + p.harmonics.spread_below = spread_below; sinInputs['spread_above'].value = spread_above.toFixed(4); sinInputs['spread_below'].value = spread_below.toFixed(4); }); @@ -323,10 +326,10 @@ class PartialEditor { if (!dragging) return; const dx = e.clientX - startX; const half = slider.offsetWidth / 2; - const clamped = Math.max(-half, Math.min(half, dx)); + const clamped = clamp(dx, -half, half); thumb.style.transition = 'none'; thumb.style.left = `calc(50% - 3px + ${clamped}px)`; - const newVal = Math.max(min, Math.min(max, startVal + dx * sensitivity)); + const newVal = clamp(startVal + dx * sensitivity, min, max); inp.value = newVal.toFixed(decimals); onUpdate(newVal); }; @@ -496,13 +499,8 @@ class PartialEditor { for (let i = 0; i < 4; ++i) { if (Math.hypot(this._tToX(curve['t' + i]) - x, this._ampToY(curve['a' + i]) - y) <= 8) { if (this.onBeforeChange) this.onBeforeChange(); - this._dragPointIndex = i; - this._dragCompanionOff = null; - if (i === 0) - this._dragCompanionOff = { da: curve.a1 - curve.a0 }; - else if (i === 3) - this._dragCompanionOff = { da: curve.a2 - curve.a3 }; - canvas.style.cursor = 'grabbing'; + this._dragPointIndex = i; + canvas.style.cursor = (i === 1 || i === 2) ? 'move' : 'ns-resize'; e.preventDefault(); return; } @@ -516,10 +514,11 @@ class PartialEditor { const curve = this.partials[this._selectedIndex].freqCurve; const i = this._dragPointIndex; curve['a' + i] = Math.max(0, this._yToAmp(y)); - if (this._dragCompanionOff) { - const off = this._dragCompanionOff; - if (i === 0) { curve.a1 = curve.a0 + off.da; } - else { curve.a2 = curve.a3 + off.da; } + // Inner control points are also horizontally draggable + if (i === 1) { + curve.t1 = clamp(this._xToT(x), curve.t0 + 1e-4, curve.t2 - 1e-4); + } else if (i === 2) { + curve.t2 = clamp(this._xToT(x), curve.t1 + 1e-4, curve.t3 - 1e-4); } this._renderAmpEditor(); if (this.viewer) this.viewer.render(); @@ -531,13 +530,14 @@ class PartialEditor { if (this._selectedIndex >= 0 && this.partials) { const curve = this.partials[this._selectedIndex]?.freqCurve; if (curve) { - let near = false; + let cursor = 'crosshair'; for (let i = 0; i < 4; ++i) { if (Math.hypot(this._tToX(curve['t' + i]) - x, this._ampToY(curve['a' + i]) - y) <= 8) { - near = true; break; + cursor = (i === 1 || i === 2) ? 'move' : 'ns-resize'; + break; } } - canvas.style.cursor = near ? 'grab' : 'crosshair'; + canvas.style.cursor = cursor; } } }); diff --git a/tools/mq_editor/index.html b/tools/mq_editor/index.html index dea6e50..efbd73d 100644 --- a/tools/mq_editor/index.html +++ b/tools/mq_editor/index.html @@ -3,274 +3,7 @@ <head> <meta charset="utf-8"> <title>MQ Spectral Editor</title> - <style> - body { - font-family: monospace; - font-size: 14px; - margin: 20px; - background: #1a1a1a; - color: #ddd; - } - .page-title { - display: flex; - align-items: baseline; - gap: 16px; - margin-bottom: 10px; - } - .page-title h2 { margin: 0; } - #fileLabel { - font-size: 13px; - color: #8af; - opacity: 0.8; - } - .toolbar { - margin-bottom: 10px; - padding: 10px; - background: #2a2a2a; - border-radius: 4px; - } - button { - background: #3a3a3a; - color: #ddd; - border: 1px solid #555; - padding: 8px 16px; - margin-right: 8px; - cursor: pointer; - border-radius: 4px; - } - button:hover { background: #4a4a4a; } - button:disabled { opacity: 0.5; cursor: not-allowed; } - #extractBtn { background: #666; color: #fff; font-weight: bold; border-color: #888; } - button.explore-active { background: #554; border-color: #aa8; color: #ffd; } - button.contour-active { background: #145; border-color: #0cc; color: #aff; } - input[type="file"] { display: none; } - .params { - display: flex; - margin-top: 8px; - background: #222; - border: 1px solid #444; - border-radius: 3px; - } - .param-group { - display: flex; - align-items: center; - gap: 6px; - padding: 5px 12px; - border-right: 1px solid #444; - flex-wrap: wrap; - } - .param-group:last-child { border-right: none; } - .group-label { - font-size: 9px; - color: #666; - text-transform: uppercase; - letter-spacing: 1px; - white-space: nowrap; - margin-right: 2px; - } - label { - margin-right: 4px; - } - input[type="number"], select { - width: 80px; - background: #3a3a3a; - color: #ddd; - border: 1px solid #555; - padding: 4px; - border-radius: 3px; - } - .main-area { - display: flex; - align-items: flex-start; - gap: 10px; - margin-top: 10px; - } - #canvas { - border: 1px solid #555; - background: #000; - cursor: crosshair; - display: block; - flex-shrink: 0; - } - .right-panel { - background: #2a2a2a; - border: 1px solid #555; - border-radius: 4px; - padding: 12px; - min-width: 260px; - max-width: 260px; - max-height: 700px; - overflow-y: auto; - display: flex; - flex-direction: column; - gap: 6px; - box-sizing: border-box; - } - .panel-title { - font-size: 12px; - color: #888; - text-transform: uppercase; - letter-spacing: 1px; - border-bottom: 1px solid #444; - padding-bottom: 6px; - margin-bottom: 2px; - display: flex; - align-items: center; - gap: 6px; - } - .right-panel label { - display: flex; - align-items: center; - gap: 6px; - margin: 0; - cursor: pointer; - font-size: 14px; - } - /* Partial properties */ - .prop-row { - display: flex; - justify-content: space-between; - align-items: baseline; - font-size: 13px; - padding: 2px 0; - } - .prop-label { color: #777; font-size: 12px; } - .curve-tabs { - display: flex; - gap: 2px; - margin-top: 8px; - margin-bottom: 4px; - } - .tab-btn { - flex: 1; - padding: 4px 0; - font-size: 12px; - margin: 0; - background: #222; - border-color: #444; - color: #888; - } - .tab-btn.active { - background: #3a3a3a; - border-color: #666; - color: #ddd; - } - .curve-grid { - display: grid; - grid-template-columns: 18px 1fr 1fr; - gap: 3px 4px; - align-items: center; - } - .curve-grid span { color: #666; font-size: 11px; } - .curve-grid input[type="number"] { - width: 100%; - background: #333; - color: #ccc; - border: 1px solid #444; - padding: 2px 4px; - border-radius: 2px; - font-size: 11px; - font-family: monospace; - box-sizing: border-box; - } - .curve-grid input[type="number"]:focus { - border-color: #666; - outline: none; - } - .partial-actions { - display: flex; - gap: 4px; - margin-top: 8px; - } - .partial-actions button { - flex: 1; - padding: 4px 6px; - font-size: 12px; - margin: 0; - } - .synth-grid { - display: grid; - grid-template-columns: auto 1fr; - gap: 4px 8px; - align-items: center; - } - .synth-grid span { color: #888; font-size: 12px; } - .synth-field-wrap { - display: flex; - align-items: center; - gap: 4px; - } - .synth-field-wrap input[type="number"] { - flex: 1; - min-width: 0; - background: #333; - color: #ccc; - border: 1px solid #444; - padding: 2px 4px; - border-radius: 2px; - font-size: 11px; - font-family: monospace; - box-sizing: border-box; - } - .synth-field-wrap input[type="number"]:focus { border-color: #666; outline: none; } - .jog-slider { - width: 44px; - height: 16px; - background: #1e1e1e; - border: 1px solid #444; - border-radius: 3px; - cursor: ew-resize; - position: relative; - flex-shrink: 0; - user-select: none; - overflow: hidden; - } - .jog-slider::before { - content: ''; - position: absolute; - left: 50%; top: 3px; bottom: 3px; - width: 1px; - background: #484848; - transform: translateX(-50%); - } - .jog-thumb { - position: absolute; - top: 3px; bottom: 3px; - width: 6px; - background: #888; - border-radius: 2px; - left: calc(50% - 3px); - transition: left 0.12s ease; - } - .jog-slider:hover .jog-thumb { background: #aaa; } - .synth-grid input[type="number"]:focus { border-color: #666; outline: none; } - .synth-section { - border-top: 1px solid #444; - padding-top: 8px; - margin-top: auto; - } - /* resonator mode badge shown in partial header color swatch area */ - .res-badge { - font-size: 9px; - color: #8cf; - border: 1px solid #8cf; - border-radius: 2px; - padding: 0 3px; - vertical-align: middle; - margin-left: 4px; - opacity: 0.8; - } - #status { - margin-top: 10px; - padding: 8px; - background: #2a2a2a; - border-radius: 4px; - min-height: 20px; - } - .info { color: #4af; } - .warn { color: #fa4; } - .error { color: #f44; } - </style> + <link rel="stylesheet" href="style.css"> </head> <body> <div class="page-title"> @@ -280,79 +13,99 @@ <div class="toolbar"> <input type="file" id="wavFile" accept=".wav"> - <button id="chooseFileBtn">📂 Open WAV</button> - <button id="testWavBtn">âš— Test WAV</button> - <button id="extractBtn" disabled>Extract Partials</button> - <button id="autoSpreadAllBtn" disabled>Auto Spread All</button> - <button id="playBtn" disabled>â–¶ Play</button> - <button id="stopBtn" disabled>â– Stop</button> - <button id="newPartialBtn" disabled>+ Partial</button> - <button id="clearAllBtn" disabled>✕ Clear All</button> - <button id="exploreBtn" disabled>⊕ Explore</button> - <button id="contourBtn" disabled>≋ Contour</button> - <button id="undoBtn" disabled>↩ Undo</button> - <button id="redoBtn" disabled>↪ Redo</button> - - <div class="params"> - <div class="param-group"> - <span class="group-label">STFT</span> - <label title="STFT hop size in samples. Smaller = finer time resolution, more frames, slower.">Hop</label> - <input type="number" id="hopSize" value="256" min="64" max="1024" step="64" style="width:60px;"> - </div> - - <div class="param-group"> - <span class="group-label">Peak Detection</span> - <label title="Minimum spectral peak amplitude in dB. Peaks below this are ignored.">Threshold (dB)</label> - <input type="number" id="threshold" value="-20" step="any"> - <label title="Minimum prominence in dB: how much a peak must stand above its surrounding valley. Suppresses weak shoulders.">Prominence (dB)</label> - <input type="number" id="prominence" value="1.0" step="0.1" min="0"> - <label title="Weight spectrum by frequency before peak detection: f × Power(f). Boosts high-frequency peaks relative to low-frequency ones."> - <input type="checkbox" id="freqWeight"> f·Power - </label> - </div> - - <div class="param-group"> - <span class="group-label">Tracking</span> - <label title="Frames a candidate must persist consecutively before being promoted to a tracked partial. Higher = fewer spurious short bursts.">Birth</label> - <input type="number" id="birthPersistence" value="3" min="1" max="10" step="1" style="width:50px;"> - <label title="Frames a partial can go unmatched before it is terminated. Higher = bridges short gaps; lower = cuts off quickly.">Death</label> - <input type="number" id="deathAge" value="5" min="1" max="20" step="1" style="width:50px;"> - <label title="Weight of phase prediction error in the peak-matching cost function. Higher = stricter phase coherence required to continue a partial.">Phase Wt</label> - <input type="number" id="phaseErrorWeight" value="2.0" min="0" max="10" step="0.5" style="width:55px;"> - <label title="Minimum number of frames a tracked partial must span. Shorter partials are discarded after tracking.">Min Len</label> - <input type="number" id="minLength" value="10" min="1" max="50" step="1" style="width:50px;"> - </div> - - <div class="param-group"> - <span class="group-label">Filter</span> - <label title="Keep only the strongest N% of extracted partials, ranked by peak amplitude.">Keep</label> - <input type="range" id="keepPct" min="1" max="100" value="100" style="width:100px; vertical-align:middle;"> - <span id="keepPctLabel">100%</span> + <span class="toolbar-group"> + <button id="chooseFileBtn">📂 Open WAV</button> + </span> + <span class="toolbar-sep"></span> + <span class="toolbar-group"> + <button id="extractBtn" disabled>Extract Partials</button> + <button id="autoSpreadAllBtn" disabled>Auto Spread All</button> + </span> + <span class="toolbar-sep"></span> + <span class="toolbar-group"> + <button id="playBtn" disabled>â–¶ Play</button> + <button id="stopBtn" disabled>â– Stop</button> + </span> + <span class="toolbar-sep"></span> + <span class="toolbar-group"> + <button id="newPartialBtn" disabled>+ Partial</button> + <button id="clearAllBtn" disabled>✕ Clear All</button> + </span> + <span class="toolbar-sep"></span> + <span class="toolbar-group"> + <button id="exploreBtn" disabled>⊕ Explore</button> + <button id="contourBtn" disabled>≋ Contour</button> + </span> + <span class="toolbar-sep"></span> + <span class="toolbar-group"> + <button id="undoBtn" disabled>↩ Undo</button> + <button id="redoBtn" disabled>↪ Redo</button> + </span> + <span class="toolbar-sep"></span> + <span class="toolbar-wrap"> + <button id="paramsBtn">âš™ Params</button> + <div id="paramsPanel"> + <div class="param-group"> + <span class="group-label">STFT</span> + <label title="STFT hop size in samples. Smaller = finer time resolution, more frames, slower.">Hop</label> + <input type="number" id="hopSize" value="256" min="64" max="1024" step="64" style="width:60px;"> + </div> + <div class="param-group"> + <span class="group-label">Peak Detect</span> + <label title="Minimum spectral peak amplitude in dB. Peaks below this are ignored.">Threshold (dB)</label> + <input type="number" id="threshold" value="-20" step="any"> + <label title="Minimum prominence in dB: how much a peak must stand above its surrounding valley. Suppresses weak shoulders.">Prominence (dB)</label> + <input type="number" id="prominence" value="1.0" step="0.1" min="0"> + <label title="Weight spectrum by frequency before peak detection: f × Power(f). Boosts high-frequency peaks relative to low-frequency ones."> + <input type="checkbox" id="freqWeight"> f·Power + </label> + </div> + <div class="param-group"> + <span class="group-label">Tracking</span> + <label title="Frames a candidate must persist consecutively before being promoted to a tracked partial. Higher = fewer spurious short bursts.">Birth</label> + <input type="number" id="birthPersistence" value="3" min="1" max="10" step="1" style="width:50px;"> + <label title="Frames a partial can go unmatched before it is terminated. Higher = bridges short gaps; lower = cuts off quickly.">Death</label> + <input type="number" id="deathAge" value="5" min="1" max="20" step="1" style="width:50px;"> + <label title="Weight of phase prediction error in the peak-matching cost function. Higher = stricter phase coherence required to continue a partial.">Phase Wt</label> + <input type="number" id="phaseErrorWeight" value="2.0" min="0" max="10" step="0.5" style="width:55px;"> + <label title="Minimum number of frames a tracked partial must span. Shorter partials are discarded after tracking.">Min Len</label> + <input type="number" id="minLength" value="10" min="1" max="50" step="1" style="width:50px;"> + </div> </div> - </div> + </span> </div> <div class="main-area"> - <div style="display:flex; flex-direction:column; gap:6px; flex-shrink:0;"> - <div style="position: relative;"> + <div class="canvas-col"> + <div class="canvas-wrap"> <canvas id="canvas" width="1400" height="600"></canvas> - <canvas id="cursorCanvas" width="1400" height="600" style="position:absolute;top:0;left:0;pointer-events:none;"></canvas> - <canvas id="playheadCanvas" width="1400" height="600" style="position:absolute;top:0;left:0;pointer-events:none;"></canvas> + <canvas id="cursorCanvas" width="1400" height="600"></canvas> + <canvas id="playheadCanvas" width="1400" height="600"></canvas> + <!-- Partial spectrum viewer (bottom-right overlay, left of main spectrum) --> + <div id="partialSpectrumViewer"> + <canvas id="partialSpectrumCanvas" width="200" height="100"></canvas> + </div> <!-- Mini spectrum viewer (bottom-right overlay) --> - <div id="spectrumViewer" style="position: absolute; bottom: 10px; right: 10px; width: 400px; height: 100px; background: rgba(30, 30, 30, 0.9); border: 1px solid #555; border-radius: 3px; pointer-events: none;"> + <div id="spectrumViewer"> <canvas id="spectrumCanvas" width="400" height="100"></canvas> </div> + <!-- Keep slider (bottom-left overlay) --> + <div id="keepOverlay"> + <span title="Keep only the strongest N% of extracted partials, ranked by peak amplitude.">Keep</span> + <input type="range" id="keepPct" min="1" max="100" value="100"> + <span id="keepPctLabel">100%</span> + </div> </div> <!-- Amplitude bezier editor (shown when partial selected) --> - <div id="ampEditPanel" style="display:none;"> - <div style="font-size:10px; color:#555; padding:2px 0 3px 1px; display:flex; align-items:center; gap:10px; text-transform:uppercase; letter-spacing:0.5px;"> + <div id="ampEditPanel"> + <div class="amp-edit-header"> <span>Amplitude</span> - <span id="ampEditTitle" style="color:#777; text-transform:none; letter-spacing:0;"></span> - <span style="color:#333; text-transform:none; letter-spacing:0;">drag control points · Esc to deselect</span> + <span id="ampEditTitle"></span> + <span class="amp-edit-hint">drag control points · Esc to deselect</span> </div> - <canvas id="ampEditCanvas" width="1400" height="120" style="border:1px solid #2a2a2a; background:#0e0e0e; cursor:crosshair; display:block;"></canvas> + <canvas id="ampEditCanvas" width="1400" height="120"></canvas> </div> </div> @@ -361,7 +114,7 @@ <div id="partialProps" style="display:none;"> <div class="panel-title"> <span id="propTitle">Partial #—</span> - <span id="propSwatch" style="display:inline-block;width:10px;height:10px;border-radius:2px;flex-shrink:0;"></span> + <span id="propSwatch"></span> </div> <div class="prop-row"> <span class="prop-label">Peak</span> @@ -387,11 +140,11 @@ </div> <div class="partial-actions"> <button id="mutePartialBtn">Mute</button> - <button id="deletePartialBtn">Delete</button> + <button id="deletePartialBtn">Delete <kbd>Del</kbd></button> </div> </div> - <div id="noSelMsg" style="color:#555;font-size:13px;padding:2px 0;">Click a partial to select</div> + <div id="noSelMsg">Click a partial to select</div> <!-- Synthesis options (always at bottom) --> <div class="synth-section"> @@ -400,36 +153,36 @@ <label><input type="checkbox" id="disableJitter"> Disable jitter</label> <label><input type="checkbox" id="disableSpread"> Disable spread</label> <label title="Test mode: force resonator synthesis for all partials (ignores per-partial mode setting)"><input type="checkbox" id="forceResonator"> Resonator (all)</label> - <div id="globalResParams" style="display:none;margin-top:4px;padding:4px 0 2px 12px;border-left:2px solid #555;"> - <label style="display:flex;align-items:center;gap:6px;" title="Global pole radius r in (0,1). Applied to all partials in resonator mode."> + <div id="globalResParams" style="display:none;"> + <label title="Global pole radius r in (0,1). Applied to all partials in resonator mode."> r (pole) - <input type="range" id="globalR" min="0.75" max="0.9999" step="0.0001" value="0.995" style="flex:1;min-width:0;"> - <span id="globalRVal" style="width:44px;text-align:right;">0.9950</span> + <input type="range" id="globalR" min="0.75" max="0.9999" step="0.0001" value="0.995"> + <span id="globalRVal" class="slider-val">0.9950</span> </label> - <label style="display:flex;align-items:center;gap:6px;" title="Global gain compensation applied to all partials in resonator mode."> + <label title="Global gain compensation applied to all partials in resonator mode."> gain - <input type="range" id="globalGain" min="0.0" max="4.0" step="0.01" value="1.0" style="flex:1;min-width:0;"> - <span id="globalGainVal" style="width:44px;text-align:right;">1.00</span> + <input type="range" id="globalGain" min="0.0" max="4.0" step="0.01" value="1.0"> + <span id="globalGainVal" class="slider-val">1.00</span> </label> <label title="Override per-partial r/gain with global values during playback"><input type="checkbox" id="forceRGain"> force r/gain</label> </div> <div style="margin-top:6px;"> - <label style="display:flex;align-items:center;gap:6px;" title="LP filter coefficient k1 in (0,1]. 1.0 = bypass."> + <label title="LP filter coefficient k1 in (0,1]. 1.0 = bypass."> LP k1 - <input type="range" id="lpK1" min="0.001" max="1.0" step="0.001" value="1.0" style="flex:1;min-width:0;"> - <span id="lpK1Val" style="width:44px;text-align:right;">bypass</span> + <input type="range" id="lpK1" min="0.001" max="1.0" step="0.001" value="1.0"> + <span id="lpK1Val" class="slider-val">bypass</span> </label> - <label style="display:flex;align-items:center;gap:6px;" title="HP filter coefficient k2 in (0,1]. 1.0 = bypass."> + <label title="HP filter coefficient k2 in (0,1]. 1.0 = bypass."> HP k2 - <input type="range" id="hpK2" min="0.001" max="1.0" step="0.001" value="1.0" style="flex:1;min-width:0;"> - <span id="hpK2Val" style="width:44px;text-align:right;">bypass</span> + <input type="range" id="hpK2" min="0.001" max="1.0" step="0.001" value="1.0"> + <span id="hpK2Val" class="slider-val">bypass</span> </label> </div> </div> </div> </div> - <div id="tooltip" style="position: fixed; display: none; background: #2a2a2a; padding: 4px 8px; border: 1px solid #555; border-radius: 3px; pointer-events: none; font-size: 11px; z-index: 1000;"></div> + <div id="tooltip"></div> <div id="status">Load a WAV file to begin...</div> diff --git a/tools/mq_editor/mq_extract.js b/tools/mq_editor/mq_extract.js index ff38d63..47c21b9 100644 --- a/tools/mq_editor/mq_extract.js +++ b/tools/mq_editor/mq_extract.js @@ -428,7 +428,7 @@ function trackFromSeed(frames, seedTime, seedFreq, params) { return { times: allTimes, freqs: allFreqs, amps: allAmps, phases: allPhases, muted: false, freqCurve, - replicas: { decay_alpha: 0.1, jitter: 0.05, spread_above: 0.02, spread_below: 0.02 }, + harmonics: { decay: 0.0, freq_mult: 2.0, jitter: 0.05, spread_above: 0.02, spread_below: 0.02 }, }; } @@ -451,7 +451,7 @@ function trackIsoContour(stftCache, seedTime, seedFreq, params) { } const seedFrame = stftCache.getFrameAtIndex(seedFrameIdx); - const seedBin = Math.max(1, Math.min(halfBins - 2, Math.round(seedFreq / binHz))); + const seedBin = clamp(Math.round(seedFreq / binHz), 1, halfBins - 2); const targetSq = seedFrame.squaredAmplitude[seedBin]; if (targetSq <= 0) return null; const targetDB = 10 * Math.log10(targetSq); @@ -522,11 +522,14 @@ function trackIsoContour(stftCache, seedTime, seedFreq, params) { times: allTimes, freqs: allFreqs, amps: allAmps, phases: new Array(allTimes.length).fill(0), muted: false, freqCurve, - replicas: { decay_alpha: 0.1, jitter: 0.05, spread_above: 0.15, spread_below: 0.15 }, + harmonics: { decay: 0.0, freq_mult: 2.0, jitter: 0.05, spread_above: 0.15, spread_below: 0.15 }, }; } -// Fit cubic bezier to trajectory using least-squares for inner control points +// Fit interpolating curve to trajectory via least-squares for inner control point values. +// Inner knots fixed at u=1/3 and u=2/3 (t = t0+dt/3, t0+2*dt/3). +// The curve passes through all 4 control points (Lagrange interpolation). +// TODO: support arbitrary number of inner control points function fitBezier(times, values) { const n = times.length - 1; const t0 = times[0], v0 = values[0]; @@ -534,43 +537,35 @@ function fitBezier(times, values) { const dt = t3 - t0; if (dt <= 1e-9 || n < 2) { - // Linear fallback for too few points or zero duration return {t0, v0, t1: t0 + dt / 3, v1: v0 + (v3 - v0) / 3, t2: t0 + 2 * dt / 3, v2: v0 + 2 * (v3 - v0) / 3, t3, v3}; } - // Least squares solve for v1, v2 - // Bezier: B(u) = (1-u)^3*v0 + 3(1-u)^2*u*v1 + 3(1-u)*u^2*v2 + u^3*v3 - // Target_i = val_i - (1-u)^3*v0 - u^3*v3 - // Model_i = A_i*v1 + B_i*v2 - // A_i = 3(1-u)^2*u - // B_i = 3(1-u)*u^2 + // Lagrange basis with inner knots at u1=1/3, u2=2/3 + // l1(u) = u*(u-2/3)*(u-1) / ((1/3)*(1/3-2/3)*(1/3-1)) = 13.5*u*(u-2/3)*(u-1) + // l2(u) = u*(u-1/3)*(u-1) / ((2/3)*(2/3-1/3)*(2/3-1)) = -13.5*u*(u-1/3)*(u-1) + // l0(u) = (u-1/3)*(u-2/3)*(u-1) / ((-1/3)*(-2/3)*(-1)) = -4.5*(u-1/3)*(u-2/3)*(u-1) + // l3(u) = u*(u-1/3)*(u-2/3) / ((2/3)*(1/3)) = 4.5*u*(u-1/3)*(u-2/3) + // Least-squares: minimize Σ(l1*v1 + l2*v2 - target_i)^2 + // target_i = values[i] - l0*v0 - l3*v3 let sA2 = 0, sB2 = 0, sAB = 0, sAT = 0, sBT = 0; for (let i = 0; i <= n; ++i) { - const u = (times[i] - t0) / dt; - const u2 = u * u; - const u3 = u2 * u; - const invU = 1.0 - u; - const invU2 = invU * invU; - const invU3 = invU2 * invU; - - const A = 3 * invU2 * u; - const B = 3 * invU * u2; - const target = values[i] - (invU3 * v0 + u3 * v3); - - sA2 += A * A; - sB2 += B * B; - sAB += A * B; - sAT += A * target; - sBT += B * target; + const u = (times[i] - t0) / dt; + const l0 = -4.5 * (u - 1/3) * (u - 2/3) * (u - 1); + const l1 = 13.5 * u * (u - 2/3) * (u - 1); + const l2 = -13.5 * u * (u - 1/3) * (u - 1); + const l3 = 4.5 * u * (u - 1/3) * (u - 2/3); + const A = l1, B = l2; + const target = values[i] - l0 * v0 - l3 * v3; + sA2 += A * A; sB2 += B * B; sAB += A * B; + sAT += A * target; sBT += B * target; } const det = sA2 * sB2 - sAB * sAB; let v1, v2; if (Math.abs(det) < 1e-9) { - // Fallback to simple 1/3, 2/3 heuristic if matrix is singular const idx1 = Math.round(n / 3); const idx2 = Math.round(2 * n / 3); v1 = values[idx1]; diff --git a/tools/mq_editor/mq_synth.js b/tools/mq_editor/mq_synth.js index 00867a9..e5f7e1a 100644 --- a/tools/mq_editor/mq_synth.js +++ b/tools/mq_editor/mq_synth.js @@ -1,5 +1,5 @@ // MQ Synthesizer -// Replica oscillator bank for sinusoidal synthesis, plus two-pole resonator mode +// Harmonic oscillator bank for sinusoidal synthesis, plus two-pole resonator mode // Deterministic LCG PRNG function randFloat(seed, min, max) { @@ -7,9 +7,26 @@ function randFloat(seed, min, max) { return min + (seed / 0x100000000) * (max - min); } +// Build harmonic list from harmonics config. +// Fundamental (ratio=1.0, ampMult=1.0) is always first. +// Then harmonics at n*freq_mult for n=1,2,... with ampMult=decay^n (added on top). +function buildHarmonics(harmonics) { + const decay = Math.min(harmonics.decay ?? 0.0, 0.90); + const freqMult = harmonics.freq_mult ?? 2.0; + const result = [{ ratio: 1.0, ampMult: 1.0 }]; // fundamental always + if (decay > 0) { + for (let n = 1; ; ++n) { + const ampMult = Math.pow(decay, n); + if (ampMult < 0.001) break; + result.push({ ratio: n * freqMult, ampMult }); + } + } + return result; +} + // Synthesize audio from MQ partials -// partials: array of {freqCurve (with a0-a3 for amp), replicas?, resonator?} -// replicas: {offsets, decay_alpha, jitter, spread_above, spread_below} +// partials: array of {freqCurve (with a0-a3 for amp), harmonics?, resonator?} +// harmonics: {decay, freq_mult, jitter, spread_above, spread_below} // resonator: {enabled, r, gainComp} — two-pole resonator mode per partial // integratePhase: true = accumulate 2Ï€*f/SR per sample (correct for varying freq) // false = 2Ï€*f*t (simpler, only correct for constant freq) @@ -19,15 +36,12 @@ function synthesizeMQ(partials, sampleRate, duration, integratePhase = true, opt const numSamples = Math.floor(sampleRate * duration); const pcm = new Float32Array(numSamples); - const jitterMult = options.disableJitter ? 0 : 1; - const spreadMult = options.disableSpread ? 0 : 1; - - const defaultReplicas = { - offsets: [1.0], - decay_alpha: 0.1, - jitter: 0.05, - spread_above: 0.02, - spread_below: 0.02 + const defaultHarmonics = { + decay: 0.0, + freq_mult: 1.0, + jitter: 0.05, + spread_above: 0.02, + spread_below: 0.02 }; // Pre-build per-partial configs with fixed spread/jitter and phase accumulators @@ -42,34 +56,41 @@ function synthesizeMQ(partials, sampleRate, duration, integratePhase = true, opt // r controls pole radius (bandwidth): r→1 = narrow, r→0 = wide. // gainNorm = sqrt(1 - r²) normalises steady-state output power to ~A. const res = partial.resonator || {}; - const r = options.forceRGain ? Math.min(0.9999, Math.max(0, options.globalR)) - : (res.r != null ? Math.min(0.9999, Math.max(0, res.r)) : 0.995); + const r = options.forceRGain ? clamp(options.globalR, 0, 0.9999) + : (res.r != null ? clamp(res.r, 0, 0.9999) : 0.995); const gainComp = options.forceRGain ? options.globalGain : (res.gainComp != null ? res.gainComp : 1.0); const gainNorm = Math.sqrt(Math.max(0, 1.0 - r * r)); + + // Build harmonic list (jitter/spread not applied to resonator) + const harm = partial.harmonics || defaultHarmonics; + const harmonicList = buildHarmonics(harm); + configs.push({ mode: 'resonator', fc, r, gainComp, gainNorm, - y1: 0.0, y2: 0.0, + harmonicList, + y1: new Float64Array(harmonicList.length), + y2: new Float64Array(harmonicList.length), noiseSeed: ((p * 1664525 + 1013904223) & 0xFFFFFFFF) >>> 0 }); } else { - // --- Sinusoidal (replica) mode --- - const rep = partial.replicas != null ? partial.replicas : defaultReplicas; - const offsets = rep.offsets != null ? rep.offsets : [1.0]; - const decay_alpha = rep.decay_alpha != null ? rep.decay_alpha : 0.0; - const jitter = rep.jitter != null ? rep.jitter : 0.0; - const spread_above = rep.spread_above != null ? rep.spread_above : 0.0; - const spread_below = rep.spread_below != null ? rep.spread_below : 0.0; + // --- Sinusoidal (harmonic) mode --- + const harm = partial.harmonics || defaultHarmonics; + const spread_above = harm.spread_above ?? 0.0; + const spread_below = harm.spread_below ?? 0.0; + const jitter = harm.jitter ?? 0.0; + const harmonicList = buildHarmonics(harm); const replicaData = []; - for (let r = 0; r < offsets.length; ++r) { - const spread = spreadMult * randFloat(p * 67890 + r * 999, -spread_below, spread_above); - const initPhase = randFloat(p * 67890 + r, 0.0, 1.0) * (jitter * jitterMult) * 2.0 * Math.PI; - replicaData.push({ratio: offsets[r], spread, phase: initPhase}); + for (let h = 0; h < harmonicList.length; ++h) { + const hc = harmonicList[h]; + const spread = randFloat(p * 67890 + h * 999, -spread_below, spread_above); + const initPhase = randFloat(p * 67890 + h, 0.0, 1.0) * jitter * 2.0 * Math.PI; + replicaData.push({ ratio: hc.ratio, ampMult: hc.ampMult, spread, phase: initPhase }); } - configs.push({ mode: 'sinusoid', fc, decay_alpha, replicaData }); + configs.push({ mode: 'sinusoid', fc, replicaData }); } } @@ -82,34 +103,40 @@ function synthesizeMQ(partials, sampleRate, duration, integratePhase = true, opt const {fc} = cfg; if (cfg.mode === 'resonator') { - if (t < fc.t0 || t > fc.t3) { cfg.y1 = 0.0; cfg.y2 = 0.0; continue; } + if (t < fc.t0 || t > fc.t3) { + cfg.y1.fill(0.0); cfg.y2.fill(0.0); continue; + } - const f0 = evalBezier(fc, t); - const A = evalBezierAmp(fc, t); - const omega = 2.0 * Math.PI * f0 / sampleRate; - const b1 = 2.0 * cfg.r * Math.cos(omega); + const f0 = evalBezier(fc, t); + const A = evalBezierAmp(fc, t); - // LCG noise excitation (deterministic per-partial) + // LCG noise excitation (deterministic per-partial, shared across harmonics) cfg.noiseSeed = (Math.imul(1664525, cfg.noiseSeed) + 1013904223) >>> 0; const noise = cfg.noiseSeed / 0x100000000 * 2.0 - 1.0; - const x = A * cfg.gainNorm * noise; - const y = b1 * cfg.y1 - cfg.r * cfg.r * cfg.y2 + x; - cfg.y2 = cfg.y1; - cfg.y1 = y; - sample += y * cfg.gainComp; + for (let h = 0; h < cfg.harmonicList.length; ++h) { + const hc = cfg.harmonicList[h]; + const fh = f0 * hc.ratio; + const omega = 2.0 * Math.PI * fh / sampleRate; + const b1 = 2.0 * cfg.r * Math.cos(omega); + + const x = A * cfg.gainNorm * noise * hc.ampMult; + const y = b1 * cfg.y1[h] - cfg.r * cfg.r * cfg.y2[h] + x; + cfg.y2[h] = cfg.y1[h]; + cfg.y1[h] = y; + sample += y * cfg.gainComp; + } } else { if (t < fc.t0 || t > fc.t3) continue; const f0 = evalBezier(fc, t); const A0 = evalBezierAmp(fc, t); - const {decay_alpha, replicaData} = cfg; - for (let r = 0; r < replicaData.length; ++r) { - const rep = replicaData[r]; - const f = f0 * rep.ratio * (1.0 + rep.spread); - const A = A0 * Math.exp(-decay_alpha * Math.abs(f - f0)); + for (let h = 0; h < cfg.replicaData.length; ++h) { + const rep = cfg.replicaData[h]; + const f = f0 * rep.ratio * (1.0 + rep.spread); + const A = A0 * rep.ampMult; let phase; if (integratePhase) { @@ -131,7 +158,7 @@ function synthesizeMQ(partials, sampleRate, duration, integratePhase = true, opt // LP: y[n] = k1*x[n] + (1-k1)*y[n-1] — options.k1 in (0,1], omit to bypass // HP: y[n] = k2*(y[n-1] + x[n] - x[n-1]) — options.k2 in (0,1], omit to bypass if (options.k1 != null) { - const k1 = Math.max(0, Math.min(1, options.k1)); + const k1 = clamp(options.k1, 0, 1); let y = 0.0; for (let i = 0; i < numSamples; ++i) { y = k1 * pcm[i] + (1.0 - k1) * y; @@ -139,7 +166,7 @@ function synthesizeMQ(partials, sampleRate, duration, integratePhase = true, opt } } if (options.k2 != null) { - const k2 = Math.max(0, Math.min(1, options.k2)); + const k2 = clamp(options.k2, 0, 1); let y = 0.0, xp = 0.0; for (let i = 0; i < numSamples; ++i) { const x = pcm[i]; diff --git a/tools/mq_editor/style.css b/tools/mq_editor/style.css new file mode 100644 index 0000000..07a404a --- /dev/null +++ b/tools/mq_editor/style.css @@ -0,0 +1,104 @@ +/* MQ Spectral Editor */ + +/* === Base === */ +body { font-family: monospace; font-size: 14px; margin: 20px; background: #1a1a1a; color: #ddd; } +label { margin-right: 4px; } +input[type="number"], select { width: 80px; background: #3a3a3a; color: #ddd; border: 1px solid #555; padding: 4px; border-radius: 3px; } +input[type="file"] { display: none; } + +/* === Layout === */ +.page-title { display: flex; align-items: baseline; gap: 16px; margin-bottom: 10px; } +.page-title h2 { margin: 0; } +.main-area { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; } +.canvas-col { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; } +.canvas-wrap { position: relative; } + +/* === Toolbar === */ +.toolbar { margin-bottom: 10px; padding: 10px; background: #2a2a2a; border-radius: 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } +.toolbar-group { display: inline-flex; align-items: center; gap: 2px; } +.toolbar-group button { margin-right: 0; } +.toolbar-sep { align-self: stretch; width: 1px; background: #555; margin: 3px 6px; } +.toolbar-wrap { position: relative; display: inline-block; } + +/* === Buttons === */ +button { background: #3a3a3a; color: #ddd; border: 1px solid #555; padding: 8px 16px; margin-right: 8px; cursor: pointer; border-radius: 4px; } +button:hover { background: #4a4a4a; } +button:disabled { opacity: 0.5; cursor: not-allowed; } +#extractBtn { background: #666; color: #fff; font-weight: bold; border-color: #888; } +button.explore-active { background: #554; border-color: #aa8; color: #ffd; } +button.contour-active { background: #145; border-color: #0cc; color: #aff; } + +/* === Params dropdown === */ +#paramsPanel { display: none; position: absolute; z-index: 200; top: 100%; left: 0; margin-top: 4px; background: #222; border: 1px solid #555; border-radius: 4px; padding: 6px 0; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.5); } +#paramsPanel.open { display: block; } +#paramsBtn.params-open { background: #4a4a4a; border-color: #888; } +.param-group { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 8px 14px; border-bottom: 1px solid #333; align-items: center; } +.param-group:last-child { border-bottom: none; } +.group-label { grid-column: 1 / -1; font-size: 9px; color: #666; text-transform: uppercase; letter-spacing: 1px; } + +/* === Canvas & overlays === */ +#canvas { border: 1px solid #555; background: #000; cursor: crosshair; display: block; flex-shrink: 0; } +#cursorCanvas, #playheadCanvas { position: absolute; top: 0; left: 0; pointer-events: none; } +#partialSpectrumViewer { position: absolute; bottom: 10px; right: 420px; width: 200px; height: 100px; background: rgba(30,30,30,.9); border: 1px solid #555; border-radius: 3px; pointer-events: none; } +#spectrumViewer { position: absolute; bottom: 10px; right: 10px; width: 400px; height: 100px; background: rgba(30,30,30,.9); border: 1px solid #555; border-radius: 3px; pointer-events: none; } +#keepOverlay { position: absolute; bottom: 10px; left: 10px; background: rgba(30,30,30,.88); border: 1px solid #555; border-radius: 3px; padding: 4px 8px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: #aaa; user-select: none; } +#keepOverlay input[type="range"] { width: 90px; } + +/* === Amp edit panel === */ +#ampEditPanel { display: none; } +.amp-edit-header { font-size: 10px; color: #555; padding: 2px 0 3px 1px; display: flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: .5px; } +#ampEditTitle { color: #777; text-transform: none; letter-spacing: 0; } +.amp-edit-hint { color: #333; text-transform: none; letter-spacing: 0; } +#ampEditCanvas { border: 1px solid #2a2a2a; background: #0e0e0e; cursor: crosshair; display: block; } + +/* === Right panel === */ +.right-panel { background: #2a2a2a; border: 1px solid #555; border-radius: 4px; padding: 12px; min-width: 260px; max-width: 260px; max-height: 700px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; } +.panel-title { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid #444; padding-bottom: 6px; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; } +.right-panel label { display: flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; font-size: 14px; } +.right-panel label input[type="range"] { flex: 1; min-width: 0; } +#noSelMsg { color: #555; font-size: 13px; padding: 2px 0; } + +/* === Partial properties === */ +.prop-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; padding: 2px 0; } +.prop-label { color: #777; font-size: 12px; } +#propSwatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } +.partial-actions { display: flex; gap: 4px; margin-top: 8px; } +.partial-actions button { flex: 1; padding: 4px 6px; font-size: 12px; margin: 0; } +kbd { font-size: 10px; opacity: 0.55; } + +/* === Curve tabs & grid === */ +.curve-tabs { display: flex; gap: 2px; margin-top: 8px; margin-bottom: 4px; } +.tab-btn { flex: 1; padding: 4px 0; font-size: 12px; margin: 0; background: #222; border-color: #444; color: #888; } +.tab-btn.active { background: #3a3a3a; border-color: #666; color: #ddd; } +.curve-grid { display: grid; grid-template-columns: 18px 1fr 1fr; gap: 3px 4px; align-items: center; } +.curve-grid span { color: #666; font-size: 11px; } +.curve-grid input[type="number"], +.synth-field-wrap input[type="number"] { width: 100%; background: #333; color: #ccc; border: 1px solid #444; padding: 2px 4px; border-radius: 2px; font-size: 11px; font-family: monospace; box-sizing: border-box; } +.curve-grid input[type="number"]:focus, +.synth-field-wrap input[type="number"]:focus, +.synth-grid input[type="number"]:focus { border-color: #666; outline: none; } + +/* === Synth section === */ +.synth-section { border-top: 1px solid #444; padding-top: 8px; margin-top: auto; } +.synth-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; } +.synth-grid span { color: #888; font-size: 12px; } +.synth-field-wrap { display: flex; align-items: center; gap: 4px; } +#globalResParams { margin-top: 4px; padding: 4px 0 2px 12px; border-left: 2px solid #555; } +.slider-val { width: 44px; text-align: right; } + +/* === Jog slider === */ +.jog-slider { width: 44px; height: 16px; background: #1e1e1e; border: 1px solid #444; border-radius: 3px; cursor: ew-resize; position: relative; flex-shrink: 0; user-select: none; overflow: hidden; } +.jog-slider::before { content: ''; position: absolute; left: 50%; top: 3px; bottom: 3px; width: 1px; background: #484848; transform: translateX(-50%); } +.jog-thumb { position: absolute; top: 3px; bottom: 3px; width: 6px; background: #888; border-radius: 2px; left: calc(50% - 3px); transition: left .12s ease; } +.jog-slider:hover .jog-thumb { background: #aaa; } + +/* === Resonator badge === */ +.res-badge { font-size: 9px; color: #8cf; border: 1px solid #8cf; border-radius: 2px; padding: 0 3px; vertical-align: middle; margin-left: 4px; opacity: .8; } + +/* === Status & tooltip === */ +#fileLabel { font-size: 13px; color: #8af; opacity: .8; } +#status { margin-top: 10px; padding: 8px; background: #2a2a2a; border-radius: 4px; min-height: 20px; } +.info { color: #4af; } +.warn { color: #fa4; } +.error { color: #f44; } +#tooltip { position: fixed; display: none; background: #2a2a2a; padding: 4px 8px; border: 1px solid #555; border-radius: 3px; pointer-events: none; font-size: 11px; z-index: 1000; } diff --git a/tools/mq_editor/test_fft.html b/tools/mq_editor/test_fft.html deleted file mode 100644 index b4e7f48..0000000 --- a/tools/mq_editor/test_fft.html +++ /dev/null @@ -1,229 +0,0 @@ -<!DOCTYPE html> -<!-- - test_fft.html — Isolated FFT correctness tests for fft.js - Open directly in a browser (no server needed). - - Tests fftForward(), realFFT(), and STFTCache from fft.js. - - Test summary: - 1 DC impulse — all-ones input → bin 0 must equal N - 2 Single tone — 440 Hz pure sine → peak bin matches expected frequency - 3 STFT magnitude — STFTCache.getMagnitudeDB() returns loud value at 440 Hz - 4 Pair equal — 220 + 880 Hz, both peaks found - 5 Pair equal — 440 + 1320 Hz, both peaks found - 6 Pair wide — 300 + 3000 Hz (decade separation), both peaks found - 7 Pair extreme — 100 + 8000 Hz (80× ratio), both peaks found - 8 Pair unequal — 440 Hz + 2000 Hz at 10:1 amplitude, weak peak still found - 9 Triplet chord — C4 (261.63) + E4 (329.63) + G4 (392) major chord - 10 Triplet octaves — 110 + 220 + 440 Hz octave stack - 11 Triplet harmonic — 500 + 1500 + 4500 Hz (1:3:9 ratio) - 12 Triplet unequal — 440 + 880 + 1760 Hz at 1.0 / 0.5 / 0.25 (decaying harmonics) - - Pass criteria: - - Each expected frequency bin is found within ±guard bins (guard ≈ 2 × bin_width). - - Bin width = SR / N = 32000 / 4096 ≈ 7.8 Hz. - - All spectra are drawn as linear-magnitude plots (0..Nyquist on x-axis). - Colored vertical markers show expected frequency positions. ---> -<html> -<head> -<meta charset="utf-8"> -<title>FFT Test</title> -<style> - body { font-family: monospace; background: #111; color: #ccc; padding: 20px; } - h2 { color: #fff; } - canvas { border: 1px solid #444; display: block; margin: 10px 0; } - .pass { color: #4f4; } - .fail { color: #f44; } - pre { background: #222; padding: 10px; } -</style> -</head> -<body> -<h2>FFT Isolation Test</h2> -<pre id="log"></pre> -<canvas id="spectrum" width="800" height="200"></canvas> -<script src="fft.js"></script> -<script> -const log = document.getElementById('log'); -function print(msg, cls) { - const span = document.createElement('span'); - if (cls) span.className = cls; - span.textContent = msg + '\n'; - log.appendChild(span); -} - -// --- Test 1: Single bin impulse (DC) --- -{ - const N = 8; - const real = new Float32Array([1,1,1,1,1,1,1,1]); - const imag = new Float32Array(N); - fftForward(real, imag, N); - const ok = Math.abs(real[0] - 8) < 1e-4 && Math.abs(imag[0]) < 1e-4; - print(`Test 1 DC impulse: real[0]=${real[0].toFixed(4)} ${ok?'PASS':'FAIL'}`, ok?'pass':'fail'); -} - -// --- Test 2: 440 Hz peak detection --- -{ - const SR = 32000; - const N = 2048; - const signal = new Float32Array(N); - for (let i = 0; i < N; ++i) - signal[i] = Math.sin(2 * Math.PI * 440 * i / SR); - - const spectrum = realFFT(signal); - - let peakBin = 0, peakVal = 0; - for (let i = 0; i < N / 2; ++i) { - const re = spectrum[i * 2], im = spectrum[i * 2 + 1]; - const mag = re * re + im * im; - if (mag > peakVal) { peakVal = mag; peakBin = i; } - } - const peakFreq = peakBin * SR / N; - const ok = Math.abs(peakFreq - 440) < SR / N; - print(`Test 2 440Hz peak: bin=${peakBin} freq=${peakFreq.toFixed(1)}Hz ${ok?'PASS':'FAIL'}`, ok?'pass':'fail'); - - // Draw spectrum - const canvas = document.getElementById('spectrum'); - const ctx = canvas.getContext('2d'); - ctx.fillStyle = '#111'; - ctx.fillRect(0, 0, canvas.width, canvas.height); - ctx.strokeStyle = '#0af'; - ctx.beginPath(); - const halfN = N / 2; - for (let i = 0; i < halfN; ++i) { - const re = spectrum[i * 2], im = spectrum[i * 2 + 1]; - const mag = Math.sqrt(re * re + im * im) / (N / 2); - const x = i / halfN * canvas.width; - const y = canvas.height - mag * canvas.height; - i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); - } - ctx.stroke(); - - // Mark 440Hz - ctx.strokeStyle = '#f80'; - ctx.beginPath(); - const x440 = peakBin / halfN * canvas.width; - ctx.moveTo(x440, 0); ctx.lineTo(x440, canvas.height); - ctx.stroke(); - ctx.fillStyle = '#f80'; - ctx.fillText(`440Hz (bin ${peakBin})`, x440 + 4, 16); -} - -// --- Test 3: STFT getMagnitudeDB at t=0 --- -{ - const SR = 32000; - const N = 44032; // ~1.375s - const signal = new Float32Array(N); - for (let i = 0; i < N; ++i) - signal[i] = Math.sin(2 * Math.PI * 440 * i / SR); - - const stft = new STFTCache(signal, SR, 2048, 512); - const db = stft.getMagnitudeDB(0.0, 440); - const ok = db > -10; - print(`Test 3 STFT getMagnitudeDB(0, 440Hz): ${db.toFixed(1)} dB ${ok?'PASS':'FAIL'}`, ok?'pass':'fail'); -} - -// Helper: find top-K peaks in spectrum (bin indices), ignoring neighbors within 'guard' bins -function findPeaks(spectrum, halfN, k, guard) { - const mags = new Float32Array(halfN); - for (let i = 0; i < halfN; ++i) { - const re = spectrum[i * 2], im = spectrum[i * 2 + 1]; - mags[i] = re * re + im * im; - } - const peaks = []; - const used = new Uint8Array(halfN); - for (let p = 0; p < k; ++p) { - let best = -1, bestVal = 0; - for (let i = 1; i < halfN; ++i) { - if (!used[i] && mags[i] > bestVal) { bestVal = mags[i]; best = i; } - } - if (best < 0) break; - peaks.push(best); - for (let g = Math.max(0, best - guard); g <= Math.min(halfN - 1, best + guard); ++g) - used[g] = 1; - } - return peaks; -} - -// Helper: draw labeled spectrum on a new canvas -function drawSpectrum(label, spectrum, N, SR, markerFreqs) { - const halfN = N / 2; - const colors = ['#f80', '#0f8', '#f0f', '#08f']; - const canvas = document.createElement('canvas'); - canvas.width = 800; canvas.height = 160; - const div = document.createElement('div'); - div.style.cssText = 'color:#888;font-family:monospace;font-size:12px;margin-top:8px'; - div.textContent = label; - document.body.appendChild(div); - document.body.appendChild(canvas); - - const ctx = canvas.getContext('2d'); - ctx.fillStyle = '#111'; - ctx.fillRect(0, 0, canvas.width, canvas.height); - ctx.strokeStyle = '#0af'; - ctx.beginPath(); - for (let i = 0; i < halfN; ++i) { - const re = spectrum[i * 2], im = spectrum[i * 2 + 1]; - const mag = Math.sqrt(re * re + im * im) / (N / 2); - const x = i / halfN * canvas.width; - const y = canvas.height - mag * canvas.height; - i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); - } - ctx.stroke(); - - markerFreqs.forEach((f, idx) => { - const bin = Math.round(f * N / SR); - const x = bin / halfN * canvas.width; - ctx.strokeStyle = colors[idx % colors.length]; - ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height); ctx.stroke(); - ctx.fillStyle = colors[idx % colors.length]; - ctx.fillText(`${f}Hz`, x + 3, 14 + idx * 14); - }); -} - -// Helper: test multi-frequency signal, return pass/fail -function testMultiFreq(label, freqs, amplitudes, SR, N, testNum) { - const signal = new Float32Array(N); - for (let i = 0; i < N; ++i) - for (let f = 0; f < freqs.length; ++f) - signal[i] += (amplitudes ? amplitudes[f] : 1.0) * Math.sin(2 * Math.PI * freqs[f] * i / SR); - - const spectrum = realFFT(signal); - const halfN = N / 2; - const guard = Math.ceil(SR / N * 2); // ~2 bins tolerance - const peaks = findPeaks(spectrum, halfN, freqs.length, guard); - - const detectedFreqs = peaks.map(b => (b * SR / N).toFixed(1)); - const allFound = freqs.every(f => { - const expectedBin = Math.round(f * N / SR); - return peaks.some(b => Math.abs(b - expectedBin) <= guard); - }); - - const freqStr = freqs.map((f, i) => amplitudes ? `${f}Hz@${amplitudes[i].toFixed(1)}` : `${f}Hz`).join(' + '); - print(`Test ${testNum} ${label} [${freqStr}]: peaks=[${detectedFreqs.join(', ')}] ${allFound?'PASS':'FAIL'}`, - allFound ? 'pass' : 'fail'); - - drawSpectrum(`Test ${testNum}: ${label} — ${freqStr}`, spectrum, N, SR, freqs); - return allFound; -} - -const SR = 32000, N = 4096; - -// --- Pairs --- -print('\n-- Pairs --'); -testMultiFreq('pair', [220, 880], null, SR, N, 4); -testMultiFreq('pair', [440, 1320], null, SR, N, 5); -testMultiFreq('pair', [300, 3000], null, SR, N, 6); -testMultiFreq('pair', [100, 8000], null, SR, N, 7); -testMultiFreq('pair unequal amp', [440, 2000], [1.0, 0.1], SR, N, 8); - -// --- Triplets --- -print('\n-- Triplets --'); -testMultiFreq('triplet', [261.63, 329.63, 392.00], null, SR, N, 9); // C E G chord -testMultiFreq('triplet', [110, 220, 440], null, SR, N, 10); // octave stack -testMultiFreq('triplet', [500, 1500, 4500], null, SR, N, 11); // harmonic series -testMultiFreq('triplet unequal', [440, 880, 1760], [1.0, 0.5, 0.25],SR, N, 12); // decaying harmonics -</script> -</body> -</html> diff --git a/tools/mq_editor/utils.js b/tools/mq_editor/utils.js index 96d807c..7ab274e 100644 --- a/tools/mq_editor/utils.js +++ b/tools/mq_editor/utils.js @@ -1,31 +1,52 @@ // Shared utilities for mq_editor -// Evaluate cubic bezier curve at time t (robust: handles dt<=0) +// Evaluate interpolating curve at time t via Lagrange interpolation. +// The curve passes through all 4 control points at their stored time positions. +// Knot positions: u_k = (t_k - t0) / (t3 - t0), k=0..3. +// TODO: support arbitrary number of inner control points function evalBezier(curve, t) { const dt = curve.t3 - curve.t0; if (dt <= 0) return curve.v0; let u = (t - curve.t0) / dt; - u = Math.max(0, Math.min(1, u)); - const u1 = 1.0 - u; - return u1*u1*u1 * curve.v0 + - 3*u1*u1*u * curve.v1 + - 3*u1*u*u * curve.v2 + - u*u*u * curve.v3; + u = clamp(u, 0, 1); + const u1 = (curve.t1 - curve.t0) / dt; + const u2 = (curve.t2 - curve.t0) / dt; + const d0 = (-u1) * (-u2) * (-1); + const d1 = u1 * (u1 - u2) * (u1 - 1); + const d2 = u2 * (u2 - u1) * (u2 - 1); + const d3 = (1 - u1) * (1 - u2); + if (Math.abs(d0) < 1e-9 || Math.abs(d1) < 1e-9 || Math.abs(d2) < 1e-9 || Math.abs(d3) < 1e-9) + return curve.v0 + (curve.v3 - curve.v0) * u; + const l0 = (u - u1) * (u - u2) * (u - 1) / d0; + const l1 = u * (u - u2) * (u - 1) / d1; + const l2 = u * (u - u1) * (u - 1) / d2; + const l3 = u * (u - u1) * (u - u2) / d3; + return l0 * curve.v0 + l1 * curve.v1 + l2 * curve.v2 + l3 * curve.v3; } -// Evaluate amplitude component of unified bezier curve at time t +// Evaluate amplitude component of interpolating curve at time t function evalBezierAmp(curve, t) { const dt = curve.t3 - curve.t0; if (dt <= 0) return curve.a0; let u = (t - curve.t0) / dt; - u = Math.max(0, Math.min(1, u)); - const u1 = 1.0 - u; - return u1*u1*u1 * curve.a0 + - 3*u1*u1*u * curve.a1 + - 3*u1*u*u * curve.a2 + - u*u*u * curve.a3; + u = clamp(u, 0, 1); + const u1 = (curve.t1 - curve.t0) / dt; + const u2 = (curve.t2 - curve.t0) / dt; + const d0 = (-u1) * (-u2) * (-1); + const d1 = u1 * (u1 - u2) * (u1 - 1); + const d2 = u2 * (u2 - u1) * (u2 - 1); + const d3 = (1 - u1) * (1 - u2); + if (Math.abs(d0) < 1e-9 || Math.abs(d1) < 1e-9 || Math.abs(d2) < 1e-9 || Math.abs(d3) < 1e-9) + return curve.a0 + (curve.a3 - curve.a0) * u; + const l0 = (u - u1) * (u - u2) * (u - 1) / d0; + const l1 = u * (u - u2) * (u - 1) / d1; + const l2 = u * (u - u1) * (u - 1) / d2; + const l3 = u * (u - u1) * (u - u2) / d3; + return l0 * curve.a0 + l1 * curve.a1 + l2 * curve.a2 + l3 * curve.a3; } +function clamp(v, lo, hi) { return v < lo ? lo : v > hi ? hi : v; } + // Get canvas-relative {x, y} from a mouse event function getCanvasCoords(e, canvas) { const rect = canvas.getBoundingClientRect(); @@ -34,16 +55,29 @@ function getCanvasCoords(e, canvas) { // Build upper/lower band point arrays for a frequency curve. // factorAbove/factorBelow are fractional offsets (e.g. 0.02 = ±2%). +// freqMult: optional frequency scaling for harmonics (default 1.0). // Returns { upper: [[x,y],...], lower: [[x,y],...] } -function buildBandPoints(viewer, curve, factorAbove, factorBelow) { +function buildBandPoints(viewer, curve, factorAbove, factorBelow, freqMult = 1.0) { const STEPS = 60; const upper = [], lower = []; for (let i = 0; i <= STEPS; ++i) { const t = curve.t0 + (curve.t3 - curve.t0) * i / STEPS; if (t < viewer.t_view_min - 0.01 || t > viewer.t_view_max + 0.01) continue; - const f = evalBezier(curve, t); + const f = evalBezier(curve, t) * freqMult; upper.push([viewer.timeToX(t), viewer.freqToY(f * (1 + factorAbove))]); lower.push([viewer.timeToX(t), viewer.freqToY(f * (1 - factorBelow))]); } return { upper, lower }; } + +// Build center line points at freq * freqMult along the curve. +function buildCenterPoints(viewer, curve, freqMult = 1.0) { + const STEPS = 60; + const pts = []; + for (let i = 0; i <= STEPS; ++i) { + const t = curve.t0 + (curve.t3 - curve.t0) * i / STEPS; + if (t < viewer.t_view_min - 0.01 || t > viewer.t_view_max + 0.01) continue; + pts.push([viewer.timeToX(t), viewer.freqToY(evalBezier(curve, t) * freqMult)]); + } + return pts; +} diff --git a/tools/mq_editor/viewer.js b/tools/mq_editor/viewer.js index c69d9e7..82e9c24 100644 --- a/tools/mq_editor/viewer.js +++ b/tools/mq_editor/viewer.js @@ -50,6 +50,11 @@ class SpectrogramViewer { this.showSynthFFT = false; // Toggle: false=original, true=synth this.synthStftCache = null; + // Partial spectrum viewer + this.partialSpectrumCanvas = document.getElementById('partialSpectrumCanvas'); + this.partialSpectrumCtx = this.partialSpectrumCanvas ? this.partialSpectrumCanvas.getContext('2d') : null; + this._partialSpecCache = null; // {partialIndex, time, specData?} — see renderPartialSpectrum + // Selection and editing this.selectedPartial = -1; this.dragState = null; // {pointIndex: 0-3} @@ -109,7 +114,7 @@ class SpectrogramViewer { // DB value -> normalized intensity [0..1], relative to cache maxDB over 80dB range normalizeDB(magDB, maxDB) { - return Math.max(0, Math.min(1, (magDB - (maxDB - 80)) / 80)); + return clamp((magDB - (maxDB - 80)) / 80, 0, 1); } // Partial index -> display color @@ -128,6 +133,7 @@ class SpectrogramViewer { if (time >= 0) { this.spectrumTime = time; this.renderSpectrum(); + this.renderPartialSpectrum(time); } else if (this.mouseX >= 0) { this.spectrumTime = this.canvasToTime(this.mouseX); } @@ -170,6 +176,7 @@ class SpectrogramViewer { } selectPartial(index) { + this._partialSpecCache = null; this.selectedPartial = index; this.render(); if (this.onPartialSelect) this.onPartialSelect(index); @@ -219,6 +226,7 @@ class SpectrogramViewer { this.drawAxes(); this.drawPlayhead(); this.renderSpectrum(); + this.renderPartialSpectrum(this.spectrumTime, true); if (this.onRender) this.onRender(); } @@ -293,10 +301,12 @@ class SpectrogramViewer { _renderSpreadBand(partial, color) { const {ctx} = this; - const curve = partial.freqCurve; - const rep = partial.replicas || {}; - const sa = rep.spread_above != null ? rep.spread_above : 0.02; - const sb = rep.spread_below != null ? rep.spread_below : 0.02; + const curve = partial.freqCurve; + const harm = partial.harmonics || {}; + const sa = harm.spread_above != null ? harm.spread_above : 0.02; + const sb = harm.spread_below != null ? harm.spread_below : 0.02; + const decay = harm.decay != null ? harm.decay : 0.0; + const freqMult = harm.freq_mult != null ? harm.freq_mult : 2.0; const {upper, lower} = buildBandPoints(this, curve, sa, sb); if (upper.length < 2) return; @@ -346,6 +356,56 @@ class SpectrogramViewer { ctx.setLineDash([]); } + // Harmonic bands (faint, fading with decay^n) + if (decay > 0) { + for (let n = 1; ; ++n) { + const ampMult = Math.pow(decay, n); + if (ampMult < 0.001) break; + const hRatio = n * freqMult; + + // Center line + const cpts = buildCenterPoints(this, curve, hRatio); + if (cpts.length >= 2) { + ctx.globalAlpha = ampMult * 0.85; + ctx.strokeStyle = color; + ctx.lineWidth = 1.5; + ctx.setLineDash([3, 4]); + ctx.beginPath(); + ctx.moveTo(cpts[0][0], cpts[0][1]); + for (let i = 1; i < cpts.length; ++i) ctx.lineTo(cpts[i][0], cpts[i][1]); + ctx.stroke(); + ctx.setLineDash([]); + } + + // Spread band fill + boundary dashes + const {upper: hu, lower: hl} = buildBandPoints(this, curve, sa, sb, hRatio); + if (hu.length >= 2) { + ctx.beginPath(); + ctx.moveTo(hu[0][0], hu[0][1]); + for (let i = 1; i < hu.length; ++i) ctx.lineTo(hu[i][0], hu[i][1]); + for (let i = hl.length - 1; i >= 0; --i) ctx.lineTo(hl[i][0], hl[i][1]); + ctx.closePath(); + ctx.fillStyle = color; + ctx.globalAlpha = ampMult * 0.12; + ctx.fill(); + + ctx.globalAlpha = ampMult * 0.55; + ctx.strokeStyle = color; + ctx.lineWidth = 1; + ctx.setLineDash([3, 5]); + ctx.beginPath(); + ctx.moveTo(hu[0][0], hu[0][1]); + for (let i = 1; i < hu.length; ++i) ctx.lineTo(hu[i][0], hu[i][1]); + ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(hl[0][0], hl[0][1]); + for (let i = 1; i < hl.length; ++i) ctx.lineTo(hl[i][0], hl[i][1]); + ctx.stroke(); + ctx.setLineDash([]); + } + } + } + ctx.globalAlpha = savedAlpha; } @@ -586,6 +646,129 @@ class SpectrogramViewer { ctx.fillText(useSynth ? 'SYNTH [a]' : 'ORIG [a]', 4, 10); } + // Draw synthesized power spectrum of the selected partial at `time` into partialSpectrumCanvas. + // X-axis: log frequency (same scale as main view). Y-axis: dB (normalised to peak). + // force=true bypasses cache — used by render() when params change. + // Otherwise cached on {partialIndex, time} for mouse-move performance. + renderPartialSpectrum(time, force = false) { + const ctx = this.partialSpectrumCtx; + if (!ctx) return; + + const canvas = this.partialSpectrumCanvas; + const width = canvas.width; + const height = canvas.height; + const p = this.selectedPartial; + + // Cache check — skip if same partial+time unless forced by param change + if (!force && this._partialSpecCache && + this._partialSpecCache.partialIndex === p && + this._partialSpecCache.time === time) return; + + ctx.fillStyle = '#1e1e1e'; + ctx.fillRect(0, 0, width, height); + ctx.font = '9px monospace'; + + if (p < 0 || !this.partials || p >= this.partials.length) { + ctx.fillStyle = '#333'; + ctx.fillText('no partial', 4, height / 2 + 4); + this._partialSpecCache = {partialIndex: p, time}; + return; + } + + const partial = this.partials[p]; + const curve = partial.freqCurve; + if (!curve || time < curve.t0 || time > curve.t3) { + ctx.fillStyle = '#333'; + ctx.fillText('out of range', 4, height / 2 + 4); + this._partialSpecCache = {partialIndex: p, time}; + return; + } + + // Synthesize window → FFT → power spectrum + const specData = this._computePartialSpectrum(partial, time); + this._partialSpecCache = {partialIndex: p, time, specData}; + + const {squaredAmp, maxDB, sampleRate, fftSize} = specData; + const numBins = fftSize / 2; + const binWidth = sampleRate / fftSize; + const color = this.partialColor(p); + const cr = parseInt(color[1] + color[1], 16); + const cg = parseInt(color[2] + color[2], 16); + const cb = parseInt(color[3] + color[3], 16); + + for (let px = 0; px < width; ++px) { + const fStart = this.normToFreq(px / width); + const fEnd = this.normToFreq((px + 1) / width); + const bStart = Math.max(0, Math.floor(fStart / binWidth)); + const bEnd = Math.min(numBins - 1, Math.ceil(fEnd / binWidth)); + if (bStart > bEnd) continue; + + let maxSq = 0; + for (let b = bStart; b <= bEnd; ++b) if (squaredAmp[b] > maxSq) maxSq = squaredAmp[b]; + + const magDB = 10 * Math.log10(Math.max(maxSq, 1e-20)); + const barH = Math.round(this.normalizeDB(magDB, maxDB) * (height - 12)); + if (barH <= 0) continue; + + const grad = ctx.createLinearGradient(0, height - barH, 0, height); + grad.addColorStop(0, color); + grad.addColorStop(1, `rgba(${cr},${cg},${cb},0.53)`); + ctx.fillStyle = grad; + ctx.fillRect(px, height - barH, 1, barH); + } + + ctx.fillStyle = color; + ctx.fillText('P#' + p + ' @' + time.toFixed(3) + 's', 4, 10); + } + + // Synthesise a 2048-sample Hann-windowed frame of `partial` centred on `time`, + // run FFT, and return {squaredAmp, maxDB, sampleRate, fftSize}. + // freqCurve times are shifted so synthesizeMQ's t=0 aligns with tStart = time - window/2. + _computePartialSpectrum(partial, time) { + const sampleRate = this.audioBuffer.sampleRate; + const FFT_SIZE = 2048; + const windowDuration = FFT_SIZE / sampleRate; + const tStart = time - windowDuration / 2; + + // Shift curve times so synthesis window [0, windowDuration] maps to [tStart, tStart+windowDuration] + const fc = partial.freqCurve; + const shiftedPartial = { + ...partial, + freqCurve: { + t0: fc.t0 - tStart, t1: fc.t1 - tStart, + t2: fc.t2 - tStart, t3: fc.t3 - tStart, + v0: fc.v0, v1: fc.v1, v2: fc.v2, v3: fc.v3, + a0: fc.a0, a1: fc.a1, a2: fc.a2, a3: fc.a3, + }, + }; + + const pcm = synthesizeMQ([shiftedPartial], sampleRate, windowDuration, true, {}); + + // Hann window + for (let i = 0; i < FFT_SIZE; ++i) { + pcm[i] *= 0.5 * (1 - Math.cos(2 * Math.PI * i / (FFT_SIZE - 1))); + } + + // FFT + const real = new Float32Array(FFT_SIZE); + const imag = new Float32Array(FFT_SIZE); + for (let i = 0; i < FFT_SIZE; ++i) real[i] = pcm[i]; + fftRadix2(real, imag, FFT_SIZE, 1); + + // Power spectrum + const squaredAmp = new Float32Array(FFT_SIZE / 2); + for (let i = 0; i < FFT_SIZE / 2; ++i) { + squaredAmp[i] = (real[i] * real[i] + imag[i] * imag[i]) / (FFT_SIZE * FFT_SIZE); + } + + // maxDB for normalizing the display + let maxSq = 1e-20; + for (let i = 0; i < squaredAmp.length; ++i) if (squaredAmp[i] > maxSq) maxSq = squaredAmp[i]; + const maxDB = 10 * Math.log10(maxSq); + + return {squaredAmp, maxDB, sampleRate, fftSize: FFT_SIZE}; + } + // --- View management --- updateViewBounds() { @@ -608,10 +791,19 @@ class SpectrogramViewer { this.t_center = (this.t_view_min + this.t_view_max) / 2; } + destroy() { + const {canvas} = this; + canvas.removeEventListener('mousedown', this._onMousedown); + canvas.removeEventListener('mousemove', this._onMousemove); + canvas.removeEventListener('mouseleave', this._onMouseleave); + canvas.removeEventListener('mouseup', this._onMouseup); + canvas.removeEventListener('wheel', this._onWheel); + } + setupMouseHandlers() { const {canvas, tooltip} = this; - canvas.addEventListener('mousedown', (e) => { + this._onMousedown = (e) => { const {x, y} = getCanvasCoords(e, canvas); // Explore mode: commit preview on click @@ -626,14 +818,8 @@ class SpectrogramViewer { if (this.selectedPartial >= 0 && this.selectedPartial < this.partials.length) { const ptIdx = this.hitTestControlPoint(x, y, this.partials[this.selectedPartial]); if (ptIdx >= 0) { - const curve = this.partials[this.selectedPartial].freqCurve; - let companionOff = null; - if (ptIdx === 0) - companionOff = { dt: curve.t1 - curve.t0, dv: curve.v1 - curve.v0 }; - else if (ptIdx === 3) - companionOff = { dt: curve.t2 - curve.t3, dv: curve.v2 - curve.v3 }; if (this.onBeforeChange) this.onBeforeChange(); - this.dragState = { pointIndex: ptIdx, companionOff }; + this.dragState = { pointIndex: ptIdx }; canvas.style.cursor = 'grabbing'; e.preventDefault(); return; @@ -643,23 +829,19 @@ class SpectrogramViewer { // Otherwise: select partial by click const idx = this.hitTestPartial(x, y); this.selectPartial(idx); - }); + }; + canvas.addEventListener('mousedown', this._onMousedown); - canvas.addEventListener('mousemove', (e) => { + this._onMousemove = (e) => { const {x, y} = getCanvasCoords(e, canvas); if (this.dragState) { - const t = Math.max(0, Math.min(this.t_max, this.canvasToTime(x))); - const v = Math.max(this.freqStart, Math.min(this.freqEnd, this.canvasToFreq(y))); + const t = clamp(this.canvasToTime(x), 0, this.t_max); + const v = clamp(this.canvasToFreq(y), this.freqStart, this.freqEnd); const partial = this.partials[this.selectedPartial]; const i = this.dragState.pointIndex; partial.freqCurve['t' + i] = t; partial.freqCurve['v' + i] = v; - if (this.dragState.companionOff) { - const off = this.dragState.companionOff; - if (i === 0) { partial.freqCurve.t1 = t + off.dt; partial.freqCurve.v1 = v + off.dv; } - else { partial.freqCurve.t2 = t + off.dt; partial.freqCurve.v2 = v + off.dv; } - } this.render(); e.preventDefault(); return; @@ -680,6 +862,7 @@ class SpectrogramViewer { if (this.playheadTime < 0) { this.spectrumTime = time; this.renderSpectrum(); + this.renderPartialSpectrum(time); } // Cursor hint for control points (skip in explore mode) @@ -696,23 +879,26 @@ class SpectrogramViewer { tooltip.style.top = (e.clientY + 10) + 'px'; tooltip.style.display = 'block'; tooltip.textContent = `${time.toFixed(3)}s, ${freq.toFixed(1)}Hz, ${intensity.toFixed(1)}dB`; - }); + }; + canvas.addEventListener('mousemove', this._onMousemove); - canvas.addEventListener('mouseleave', () => { + this._onMouseleave = () => { this.mouseX = -1; this.drawMouseCursor(-1); tooltip.style.display = 'none'; - }); + }; + canvas.addEventListener('mouseleave', this._onMouseleave); - canvas.addEventListener('mouseup', () => { + this._onMouseup = () => { if (this.dragState) { this.dragState = null; canvas.style.cursor = 'crosshair'; if (this.onPartialSelect) this.onPartialSelect(this.selectedPartial); } - }); + }; + canvas.addEventListener('mouseup', this._onMouseup); - canvas.addEventListener('wheel', (e) => { + this._onWheel = (e) => { e.preventDefault(); const delta = e.deltaY !== 0 ? e.deltaY : e.deltaX; @@ -737,7 +923,8 @@ class SpectrogramViewer { this.updateViewBounds(); this.render(); - }); + }; + canvas.addEventListener('wheel', this._onWheel); } // --- Utilities --- |