From cf0775046c059fed1a4ed04d500f26397002667d Mon Sep 17 00:00:00 2001
From: skal <pascal.massimino@gmail.com>
Date: Fri, 6 Feb 2026 11:22:01 +0100
Subject: feat(tools): Add Spectral Brush Editor UI (Phase 2 of Task #5)

Implement web-based editor for procedural audio tracing.

New Files:
- tools/spectral_editor/index.html - Main UI structure
- tools/spectral_editor/style.css - VSCode-inspired dark theme
- tools/spectral_editor/script.js - Editor logic (~1200 lines)
- tools/spectral_editor/dct.js - IDCT/DCT implementation (reused)
- tools/spectral_editor/README.md - Complete user guide

Features:
- Dual-layer canvas (reference + procedural spectrograms)
- Bezier curve editor (click to place, drag to adjust, right-click to delete)
- Profile controls (Gaussian sigma slider)
- Real-time audio playback (Key 1=procedural, Key 2=original, Space=stop)
- Undo/Redo system (50-action history with snapshots)
- File I/O:
  - Load .wav/.spec files (FFT/STFT or binary parser)
  - Save procedural_params.txt (human-readable, re-editable)
  - Generate C++ code (copy-paste ready for runtime)
- Keyboard shortcuts (Ctrl+Z/Shift+Z, Ctrl+S/Shift+S, Ctrl+O, ?)
- Help modal with shortcut reference

Technical:
- Pure HTML/CSS/JS (no dependencies)
- Web Audio API for playback (32 kHz sample rate)
- Canvas 2D for visualization (log-scale frequency)
- Linear Bezier interpolation matching C++ runtime
- IDCT with overlap-add synthesis

Next: Phase 3 (currently integrated in Phase 2)
- File loading already implemented
- Export already implemented
- Ready for user testing!

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 tools/spectral_editor/dct.js | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 tools/spectral_editor/dct.js

(limited to 'tools/spectral_editor/dct.js')

diff --git a/tools/spectral_editor/dct.js b/tools/spectral_editor/dct.js
new file mode 100644
index 0000000..e48ce2b
--- /dev/null
+++ b/tools/spectral_editor/dct.js
@@ -0,0 +1,31 @@
+const dctSize = 512; // Default DCT size, read from header
+
+// --- Utility Functions for Audio Processing ---
+// JavaScript equivalent of C++ idct_512
+function javascript_idct_512(input) {
+    const output = new Float32Array(dctSize);
+    const PI = Math.PI;
+    const N = dctSize;
+
+    for (let n = 0; n < N; ++n) {
+        let sum = input[0] / 2.0;
+        for (let k = 1; k < N; ++k) {
+            sum += input[k] * Math.cos((PI / N) * k * (n + 0.5));
+        }
+        output[n] = sum * (2.0 / N);
+    }
+    return output;
+}
+
+// Hanning window for smooth audio transitions (JavaScript equivalent)
+function hanningWindow(size) {
+    const window = new Float32Array(size);
+    const PI = Math.PI;
+    for (let i = 0; i < size; i++) {
+        window[i] = 0.5 * (1 - Math.cos((2 * PI * i) / (size - 1)));
+    }
+    return window;
+}
+
+const hanningWindowArray = hanningWindow(dctSize); // Pre-calculate window
+
-- 
cgit v1.2.3