This interactive tutorial demonstrates the Fast Fourier Transform (FFT), a fundamental algorithm that bridges the gap between the Time Domain (what we see as a waveform) and the Frequency Domain (the ingredients that make up that wave). The FFT is one of the most important algorithms in signal processing, audio analysis, communications, and scientific computing.

The simulation uses Additive Synthesis to create complex waves by combining up to 20 sine wave oscillators. Select from various waveform presets to see how different harmonic recipes create distinctive shapes. The Time Domain (top panel) shows the reconstructed waveform (white) along with individual component sine waves (colored). The Frequency Domain (bottom panel) shows the FFT spectrum with yellow markers at each active frequency.

Controls

Pause/Run: Freezes both the time domain animation and frequency spectrum. Useful for detailed examination of waveform shapes.

Waveform Presets:

• Rectangular (Square): Odd harmonics (1, 3, 5...) with 1/n amplitude decay. Creates sharp edges.
• Sawtooth: All harmonics with 1/n decay. Creates a ramp shape.
• Pure Sine: Single fundamental frequency only.
• Two-Tone Beat: Two close frequencies (200Hz, 220Hz) creating audible beating.
• 5 Harmonics: First 5 harmonics at equal amplitude.
• Violin (Curved Ramp): All harmonics with 1/n^1.5 decay. A "sweet spot" between sawtooth and triangle - rich but smooth.
• Organ (Octaves): Only power-of-2 harmonics (1, 2, 4, 8, 16). Creates a "fractal sine wave" that's very stable.
• Clarinet (Hollow): Odd harmonics with 1/n^1.5 decay. Compare to Square wave to hear the "rounder" sound.
• Church Bell (Inharmonic): Non-integer frequency ratios (1, 2.0, 3.0, 4.2, 5.4, 6.8). Notice the unevenly-spaced frequency bars and constantly changing waveform!
• Vocal "Ahh" (Formant): All harmonics with a "hill" shape peaking at harmonics 3-4-5. Demonstrates formant filtering in speech.

Show Oscillators: Toggle visibility of individual component sine waves (colored lines) in the time domain.

Speed: Control the animation speed of the waveform visualization (0.001x to 1.0x). Slower speeds make it easier to see how component waves combine.

Individual Oscillator Controls: Fine-tune each of the 20 oscillators with frequency, amplitude, phase, and enable/disable controls.

Visualization Features

Time Domain (Top): Shows the reconstructed composite waveform (white line) and optionally each component sine wave (rainbow colors). All waves animate together, demonstrating how harmonics combine to create complex shapes.

Frequency Domain (Bottom): Shows the FFT spectrum as colored bars (green→red gradient). Yellow vertical lines mark exact oscillator frequencies with labels. The X-axis automatically scales to fit the highest active frequency plus 20% padding.

Mathematical Model

The FFT is based on the mathematical foundation of the Fourier Transform:

Fourier Transform:

X(f) = ∫ x(t) e^-j2πft dt

where x(t) is the time-domain signal, X(f) is the frequency-domain representation, f is frequency, and j is the imaginary unit. The FFT is a fast, efficient algorithm (O(N log N)) that computes the Discrete Fourier Transform (DFT) for digital signals.

Additive Synthesis:

x(t) = Σ_i=1^N A_i sin(2πf_it + φ_i)

where N is the number of oscillators (20 in this simulation), A_i is the amplitude of oscillator i, f_i is the frequency of oscillator i, and φ_i is the phase. The composite signal x(t) is the sum of all active oscillators.

Harmonic Series: Different waveforms have characteristic harmonic recipes:

• Square Wave: A_n = 1/n for odd n only (1, 3, 5, 7...)
• Sawtooth Wave: A_n = 1/n for all n (1, 2, 3, 4...)
• Triangle Wave: A_n = 1/n² for odd n (decays too fast for stable visualization)

FFT Analysis:

X[k] = Σ_n=0^N-1 x[n] e^-j2πkn/N

where x[n] is the discrete time-domain signal (sampled waveform), X[k] is the frequency-domain output (spectrum), N is the number of samples (1024 bins in this simulation), and k represents frequency bins. The FFT output shows the amplitude at each frequency bin, revealing which frequencies are present in the signal.

