🎚️ Signal Flow Overview
Oscillator 1 & Oscillator 2 (Wave Generators) Each oscillator generates a sine wave based on its assigned frequency and amplitude.
Wave Summing The two sine waves are summed and averaged to keep the resulting signal in visual range. This combined waveform forms the final output for rendering.
Point Buffer & Scrolling New signal values are added to a circular buffer (points) which continuously shifts left-to-right across the canvas, creating a live waveform that scrolls like an oscilloscope readout.
Color Gradient Overlay A dynamic gradient scrolls along the x-axis, applied to the waveform's stroke style. The gradient animates horizontally with each frame:
Feedback Trails Instead of clearing the frame fully, a semi-transparent black fill overlays each draw pass. This creates lingering trails behind the waveform, giving a phosphor-glow persistence:
Visualization Rendering The waveform is drawn using a ctx.lineTo() sequence across the buffer. A glowing stroke and shadow give it its luminous quality. The center playhead is drawn last.
🎛️ Control Breakdown
🔷 Frequency 1 (Freq 1)
- Controls:
#frequency1(slider) &#freq1Value(number box) - Range: 0.001 Hz to 100000 Hz
- Function: Sets the frequency of Oscillator 1 (horizontal speed of the first waveform)
🔷 Amplitude 1 (Amp 1)
- Controls:
#amplitude1(slider) &#amp1Value(number box) - Range: 0.00 to 1.00
- Function: Sets the vertical intensity of Oscillator 1
🔷 Frequency 2 (Freq 2)
- Controls:
#frequency2(slider) &#freq2Value(number box) - Same behavior as Freq 1, but for Oscillator 2
🔷 Amplitude 2 (Amp 2)
- Controls:
#amplitude2(slider) &#amp2Value(number box) - Same behavior as Amp 1, but for Oscillator 2