fourier transform : Update defaults, add tooltip, improve phase filter

fourier_transform.html

@@ -29,8 +29,8 @@
                     </div>
                     <div class="control-group">
                         <label for="freq1" class="control-label">Frequency (Hz)</label>
-                        <input type="range" min="0" max="50" value="5" step="1" class="slider" id="freq1">
-                        <div class="slider-value" id="freq1Value">5 Hz</div>
+                        <input type="range" min="0" max="50" value="4" step="1" class="slider" id="freq1">
+                        <div class="slider-value" id="freq1Value">4 Hz</div>
                     </div>
                     <div class="control-group">
                         <label for="amp1" class="control-label">Amplitude</label>
@@ -55,8 +55,8 @@
                     </div>
                     <div class="control-group">
                         <label for="freq2" class="control-label">Frequency (Hz)</label>
-                        <input type="range" min="0" max="50" value="15" step="1" class="slider" id="freq2">
-                        <div class="slider-value" id="freq2Value">15 Hz</div>
+                        <input type="range" min="0" max="50" value="8" step="1" class="slider" id="freq2">
+                        <div class="slider-value" id="freq2Value">8 Hz</div>
                     </div>
                     <div class="control-group">
                         <label for="amp2" class="control-label">Amplitude</label>
@@ -81,8 +81,8 @@
                     </div>
                     <div class="control-group">
                         <label for="freq3" class="control-label">Frequency (Hz)</label>
-                        <input type="range" min="0" max="50" value="25" step="1" class="slider" id="freq3">
-                        <div class="slider-value" id="freq3Value">25 Hz</div>
+                        <input type="range" min="0" max="50" value="12" step="1" class="slider" id="freq3">
+                        <div class="slider-value" id="freq3Value">12 Hz</div>
                     </div>
                     <div class="control-group">
                         <label for="amp3" class="control-label">Amplitude</label>
@@ -107,8 +107,8 @@
                     </div>
                     <div class="control-group">
                         <label for="freq4" class="control-label">Frequency (Hz)</label>
-                        <input type="range" min="0" max="50" value="35" step="1" class="slider" id="freq4">
-                        <div class="slider-value" id="freq4Value">35 Hz</div>
+                        <input type="range" min="0" max="50" value="16" step="1" class="slider" id="freq4">
+                        <div class="slider-value" id="freq4Value">16 Hz</div>
                     </div>
                     <div class="control-group">
                         <label for="amp4" class="control-label">Amplitude</label>
@@ -125,8 +125,17 @@
                 <!-- Global Settings -->
                 <div class="wave-section" style="border-top: 2px solid var(--color-border); padding-top: var(--space-md); margin-top: var(--space-md);">
                     <div class="control-group">
-                        <label for="numSamples" class="control-label">Samples (N)</label>
-                        <input type="range" min="64" max="512" value="256" step="1" class="slider" id="numSamples">
+                        <label for="numSamples" class="control-label">
+                            Samples (N)
+                            <span class="help-tooltip" title="Limiter N à des puissances de 2 (64, 128, 256, 512) garantit une meilleure résolution spectrale et évite le 'spectral leakage' qui crée des pics parasites dans le spectre de phase.">ℹ️</span>
+                        </label>
+                        <input type="range" min="64" max="512" value="256" step="64" class="slider" id="numSamples" list="powersOf2">
+                        <datalist id="powersOf2">
+                            <option value="64"></option>
+                            <option value="128"></option>
+                            <option value="256"></option>
+                            <option value="512"></option>
+                        </datalist>
                         <div class="slider-value" id="numSamplesValue">256</div>
                     </div>
                     <div class="control-group">

src/css/fourier_transform.css

@@ -99,3 +99,54 @@
         gap: var(--space-xs);
     }
 }
+
+/* Tooltip for help icon */
+.help-tooltip {
+    display: inline-block;
+    cursor: help;
+    margin-left: 4px;
+    font-size: 0.9em;
+    color: var(--color-primary);
+    position: relative;
+    vertical-align: middle;
+}
+
+.help-tooltip:hover::after {
+    content: attr(title);
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: var(--color-bg-secondary);
+    color: var(--color-text);
+    padding: 8px 12px;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    white-space: normal;
+    width: 300px;
+    max-width: 300px;
+    z-index: 1000;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    border: 1px solid var(--color-border);
+    margin-bottom: 8px;
+    text-align: left;
+    line-height: 1.4;
+}
+
+.help-tooltip::before {
+    content: "";
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent var(--color-border) transparent;
+    opacity: 0;
+    transition: opacity 0.2s;
+    margin-bottom: 2px;
+}
+
+.help-tooltip:hover::before {
+    opacity: 1;
+}

src/js/fourier_transform.js

@@ -202,20 +202,19 @@ function generateCompositeSignal() {
         const amplitude = parseFloat(document.getElementById(`amp${i}`).value);
         const phase = parseInt(document.getElementById(`phase${i}`).value);
         
-        if (amplitude > 0) {
-            const wave = generateSineWave(frequency, amplitude, phase, SAMPLING_RATE, numSamples);
-            individualWaves.push({
-                frequency,
-                amplitude,
-                phase,
-                color: WAVE_COLORS[i - 1],
-                data: wave
-            });
-            
-            // Add to composite signal
-            for (let n = 0; n < numSamples; n++) {
-                signal[n] += wave[n];
-            }
+        // Generate wave even if amplitude is 0, as long as the wave is enabled
+        const wave = generateSineWave(frequency, amplitude, phase, SAMPLING_RATE, numSamples);
+        individualWaves.push({
+            frequency,
+            amplitude,
+            phase,
+            color: WAVE_COLORS[i - 1],
+            data: wave
+        });
+        
+        // Add to composite signal
+        for (let n = 0; n < numSamples; n++) {
+            signal[n] += wave[n];
         }
     }
     
@@ -473,8 +472,12 @@ function updateVisualizations() {
     magnitudeChart.options.scales.x.max = maxFreq;
     
     // Update Phase Spectrum
+    // Use dynamic threshold based on max magnitude to avoid noise in phase spectrum
+    const maxMagnitude = Math.max(...magnitudes);
+    const threshold = Math.max(maxMagnitude * 0.01, 0.001); // At least 1% of max or 0.001
+    
     const significantPhases = filteredFreqIndices
-        .filter(item => magnitudes[item.i] > 0.1) // Only show phase for significant frequencies
+        .filter(item => magnitudes[item.i] > threshold) // Only show phase for significant frequencies
         .map(item => ({
             x: item.f,
             y: phases[item.i]