Key Insight: The FFT is a mathematical "recipe decoder" - it takes a complex waveform (the "cooked dish") and reveals the individual sine wave components (the "ingredients"). Select different waveform presets to see how their unique harmonic recipes appear in the frequency domain. The Church Bell preset is particularly educational - its inharmonic (non-integer) frequency ratios create an unstable, beating waveform that never repeats!

Usage Example

Follow these steps to explore the FFT visualization:

1. Initial View: When you first load the simulation, you'll see:
   • A control panel on the left with three oscillator controls and master volume
   • A canvas divided into two sections: Time Domain (top) and Frequency Domain (bottom)
   • Three oscillators active by default at 200 Hz, 400 Hz, and 600 Hz, each at 30% amplitude
   • The Time Domain showing a complex waveform (the sum of three sine waves)
   • The Frequency Domain showing three distinct peaks at 200 Hz, 400 Hz, and 600 Hz
   • Yellow vertical lines marking the exact frequencies of active oscillators
2. Observe QPSK Symbols: The Tx constellation shows four QPSK symbols (1+j, -1+j, -1-j, 1-j) with slight Gaussian noise creating a cloud of points around each symbol. These represent the transmitted signal points in the complex plane (I/Q plane).
3. Interact with Channel Knob: In SISO mode, drag the circular knob in the center panel to set the static channel component (Line of Sight). The knob shows a unit circle with a vector from center to a handle. The distance from center represents magnitude (0 to 1), and the angle represents phase (0 to 2π). As you drag, observe how the Rx constellation changes in real-time.
4. Use Fading Presets: The Fading Profile dropdown provides quick access to common fading scenarios. Select different presets to see how they configure the simulation:
   • Rayleigh Fading (default): Sets knob to center (0,0), scattering 0.3, Doppler 5.0 - demonstrates pure multipath with no LoS
   • Ricean Fading: Sets knob to edge (0.8), scattering 0.2, Doppler 5.0 - demonstrates strong LoS with weaker multipath
   • Light Fading: Low scattering (0.1), moderate speed (2.0) - gentle channel variations
   • Heavy Fading: High scattering (0.4), standard speed (5.0) - severe channel variations
   • Fast Fading: Standard scattering (0.3), high speed (8.0) - rapid channel changes
   • Slow Fading: Standard scattering (0.3), low speed (1.0) - gradual channel changes
   • Custom: Allows manual adjustment of all parameters
   When you manually adjust the Scattering or Doppler sliders, the preset automatically switches to "Custom".
5. Observe Rayleigh Fading: With the default "Rayleigh Fading" preset, the knob is at the center (0,0). The ghost dot wanders around the origin, and the Rx constellation spins and collapses. This demonstrates Rayleigh Fading, where there is no dominant Line of Sight component. You can also manually drag the knob to the center to observe this effect.
6. Observe Ricean Fading: Select the "Ricean Fading" preset, or manually drag the knob to the edge (e.g., magnitude 0.8-1.0). The ghost dot will wander around that strong point. The Rx constellation will jitter but remain mostly stable because the strong LoS component dominates. This demonstrates Ricean Fading, where there is a dominant Line of Sight component.
7. Adjust Scattering Level: Use the Scattering slider to control the multipath power (range: 0 to 0.5, default: 0.3). Higher values make the ghost dot wander farther from your knob position, creating more severe fading. Lower values create gentler variations. Observe how this affects the Rx constellation stability. When you adjust this slider, the preset automatically switches to "Custom".
8. Adjust Doppler Speed: Use the Doppler Speed slider to control how fast the channel changes (range: 0 to 10, default: 5.0). Higher values make the ghost dot move faster, creating rapid channel variations. Lower values create slow, gradual changes. When set to 0, fading is effectively paused. Observe how the trace becomes smoother or more jagged. When you adjust this slider, the preset automatically switches to "Custom".
9. Toggle Fading On/Off: Use the "Enable Fading" checkbox to toggle dynamic fading. When enabled (default), channel coefficients vary continuously over time, and the Rx constellation updates dynamically. When disabled, the channel is static and matches exactly where you set the knob. Toggling this control allows you to compare static vs. dynamic channel behavior.
10. Switch to MIMO Mode: Use the Mode dropdown to switch to 2×2 MIMO. Each of the four knobs now has its own independent fading. The Tx panel displays two separate constellation plots (Tx Antenna 1 and 2), and the Rx panel displays two separate plots (Rx Antenna 1 and 2). Observe how each channel coefficient varies independently, creating complex time-varying interference patterns.
11. Adjust SNR: Use the SNR slider (range: 0 to 60 dB, default: 15 dB) to control the noise level. Lower SNR values (0-20 dB) show more noise (wider clouds around symbols), while higher SNR values (40-60 dB) show less noise (tighter clouds). The default of 15 dB creates a moderately noisy channel that makes fading effects more visible. This demonstrates how signal quality degrades with increasing noise.

