Understanding Harmonics Through an Interactive Additive‑Synthesis Comic

“What is a harmonic? An interactive comic about additive synthesis” is a collaborative project that blends the rigor of signal theory with the immediacy of visual storytelling. Sudara, a developer who has spent years building audio tools, teamed up with cartoonist Alec Longstreth to produce a web‑based comic that does more than illustrate – it lets you play the frequencies it discusses. The result is a compact, self‑contained lesson on why a single pitch can be decomposed into a stack of sine waves, and how those components shape the timbre we hear.

---

The Core Argument: Harmonics are the building blocks of timbre

At its heart, the comic argues that a musical note is not a monolithic entity; it is a sum of sinusoidal components whose frequencies are integer multiples of a fundamental. The fundamental (for the demo, 220 Hz) determines the perceived pitch, while the overtones—440 Hz, 660 Hz, 880 Hz, and so on—contribute the color that lets us distinguish a piano from a violin playing the same pitch.

The interactive panels make this claim concrete. Each panel shows a waveform, a spectral diagram, and a small player button. Clicking the button toggles the presence of a specific harmonic, and the waveform redraws in real time. As the user adds the 440 Hz component, the waveform’s shape becomes more complex, and the audible tone gains a brighter edge. Adding the 660 Hz harmonic thickens the sound further, while the 880 Hz component introduces a subtle “air” that many listeners associate with brass instruments.

---

Key Supporting Elements

1. Visual‑Audio Coupling – The comic pairs a traditional panel layout with embedded HTML5 audio elements. When a reader presses the play icon, a short tone generated by the Web Audio API is emitted. The source code for the synthesis engine is openly available on GitHub (sudara/additive‑synthesis‑comic), allowing curious developers to inspect the exact math behind the sound generation.

2. Step‑by‑Step Demonstration – The narrative proceeds from a single sine wave (the pure 220 Hz tone) to a full four‑harmonic stack. Each step includes a brief caption that explains the acoustic effect of the newly introduced overtone, e.g., “Adding the second harmonic doubles the frequency and introduces a sense of brightness.” This incremental approach mirrors the way audio engineers build complex patches in modular synth environments.

3. Historical Context – A sidebar panel references the work of early acousticians such as Hermann von Helmholtz, whose 19th‑century investigations into the spectral composition of sounds laid the groundwork for modern additive synthesis. By linking to the public‑domain text On the Sensations of Tone (via the Internet Archive), the comic situates its interactive lesson within a broader scientific tradition.

---

Implications for Learning and Tool Design

The comic demonstrates a pedagogical model that could be extended to other domains of digital signal processing. By embedding live, manipulable audio directly into explanatory graphics, creators can bypass the abstraction barrier that often deters newcomers from exploring concepts like filter envelopes, phase modulation, or spectral masking. In a classroom setting, a teacher could pause the comic at any panel, ask students to predict the effect of adding a new harmonic, and then let the audio confirm or refute the hypothesis.

From a tool‑building perspective, the project showcases how a modest amount of JavaScript—leveraging the Web Audio API’s OscillatorNode and GainNode—can produce a fully functional additive synthesizer without requiring external libraries. This minimalistic approach is attractive for developers who want to embed sound experiments in documentation, tutorials, or even product onboarding flows.

---

Counter‑Perspectives and Limitations

While the interactive comic excels at illustrating the concept of additive synthesis, it simplifies several real‑world complexities. First, the harmonics are all perfectly in‑phase and have equal amplitude, which is rarely true for acoustic instruments; natural timbres often involve subtle detuning and amplitude roll‑off that give each instrument its unique character. Second, the demo stops at the fourth harmonic; many instruments produce dozens of partials, and the perceptual impact of higher‑order overtones can be non‑linear.

Critics might also argue that the comic’s reliance on browser audio can be inconsistent across platforms—mobile Safari, for example, imposes stricter autoplay policies that may require a user gesture before any sound can be produced. This technical friction could hinder the seamless learning experience the creators intend.

---

Where to Explore Further

• The Comic Itself – Visit the interactive experience at https://sudara.com/additive-synthesis-comic to try the panels firsthand.
• Source Code – Review the implementation on GitHub: https://github.com/sudara/additive-synthesis-comic.
• Further Reading – For a deeper dive into the mathematics of Fourier series, see the free textbook Fourier Analysis by Stein and Shakarchi (available via the Open Library).

---

Conclusion

By marrying the immediacy of a comic strip with the tactile feedback of live audio, Sudara and Alec Longstreth have crafted a compact yet powerful illustration of how harmonics construct timbre. The piece serves both as a teaching aid for anyone curious about why a note sounds the way it does, and as a proof‑of‑concept for developers who wish to embed interactive signal‑processing demos in the web medium. As the boundaries between visual storytelling and technical demonstration continue to blur, projects like this hint at a future where learning complex engineering concepts can be as engaging as reading a graphic novel.