FM Sidebands Spectrum

A plot-register recipe for visualizing FM synthesis as a spectrum: one carrier with symmetric sidebands at ±(modulator frequency) intervals.

Pedagogical intent

FM (frequency modulation) is the canonical “abstract synthesis sounds complex” topic. Beginners hear an FM patch and have no frame for why it sounds the way it does. Showing the spectrum makes the mechanism click: the modulator doesn’t change the pitch — it spawns symmetric sidebands around the carrier, and the modulation index controls how many sidebands appear and how loud they get.

This diagram lives in the plot register because it’s a curve (amplitude vs frequency), not a routing graph. A patch-register diagram of the same lesson would show “VCO → VCO (linear FM input) → output” — which is a complementary visual, not a substitute.

The target reader is someone who has just learned what an oscillator and a frequency are, and is meeting “frequency modulation” for the first time. The diagram must show:

A tall central bar at the carrier frequency (e.g., 440 Hz).
Symmetric bars on either side, spaced by the modulator frequency (e.g., 220 Hz → bars at 220, 660, …; and 220, ‑20 if visible).
Decreasing amplitude as you move further from the carrier (the Bessel-function envelope, simplified).

Visual recipe

Canvas: dimensions.standard (800 × 300).
Padding: padding.labeled — axis labels are part of the lesson.
Grid: drawGrid with xDivisions: 10, yDivisions: 4. No center line (unipolar amplitude axis).
Axes: drawAxes with xLabel: 'Hz', yLabel: 'Amplitude'.
Title: drawTitle — “FM Synthesis: Sidebands”.
Carrier bar: colors.primary, tallest bar.
Sideband bars: descending amplitude using a simplified Bessel-function shape; colors.secondary for outer pairs to highlight the symmetry.
Bar width: ~4 px to read as discrete spectral lines rather than a continuous curve.
Font: all labels in fonts.mono at fontSizes.small or fontSizes.tiny.

Reuse drawGrid / drawAxes / drawTitle from src/core/svg-builder.ts — do NOT redefine the grid or axis styling.

Generator call

import { generateFmSynthesisSidebands } from '../generators/spectrum.js';

// Currently parameter-less — the canonical FM example
// is baked into the generator.
const svg = generateFmSynthesisSidebands();

Already registered in src/generate-spectrum-svgs.ts (not in src/scripts/generate-files.ts — spectra live in the topic-specific script). The canonical filename is fm-synthesis-sidebands.svg:

// src/generate-spectrum-svgs.ts
{ name: 'fm-synthesis-sidebands.svg', svg: generateFmSynthesisSidebands() },

MDX reference: /images/synth-svg/fm-synthesis-sidebands.svg. Do not introduce a second filename (e.g., fm-sidebands.svg) for the same diagram — reuse the canonical one.

If a future article needs a different carrier/modulator ratio (e.g., to teach harmonic vs. inharmonic FM), promote the generator to take { carrierFreq, modulatorFreq, modulationIndex } options rather than copy-pasting the function.

Source articles

synth-kw-fm (FM synthesis fundamentals — primary user)
Any future mm-deep-* article that contrasts FM with AM synthesis
Generator implementation: sub-packages/synth-svg/src/generators/spectrum.ts (generateFmSynthesisSidebands)