Tip: The key to understanding fading is recognizing that the channel coefficient is not fixed but varies over time due to multipath propagation. The user knob sets the "mean" or "Line of Sight" component, while the scattering creates random variations around that mean. When the mean is zero (center), you get pure Rayleigh fading. When the mean is strong (edge), you get Ricean fading with a dominant LoS component. The trace visualization helps you see the channel's path through the complex plane, making it clear how fading affects signal quality. Start with the preset profiles to quickly see different fading types, then use "Custom" mode to fine-tune parameters. Try different knob positions, scattering levels, and Doppler speeds to see the full range of fading behaviors. The default settings (SNR: 15 dB, Scattering: 0.3, Doppler: 5.0) are chosen to make fading effects clearly visible.

Parameters

• Mode Selection: Choose between 1×1 SISO (Single-Input Single-Output) and 2×2 MIMO (Multiple-Input Multiple-Output) configurations. SISO mode uses a single channel coefficient (h), while MIMO mode uses a 2×2 channel matrix with four coefficients (h₁₁, h₁₂, h₂₁, h₂₂).
• Channel Coefficient (h): In SISO mode, this is a single complex number representing the channel between transmitter and receiver. The coefficient is represented in polar form: h = |h| × e^jφ, where |h| is magnitude (0 to 1) and φ is phase (0 to 2π). Magnitude represents signal attenuation, and phase represents rotation in the complex plane.
• Channel Matrix (H): In MIMO mode, this is a 2×2 matrix of complex numbers:
  • h₁₁: Channel from transmit antenna 1 to receive antenna 1 (direct path)
  • h₁₂: Channel from transmit antenna 2 to receive antenna 1 (cross-coupling)
  • h₂₁: Channel from transmit antenna 1 to receive antenna 2 (cross-coupling)
  • h₂₂: Channel from transmit antenna 2 to receive antenna 2 (direct path)
  Diagonal elements represent direct paths, while off-diagonal elements represent interference between streams.
• QPSK Modulation: The simulator uses Quadrature Phase Shift Keying with four symbols: 1+j, -1+j, -1-j, and 1-j. These symbols are represented as points in the complex plane (I/Q plane), where the real axis is the in-phase (I) component and the imaginary axis is the quadrature (Q) component.
• SNR (Signal-to-Noise Ratio): Adjustable parameter (range: 0 to 60 dB, default: 15 dB) that controls the noise level in the simulation. SNR is defined as the ratio of signal power to noise power. Higher SNR values (40-60 dB) represent high-quality channels with low noise, resulting in tight clusters around the ideal symbol positions. Lower SNR values (0-20 dB) represent noisy channels with high noise, resulting in wide clouds of points. The noise is modeled as Additive White Gaussian Noise (AWGN), which is standard for wireless communication channels. The noise level is calculated from SNR using: noise_variance = signal_power / 10^(SNR_dB/10), where signal power is approximately 2 for QPSK symbols.
• Noise Generation: The simulator uses Gaussian noise generation (Box-Muller transform) to create realistic noise distributions. Noise is added to both transmitted symbols (to show realistic Tx constellation with noise) and received symbols (to show channel noise effects). Each QPSK symbol is represented by 50 noisy points, creating a cloud effect that makes it easy to visualize signal quality and noise impact.
• Fading (Dynamic Channel): When enabled (default), the channel coefficients vary over time. The channel is decomposed into two components: H_user (static, set by user knob) and H_scatter(t) (time-varying random component). The actual channel is H_total(t) = H_user + H_scatter(t). The scattering component is generated using a simplified Jakes model (sum of sinusoids) to create smooth, realistic fading patterns. The fading causes the Rx constellation to continuously change, demonstrating how time-varying channels affect signal reception. The simulator starts with fading enabled and the "Rayleigh Fading" preset applied.
• Fading Profile Presets: The simulator includes six preset fading profiles that automatically configure scattering level, Doppler speed, and suggested knob positions. These presets demonstrate common fading scenarios: Rayleigh Fading (no LoS, pure multipath), Ricean Fading (strong LoS component), Light Fading (low multipath), Heavy Fading (high multipath), Fast Fading (rapid variations), and Slow Fading (gradual variations). The "Custom" option allows manual adjustment of all parameters. When you manually adjust the Scattering or Doppler sliders, the preset automatically switches to "Custom" to indicate that parameters have been customized.
• Scattering Level: Controls the variance (power) of the multipath scattering component (range: 0 to 0.5, default: 0.3). Higher values create more severe fading, causing the channel to wander farther from the user-set position. Lower values create gentler variations. This parameter directly affects the fading depth and how much the channel deviates from the Line of Sight component.
• Doppler Speed: Controls how fast the channel changes over time (range: 0 to 10, default: 5.0). Higher values make the channel vary more rapidly (fast fading), while lower values create slow, gradual changes (slow fading). When set to 0, the fading is effectively paused (static channel). This parameter affects the fading rate and determines how quickly the Rx constellation responds to channel variations.

