Students have already worked with the mathematics of a single sinusoidal wave: amplitude, frequency, wavelength, and phase. This lesson extends that foundation by asking: what happens when you add multiple sine waves together? The answer — Fourier's great insight — is that virtually any periodic sound is the sum of sine waves at harmonically related frequencies, each with its own amplitude and phase.
Rather than learning this abstractly, students will build it in cables.gl — a free, browser-based visual patching environment inspired by Max/MSP and VCV Rack, using the Web Audio API under the hood. They will watch an oscilloscope and spectrum analyzer respond in real time as they add, scale, and tune oscillators, making the math audible and visible simultaneously.
Topic 4 (Waves): superposition, standing waves, timbre as harmonic content
Topic 11 (AHL Waves): Fourier analysis, diffraction, resolution
Internal Assessment bridge: students running Fourier projects can use this as a listening validation of their mathematical models
cables.gl is a node-based (visual programming) environment that runs entirely in the browser. You connect ops (operators / nodes) with wires to build signal chains — exactly like the patching paradigm behind Max/MSP, Pure Data, or VCV Rack, but with zero installation. Everything runs via the Web Audio API.
| Term | Meaning | Analogy |
|---|---|---|
| Op | A single node/module that does one job | A hardware synthesizer module |
| Port | An input or output connection point on an op | A jack socket on the module |
| Wire / Cable | The connection between two ports | The patch cable |
| Patch | The entire network of connected ops | The complete synthesizer setup |
| Trigger | An event signal (bang) rather than a continuous value | A gate / trigger pulse in modular |
Add any op by double-clicking the canvas and typing its name in the search box. You only need to type the short name (e.g. "Oscillator", "AudioAnalyzer", "Output").
Goal: Get a single pure sine wave playing and visible.
Ops to add:
Frequency to 220 and Type to sine.Goal: See what you hear — time domain and frequency domain simultaneously.
FFT Array (frequency spectrum) and Waveform Array (oscilloscope).Waveform Array → ArrayToTexture array.FFT Array output to get the spectrum — place it beside the waveform display.💡 At this stage you'll see a single spike in the spectrum at exactly 220 Hz and a clean sine wave on the oscilloscope. This is a pure tone — one Fourier component.
Goal: Add the 2nd, 3rd, and higher harmonics with controllable amplitudes. Watch the oscilloscope change shape as you add each partial.
440, 660, 880 (2×, 3×, 4× the fundamental — these are harmonics 2–4).Each slider directly controls the Aₙ coefficient in the Fourier series for the output waveform. The oscilloscope is drawing the sum y(t) in real time.
Goal: Make it more playable — connect sliders to labels so the interface is clear.
Right-click each Slider op → Label → name them "H1 (fundamental)", "H2 (octave)", "H3 (fifth+octave)", "H4 (2nd octave)". This labelling reinforces what each harmonic is musically as well as mathematically.
Optional: add Ops.WebAudio.BiquadFilter between the sum and the output to see how filtering changes the spectrum — a preview of why string instruments have rounded tones compared to the sharp spectral spikes of an ideal additive synth.
Each pair receives one challenge. Use the harmonic recipes below. Adjust amplitudes until your oscilloscope shape matches the target — then explain in one sentence why that recipe works.
| Target waveform | Harmonics present | Relative amplitudes Aₙ | Musical character |
|---|---|---|---|
| Sine | H1 only | 1, 0, 0, 0… | Flute, pure tuning fork |
| Square | Odd harmonics only | 1, 0, 1/3, 0, 1/5, 0… | Clarinet (cylindrical bore) |
| Sawtooth | All harmonics | 1, 1/2, 1/3, 1/4… | Violin, brass, rich strings |
| Triangle | Odd harmonics only | 1, 0, 1/9, 0, 1/25… | Muted, hollow tone |
| Piano-like | All, but high harmonics decay faster | 1, 0.7, 0.5, 0.3, 0.15… | Inharmonic partials in real piano |
| Bell / inharmonic | Non-integer ratios | Try 1× and 2.76× and 5.4× | Metallic, bell-like beating |
The general Fourier series for a periodic function with period T (fundamental frequency f₀ = 1/T):
For symmetric waveforms (odd functions), the cosine terms vanish and we are left with the sine-only series — exactly what students are building with their oscillator bank:
where Aₙ = amplitude of harmonic n (your Gain slider), n·f₀ = frequency of harmonic n (your Oscillator frequency setting), and φₙ = phase offset (cables.gl Oscillator has a phase input port for HL extension).
| What you see in the patch | IB Physics / Maths connection |
|---|---|
| Each oscillator spike in the spectrum | A single frequency component — Topic 4.1 characteristics of waves |
| Oscilloscope shape changing as you add harmonics | Principle of superposition — Topic 4.3 |
| Square wave ≈ sum of odd harmonics | Boundary conditions of standing waves in closed pipes — Topic 4.5 |
| Spectral "envelope" decaying with harmonic number | Connects to resolution and Rayleigh criterion concepts — Topic 11.3 |
| Bell inharmonicity (non-integer ratios) | Normal modes of two-dimensional surfaces vs. strings — HL extension |
Share a teacher-created cables.gl patch with two oscillators and analyzers already wired. Students only need to adjust sliders and add more oscillators.
Students follow Phase 1–4 of the build guide, working towards the waveform challenge cards.
Add the phase port on each oscillator. How does changing φₙ affect the oscilloscope? (Hint: it doesn't change the spectrum — explore why.)
Students with instrument recordings in their IA can read off the harmonic amplitudes from their FFT graph and enter them as Gain values — then listen to whether their model sounds like the instrument.
cables.gl has an ADSR op. Apply it to the Gain of each harmonic to explore how attack/decay shape defines the transient character of an instrument.
Advanced students can write a custom cables.gl op that takes a harmonic number array as input and spawns oscillators programmatically — a miniature synthesis engine.
Students choose one real instrument. Using a reference spectrum from an audio analysis tool (or from their IA data), they:
2048 for good frequency resolution. Smoothing to ~0.8 helps students see the spectrum settle.| Issue | Likely cause | Fix |
|---|---|---|
| No sound | Browser blocked audio autoplay | Press the ▶ Play button — this triggers a user gesture which unlocks Web Audio |
| Spectrum shows only one spike even with 4 oscillators | Oscillators not connected to the mixer / all Gain values at 0 | Trace cables back from Output_v2 to find the break |
| Oscilloscope shows noise / garbage | ArrayToTexture trigger not connected to MainLoop | Check the MainLoop → ArrayToTexture trigger wire |
| Waveform looks "wrong" for square wave | Even harmonics accidentally included, or amplitudes not 1/n | Good! Ask the student to explain what they're seeing — it's a learning moment |
| Very loud / clipping | Summing 4+ oscillators at gain 1.0 without a master limiter | Add a final Gain op set to 0.2 before Output_v2, or remind students to use the OS volume |
AudioMath_Add op is the direct equivalent of Max's +~ (signal addition). The AudioAnalyzer_v2 exposes the same data as Max's fftin~ / scope~. For the physical modeling extension (next unit), cables.gl can be extended with custom JavaScript ops — the equivalent of Max's js objects — which enables Karplus-Strong string synthesis or waveguide models without leaving the browser.| Resource | Purpose |
|---|---|
| cables.gl | The main tool — free account, browser-based |
| cables.gl Audio Docs | Official documentation for all WebAudio ops |
| AudioNodes.com | Alternative browser-based modular synth, useful fallback or complement |
| Chrome Music Lab — Spectrogram | Quick live microphone spectrogram — great for 5-min hook activity showing voice harmonics |
| PhET: Fourier Making Waves | Classic IB-friendly Fourier simulation — good pre-lesson homework |
| 3Blue1Brown: But what is the Fourier Transform? | Excellent conceptual video for pre-reading or flipped element |
| Strudel.cc | Live-coding audio in the browser — great next step for students interested in algorithmic composition or microtonality |