Fourier Synthesis Visualization and Sound

Appendix A: Key Aspects

This project provides a real-time visualization and interactive experience of Fourier synthesis, illustrating how complex waveforms—such as sine, square, triangle, and sawtooth waves—can be constructed by adding together simple sine waves. Additionally, by combining visual elements with sound, the project aims to make the principles of the Fourier series easier to understand. I hope this can help audiences see how different complex waveforms are formed through the combination of basic sine waves and how they might perceive the beauty of complexity created from simplicity.

Fourier Coefficients and Waveform Construction:

Fourier synthesis involves creating complex waveforms by adding multiple sine waves with different frequencies, amplitudes, and phases.

Complex waveforms such as square, triangle, and sawtooth waves are synthesized by combining sine waves (harmonics) with specific frequencies and amplitudes. Each type of waveform has a unique harmonic structure.

Sine Wave:

• • • : The waveform function at time
    • : Amplitude of the wave
    • : Fundamental frequency of the wave
    • : Time variable

Code Implementation:

if (waveform === 'sine') {
    fourierX.push({ freq: 1, amp: A, phase: 0 });
}

A sine wave is the simplest waveform, characterized by a single frequency and amplitude. It serves as the fundamental building block for more complex waveforms.

Square Wave:

• • • : The waveform function at time
    • : Amplitude of the wave
    • : Fundamental frequency of the wave
    • : Time variable
    • : Harmonic number

Code Implementation:

if (waveform === 'square') {
    for (let i = 0; i < N; i++) {
        let k = 2 * i + 1;
        let amplitude = (4 * A) / (k * PI);
        fourierX.push({ freq: k, amp: amplitude, phase: 0 });
    }
}

A square wave is constructed by summing only the odd harmonics (1st, 3rd, 5th, etc.). Each harmonic has an amplitude inversely proportional to its frequency, resulting in a waveform with sharp transitions between high and low values. The formula shows that the amplitude of each harmonic is , where  is the harmonic index.

Triangle Wave:

• • • : The waveform function at time
    • : Amplitude of the wave
    • : Fundamental frequency of the wave
    • : Time variable
    • : Harmonic number

Code Implementation:

if (waveform === 'triangle') {
    for (let i = 0; i < N; i++) {
        let k = 2 * i + 1;
        let amplitude = (8 * A) / ((k * k) * PI * PI);
        if (i % 2 !== 0) {
            amplitude = -amplitude;
        }
        fourierX.push({ freq: k, amp: amplitude, phase: 0 });
    }
}

A triangle wave is created using only the odd harmonics. Their amplitudes decrease more rapidly (proportional to the square of the harmonic number) and alternate in sign. This produces a waveform with a linear rise and fall, resembling a triangle. The formula indicates that the amplitude of each harmonic is with alternating signs due to .

Sawtooth Wave:

• • • : The waveform function at time
    • : Amplitude of the wave
    • : Fundamental frequency of the wave
    • : Time variable
    • : Harmonic number

Code Implementation:

if (waveform === 'sawtooth') {
    for (let i = 0; i < N; i++) {
        let k = i + 1;
        let amplitude = (2 * A) / (k * PI);
        fourierX.push({ freq: k, amp: amplitude, phase: 0 });
    }
}

A sawtooth wave includes all harmonics (1st, 2nd, 3rd, etc.) with amplitudes decreasing as . This results in a waveform that ramps linearly upwards and then drops sharply, creating its characteristic linear rise and sharp drop.

Appendix B: Sample Usage for Visualization

In this project the computeFourierCoefficients function calculates the coefficients for the selected waveform. This function determines the amplitude and frequency components necessary to approximate the selected waveform using Fourier series.

function computeFourierCoefficients() {
    fourierX = [];
    let A = 1; // Set amplitude to 1 for simplicity

    if (waveform === 'sine') {
        fourierX.push({ freq: 1, amp: A, phase: 0 });
    } else if (waveform === 'square') {
        for (let k = 0; k < N; k++) {
            let n = 2 * k + 1;
            let amplitude = (4 * A) / (n * Math.PI);
            fourierX.push({ freq: n, amp: amplitude, phase: 0 });
        }
    } else if (waveform === 'triangle') {
        for (let k = 0; k < N; k++) {
            let n = 2 * k + 1;
            let amplitude = (8 * A) / ((n * n) * Math.PI * Math.PI);
            if (k % 2 !== 0) {
                amplitude = -amplitude;
            }
            fourierX.push({ freq: n, amp: amplitude, phase: 0 });
        }
    } else if (waveform === 'sawtooth') {
        for (let k = 0; k < N; k++) {
            let n = k + 1;
            let amplitude = (2 * A) / (n * Math.PI);
            fourierX.push({ freq: n, amp: amplitude, phase: 0 });
        }
    }
}

Parameters and Variables:

• fourierX: An array to store the calculated Fourier coefficients.
• A: The amplitude of the waveform, set to 1 for simplicity.
• waveform: A string that specifies the selected waveform type ('sine', 'square', 'triangle', or 'sawtooth').
• N: The number of harmonics to include in the Fourier series.
• k: An integer index used in the loop to calculate the harmonics.
• n: The harmonic number, which depends on the waveform type:
  • For square and triangle waves, n is calculated as 2 * k + 1 (odd harmonics).
  • For sawtooth waves, n is calculated as k + 1 (all harmonics).
• amplitude: The amplitude of the nth harmonic, calculated based on the waveform type and the harmonic number n.
• freq: The frequency of the nth harmonic, stored in the fourierX array.
• phase: The phase of the nth harmonic, set to 0 for simplicity.

This function calculates the Fourier coefficients for different waveform types. By adding up the necessary harmonics and storing their frequency, amplitude, and phase, the coefficients are then used to create the visual and sound representation of the waveform in this sketch.