Controls and Visualizations

• Mode Dropdown: Selects between 1×1 SISO and 2×2 MIMO modes. Changing the mode updates the channel matrix controls (single knob for SISO, four smaller knobs for MIMO), shows/hides second constellation plots, and regenerates all constellation plots.
• SNR Slider: Adjustable slider (range: 0 to 60 dB, default: 15 dB) that controls the Signal-to-Noise Ratio. The current SNR value is displayed next to the slider label. Moving the slider updates the noise level in real-time, regenerating both Tx and Rx constellations to show the effect of noise on signal quality. Lower SNR values produce more noise (wider point clouds), while higher SNR values produce less noise (tighter point clouds).
• Circular Knobs: Interactive controls for setting the static channel component (Line of Sight). Each knob displays a unit circle with a vector from center to a draggable handle. The distance from center represents magnitude (0 to 1), and the angle represents phase (0 to 2π). Drag the handle to set the static component. When fading is enabled, the knob becomes semi-transparent (hollow) to show it's the "anchor" point, and a yellow "ghost dot" appears showing the actual time-varying channel. A yellow trace shows the channel's trajectory over the last 50 positions. The current complex value (actual channel when fading is on) is displayed below each knob. In SISO mode, a single large knob (150×150 pixels) is displayed. In MIMO mode, four smaller knobs (100×100 pixels each) are arranged in a 2×2 grid to fit within the channel matrix panel.
• Fading Toggle: Checkbox to enable/disable dynamic fading (enabled by default). When enabled, channel coefficients vary continuously over time, and the Rx constellation updates dynamically. When disabled, the channel is static and matches exactly where you set the knob. Toggling this control allows you to compare static vs. dynamic channel behavior.
• Fading Profile Dropdown: A dropdown menu with preset fading profiles that automatically configure scattering level, Doppler speed, and suggested knob positions. Available presets include: Rayleigh Fading (no LoS, pure multipath), Ricean Fading (strong LoS component), Light Fading (low multipath), Heavy Fading (high multipath), Fast Fading (rapid variations), and Slow Fading (gradual variations). Selecting a preset updates all fading parameters and positions the knobs to demonstrate that fading type. The "Custom" option allows manual adjustment of all parameters. When you manually adjust scattering or Doppler sliders, the preset automatically switches to "Custom".
• Scattering Slider: Adjustable slider (range: 0 to 0.5, default: 0.3) that controls the multipath scattering power. The current value is displayed next to the slider. Higher values create more severe fading (the ghost dot wanders farther), while lower values create gentler variations. This directly affects how much the channel deviates from the Line of Sight component.
• Doppler Speed Slider: Adjustable slider (range: 0 to 10, default: 5.0) that controls how fast the channel changes over time. The current value is displayed next to the slider. Higher values create fast fading (rapid channel variations), while lower values create slow fading (gradual changes). When set to 0, the fading is effectively paused. This affects the fading rate and the smoothness of the channel trajectory.
• Transmit (Tx) Constellation: The left panel shows the transmitted QPSK symbols with noise. In SISO mode, a single constellation plot displays all four QPSK symbols (1+j, -1+j, -1-j, 1-j) in cyan, with 50 noisy points per symbol creating a cloud effect. In MIMO mode, two separate constellation plots are displayed: Tx Antenna 1 (Cyan) showing stream 1 symbols, and Tx Antenna 2 (Magenta) showing stream 2 symbols. Each plot uses an oscilloscope-style display with dark background, grid lines, and bright signal points. QPSK reference points are shown as small gray circles.
• Receive (Rx) Constellation: The right panel shows the received symbols after passing through the channel. The Rx constellation is calculated as y = H × x + n, where H is the channel matrix, x is the transmitted symbol, and n is additive Gaussian noise. The received symbols show how the channel rotates, scales, and distorts the transmitted symbols. In SISO mode, a single constellation plot shows the received symbols in yellow. In MIMO mode, two separate constellation plots are displayed: Rx Antenna 1 showing y₁ = h₁₁×x₁ + h₁₂×x₂ + n₁, and Rx Antenna 2 showing y₂ = h₂₁×x₁ + h₂₂×x₂ + n₂. Both plots show the mixed/interfered signals in yellow, demonstrating how each receive antenna sees a combination of both transmitted streams.
• Channel Model Display: The info panel at the bottom shows the current channel model equation with noise terms included. For SISO: "y = h × x + n", and for MIMO: "y₁ = h₁₁×x₁ + h₁₂×x₂ + n₁, y₂ = h₂₁×x₁ + h₂₂×x₂ + n₂". The equations update automatically when switching between SISO and MIMO modes.

