- Color
-
-
- updateParam('invert', false)}
- className={`px-2 py-1 text-xs border ${
- !params.invert
- ? 'bg-white text-black border-white'
- : 'bg-black text-white border-gray-600 hover:border-white'
- }`}
- >
- Normal
-
- updateParam('invert', true)}
- className={`px-2 py-1 text-xs border ${
- params.invert
- ? 'bg-white text-black border-white'
- : 'bg-black text-white border-gray-600 hover:border-white'
- }`}
- >
- Inverted
-
-
-
-
- {/* Contrast - Available for both modes */}
-
-
- Contrast: {(params.contrast || 2.2).toFixed(1)}
+ Duration: {params.duration}s
updateParam('contrast', Number(e.target.value))}
+ max="30"
+ step="1"
+ value={params.duration}
+ onChange={e => updateParam('duration', Number(e.target.value))}
className="w-full"
/>
-
Power curve for brightness perception
{/* Custom Mode Only Parameters */}
@@ -482,89 +220,345 @@ export default function AudioPanel() {
<>
- Frequency Mapping
+ Max Partials: {params.maxPartials}
-
- updateParam('frequencyMapping', 'mel')}
- className={`px-2 py-1 text-xs border ${
- (params.frequencyMapping || 'linear') === 'mel'
- ? 'bg-white text-black border-white'
- : 'bg-black text-white border-gray-600 hover:border-white'
- }`}
- >
- Mel
-
- updateParam('frequencyMapping', 'linear')}
- className={`px-2 py-1 text-xs border ${
- (params.frequencyMapping || 'linear') === 'linear'
- ? 'bg-white text-black border-white'
- : 'bg-black text-white border-gray-600 hover:border-white'
- }`}
- >
- Linear
-
- updateParam('frequencyMapping', 'bark')}
- className={`px-2 py-1 text-xs border ${
- params.frequencyMapping === 'bark'
- ? 'bg-white text-black border-white'
- : 'bg-black text-white border-gray-600 hover:border-white'
- }`}
- >
- Bark
-
- updateParam('frequencyMapping', 'log')}
- className={`px-2 py-1 text-xs border ${
- params.frequencyMapping === 'log'
- ? 'bg-white text-black border-white'
- : 'bg-black text-white border-gray-600 hover:border-white'
- }`}
- >
- Log
-
-
-
How image height maps to frequency
+
updateParam('maxPartials', Number(e.target.value))}
+ className="w-full"
+ />
+
+ Controls audio complexity vs performance
+
- Spectral Density: {params.spectralDensity || 3}
+ Frequency Density: {params.frequencyResolution}x
updateParam('spectralDensity', Number(e.target.value))}
+ value={params.frequencyResolution}
+ onChange={e => updateParam('frequencyResolution', Number(e.target.value))}
className="w-full"
/>
-
Tones per frequency peak (richer = higher)
+
+ Higher values create broader, richer frequency bands
+
+
+
+ )}
+
+ {/* Direct Mode Only Parameters */}
+ {(params.synthesisMode || 'direct') === 'direct' && (
+ <>
+
+
+
+ FFT Size: {params.fftSize || 2048}
+
+
+ {[1024, 2048, 4096, 8192].map(size => (
+ updateParam('fftSize', size)}
+ className={`px-2 py-1 text-xs border ${
+ (params.fftSize || 2048) === size
+ ? 'bg-white text-black border-white'
+ : 'bg-black text-white border-gray-600 hover:border-white'
+ }`}
+ >
+ {size}
+
+ ))}
+
+
+ Higher = better frequency resolution
+
+
+
+
+
+ Frame Overlap: {((params.frameOverlap || 0.75) * 100).toFixed(0)}%
+
+
updateParam('frameOverlap', Number(e.target.value))}
+ className="w-full"
+ />
+
+ Higher = smoother temporal resolution
+
+
+
+
+
+ Disable normalization: can be very loud
+
+
+ updateParam('disableNormalization', !(params.disableNormalization ?? false))
+ }
+ className={`px-2 py-1 text-xs border ${
+ params.disableNormalization === true
+ ? 'bg-white text-black border-white'
+ : 'bg-black text-white border-gray-600 hover:border-white'
+ }`}
+ >
+ {params.disableNormalization === true ? 'ON' : 'OFF'}
+
+
+
+
+ )}
+
+
+
+ Min Frequency: {params.minFreq}Hz
+
+
+
+
+
+ Max Frequency: {params.maxFreq}Hz
+
+
+
+ {/* Custom Mode Only Parameters */}
+ {params.synthesisMode === 'custom' && (
+ <>
+
+
+ Amplitude Threshold: {params.amplitudeThreshold}
+
+
updateParam('amplitudeThreshold', Number(e.target.value))}
+ className="w-full"
+ />
+
Minimum amplitude to include
-
-
Perceptual RGB Weighting
+
+
Window Type
+
+ updateParam('windowType', 'rectangular')}
+ className={`px-2 py-1 text-xs border ${
+ params.windowType === 'rectangular'
+ ? 'bg-white text-black border-white'
+ : 'bg-black text-white border-gray-600 hover:border-white'
+ }`}
+ >
+ Rect
+
+ updateParam('windowType', 'hann')}
+ className={`px-2 py-1 text-xs border ${
+ params.windowType === 'hann'
+ ? 'bg-white text-black border-white'
+ : 'bg-black text-white border-gray-600 hover:border-white'
+ }`}
+ >
+ Hann
+
+ updateParam('windowType', 'hamming')}
+ className={`px-2 py-1 text-xs border ${
+ params.windowType === 'hamming'
+ ? 'bg-white text-black border-white'
+ : 'bg-black text-white border-gray-600 hover:border-white'
+ }`}
+ >
+ Hamming
+
+ updateParam('windowType', 'blackman')}
+ className={`px-2 py-1 text-xs border ${
+ params.windowType === 'blackman'
+ ? 'bg-white text-black border-white'
+ : 'bg-black text-white border-gray-600 hover:border-white'
+ }`}
+ >
+ Blackman
+
+
+
+ Reduces clicking/popping between time frames
+
+
+
+ )}
+
+ {/* Color Inversion - Available for both modes */}
+
+
+
Color
+
updateParam('usePerceptualWeighting', !params.usePerceptualWeighting)}
+ onClick={() => updateParam('invert', false)}
className={`px-2 py-1 text-xs border ${
- params.usePerceptualWeighting !== false
+ !params.invert
? 'bg-white text-black border-white'
: 'bg-black text-white border-gray-600 hover:border-white'
}`}
>
- {params.usePerceptualWeighting !== false ? 'ON' : 'OFF'}
+ Normal
+
+ updateParam('invert', true)}
+ className={`px-2 py-1 text-xs border ${
+ params.invert
+ ? 'bg-white text-black border-white'
+ : 'bg-black text-white border-gray-600 hover:border-white'
+ }`}
+ >
+ Inverted
-
Squared RGB sum for better brightness perception
-
- )}
+
+ {/* Contrast - Available for both modes */}
+
+
+ Contrast: {(params.contrast || 2.2).toFixed(1)}
+
+
updateParam('contrast', Number(e.target.value))}
+ className="w-full"
+ />
+
Power curve for brightness perception
+
+
+ {/* Custom Mode Only Parameters */}
+ {params.synthesisMode === 'custom' && (
+ <>
+
+
Frequency Mapping
+
+ updateParam('frequencyMapping', 'mel')}
+ className={`px-2 py-1 text-xs border ${
+ (params.frequencyMapping || 'linear') === 'mel'
+ ? 'bg-white text-black border-white'
+ : 'bg-black text-white border-gray-600 hover:border-white'
+ }`}
+ >
+ Mel
+
+ updateParam('frequencyMapping', 'linear')}
+ className={`px-2 py-1 text-xs border ${
+ (params.frequencyMapping || 'linear') === 'linear'
+ ? 'bg-white text-black border-white'
+ : 'bg-black text-white border-gray-600 hover:border-white'
+ }`}
+ >
+ Linear
+
+ updateParam('frequencyMapping', 'bark')}
+ className={`px-2 py-1 text-xs border ${
+ params.frequencyMapping === 'bark'
+ ? 'bg-white text-black border-white'
+ : 'bg-black text-white border-gray-600 hover:border-white'
+ }`}
+ >
+ Bark
+
+ updateParam('frequencyMapping', 'log')}
+ className={`px-2 py-1 text-xs border ${
+ params.frequencyMapping === 'log'
+ ? 'bg-white text-black border-white'
+ : 'bg-black text-white border-gray-600 hover:border-white'
+ }`}
+ >
+ Log
+
+
+
How image height maps to frequency
+
+
+
+
+ Spectral Density: {params.spectralDensity || 3}
+
+
updateParam('spectralDensity', Number(e.target.value))}
+ className="w-full"
+ />
+
+ Tones per frequency peak (richer = higher)
+
+
+
+
+ Perceptual RGB Weighting
+
+ updateParam('usePerceptualWeighting', !params.usePerceptualWeighting)
+ }
+ className={`px-2 py-1 text-xs border ${
+ params.usePerceptualWeighting !== false
+ ? 'bg-white text-black border-white'
+ : 'bg-black text-white border-gray-600 hover:border-white'
+ }`}
+ >
+ {params.usePerceptualWeighting !== false ? 'ON' : 'OFF'}
+
+
+
+ Squared RGB sum for better brightness perception
+
+
+ )}
+