From a0888c1afa8bf178b7a57d4e80373ad867a3474a Mon Sep 17 00:00:00 2001 From: skal Date: Fri, 6 Feb 2026 13:36:19 +0100 Subject: feat(spectral_editor): Complete Phase 2 milestone - Full-featured web editor MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit MILESTONE: Spectral Brush Editor Phase 2 Complete (February 6, 2026) Phase 2 delivers a production-ready web-based editor for creating procedural audio by tracing spectrograms with parametric Bezier curves. This tool enables replacing 5KB .spec binary assets with ~100 bytes of C++ code (50-100× compression). Core Features Implemented: ======================== Audio I/O: - Load .wav and .spec files as reference spectrograms - Real-time audio preview (procedural vs original) - Live volume control with GainNode (updates during playback) - Export to procedural_params.txt (human-readable, re-editable format) - Generate C++ code (copy-paste ready for demo integration) Curve Editing: - Multi-curve support with individual colors and volumes - Bezier curve control points (frame, frequency, amplitude) - Drag-and-drop control point editing - Per-curve volume control (0-100%) - Right-click to delete control points - Curves only render within control point range (no spill) Profile System (All 3 types implemented): - Gaussian: exp(-(dist² / σ²)) - smooth harmonic falloff - Decaying Sinusoid: exp(-decay × dist) × cos(ω × dist) - metallic resonance - Noise: noise × exp(-(dist² / decay²)) - textured grit with decay envelope Visualization: - Log-scale frequency axis (20 Hz to 16 kHz) for better bass visibility - Logarithmic dB-scale intensity mapping (-60 dB to +40 dB range) - Reference opacity slider (0-100%) for mixing original/procedural views - Playhead indicator (red dashed line) during playback - Mouse crosshair with tooltip (frame number, frequency) - Control point info panel (frame, frequency, amplitude) Real-time Spectrum Viewer (NEW): - Always-visible bottom-right overlay (200×100px) - Shows frequency spectrum for frame under mouse (hover mode) - Shows current playback frame spectrum (playback mode) - Dual display: Reference (green) + Procedural (red) overlaid - dB-scale bar heights for accurate visualization - Frame number label (red during playback, gray when hovering) Rendering Architecture: - Destination-to-source pixel mapping (prevents gaps in log-scale) - Offscreen canvas compositing for proper alpha blending - Alpha channel for procedural intensity (pure colors, not dimmed) - Steeper dB falloff for procedural curves (-40 dB floor vs -60 dB reference) UI/UX: - Undo/Redo system (50-action history) - Keyboard shortcuts (1/2/Space for playback, Ctrl+Z/Ctrl+Shift+Z, Delete, Esc) - File load confirmation (warns about unsaved curves) - Automatic curve reset on new file load Technical Details: - DCT/IDCT implementation (JavaScript port matching C++ runtime) - Overlap-add synthesis with Hanning window - Web Audio API integration (32 kHz sample rate) - Zero external dependencies (pure HTML/CSS/JS) Files Modified: - tools/spectral_editor/script.js (~1730 lines, main implementation) - tools/spectral_editor/index.html (UI structure, spectrum viewer) - tools/spectral_editor/style.css (VSCode dark theme styling) - tools/spectral_editor/README.md (updated features, roadmap) Phase 3 TODO (Next): =================== - Effect combination system (noise + Gaussian modulation, layer compositing) - Improved C++ code testing (validation, edge cases) - Better frequency scale (mu-law or perceptual scale, less bass-heavy) - Pre-defined shape library (kick, snare, hi-hat templates) - Load procedural_params.txt back into editor (re-editing) - FFT-based DCT optimization (O(N log N) vs O(N²)) Integration: - Generate C++ code → Copy to src/audio/procedural_samples.cc - Add PROC() entry to assets/final/demo_assets.txt - Rebuild demo → Use AssetId::SOUND_PROC handoff(Claude): Phase 2 complete. Next: FFT implementation task for performance optimization. Co-Authored-By: Claude Sonnet 4.5 --- tools/spectral_editor/style.css | 49 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) (limited to 'tools/spectral_editor/style.css') diff --git a/tools/spectral_editor/style.css b/tools/spectral_editor/style.css index 36b4eb3..fa71d1d 100644 --- a/tools/spectral_editor/style.css +++ b/tools/spectral_editor/style.css @@ -87,6 +87,30 @@ header h1 { display: none; } +/* Mini spectrum viewer (bottom-right overlay) */ +.spectrum-viewer { + position: absolute; + bottom: 10px; + right: 10px; + width: 200px; + height: 100px; + background: rgba(30, 30, 30, 0.9); + border: 1px solid #3e3e42; + border-radius: 3px; + display: block; /* Always visible */ + pointer-events: none; /* Don't interfere with mouse events */ +} + +.spectrum-viewer.active { + display: block; /* Keep for backward compatibility */ +} + +#spectrumCanvas { + width: 100%; + height: 100%; + display: block; +} + .canvas-overlay p { font-size: 16px; margin: 8px 0; @@ -173,6 +197,31 @@ header h1 { border-color: #0e639c; } +/* Point info panel */ +.point-info { + margin-top: 10px; + padding: 10px; + background: #2d2d30; + border-radius: 3px; + font-size: 12px; +} + +.info-row { + display: flex; + justify-content: space-between; + padding: 4px 0; +} + +.info-label { + color: #858585; + font-weight: 600; +} + +.info-value { + color: #d4d4d4; + font-family: monospace; +} + /* Control panel (bottom) */ .control-panel { background: #252526; -- cgit v1.2.3