Key Concepts

• Complex Number Representation: All signals and channel coefficients are complex numbers, represented in the I/Q plane. The real part (I) is the in-phase component, and the imaginary part (Q) is the quadrature component. Complex multiplication rotates and scales vectors in the complex plane.
• Static vs. Dynamic Channels: In static mode (fading disabled), the channel coefficient is exactly where you set it with the knob. In dynamic mode (fading enabled), the channel varies over time: H_total(t) = H_user + H_scatter(t), where H_user is your knob position (Line of Sight) and H_scatter(t) is a time-varying random component (multipath scattering).
• Rayleigh Fading: Occurs when there is no dominant Line of Sight component (H_user ≈ 0). Set the knob to the center (0,0) and enable fading to observe this. The channel wanders around the origin, and the Rx constellation spins and collapses dramatically. This represents scenarios with many equal-strength multipath components and no direct path.
• Ricean Fading: Occurs when there is a dominant Line of Sight component (H_user is large). Set the knob to the edge (magnitude 0.8-1.0) and enable fading to observe this. The channel wanders around the strong LoS point, and the Rx constellation jitters but remains relatively stable. This represents scenarios with a strong direct path plus weaker multipath components.
• Fading Visualization: When fading is enabled, each knob shows three visual elements: (1) The user-set position (semi-transparent cyan dot and vector) representing the Line of Sight component, (2) The actual channel (bright yellow dot and vector) that moves around the user position, and (3) A yellow trace showing the last 50 positions of the actual channel. This visualization makes it clear how the channel wanders around the static component, demonstrating the difference between the intended (user-set) channel and the actual time-varying channel.
• Jakes Model: The fading is generated using a simplified Jakes model, which uses a sum of sinusoids to create smooth, realistic channel variations. This avoids the "white noise" appearance of pure random values and creates continuous, physically plausible fading patterns that match real-world multipath propagation.
• MIMO Fading: In MIMO mode, each of the four channel coefficients varies independently over time. This creates complex time-varying interference patterns, as the off-diagonal elements (h₁₂, h₂₁) that represent interference also vary, making the interference itself time-varying. This demonstrates how fading affects not just signal strength but also inter-stream interference in MIMO systems.
• Real-Time Updates: The simulation updates in real-time as you drag the knobs, adjust the SNR slider, or modify fading parameters. When fading is enabled, the channel coefficients update continuously using requestAnimationFrame, causing the Rx constellation to "breathe" and rotate automatically. The ghost dots move smoothly around the user-set positions, and the trace visualization shows the channel's path through the complex plane. In MIMO mode, all four channel coefficients vary independently, creating complex time-varying interference patterns that update in real-time.