If you’ve ever wondered how music visualizers like MilkDrop are made, this post is for you. We’ll start with simple visualizations using the Canvas API and move on to more sophisticated visualizations with WebGL shaders.

If you’ve ever built a virtual synth before, you know that trying to reproduce the analog sound is really hard1. It’s better to compete where digital has a comparative advantage, like spawning hundreds of oscillators dynamically. That’s the essence of the supersaw synth: stack a bunch of sawtooth oscillators on top of each other, each at a slightly different frequency.

Here’s the demo and the code. There are only two knobs: one to control the number of oscillators; the other to control how out-of-tune each oscillator is. It’s simple, but it can make some cool sounds. Read on if you want to learn how to build your own.