joshwcomeau / waveforms

An interactive, explorable explanation about the peculiar magic of sound waves.

Waveforms

This interactive guide introduces and explores waveforms. It covers how to read waveform graphs, goes over the fundamental physics of sound, teaches how it relates to music and harmony, and demonstrates how to build complex tones from simple ones.

This guide is aimed at a general audience–no prior knowledge is required.

Check it out!

---

Future plans

I'm toying with the idea of making this a series. There are other interesting audio concepts to explore. Off the top of my head:

• FFT
• Human perception of sound
• Phase offset effects like phasers, flangers, delays, and reverb
• Distortion (clip distortion, bit reduction)
• FM/AM synthesis
• Envelope generators and filters.

It's likely I won't get to this anytime soon, but do let me know if you think there's a need for interactive explanations of these concepts!

How It's Made

This tutorial-thingy is purely front-end, built with React. No state management library was needed. Styled with styled-components.

The waveforms are rendered with SVG (although they can also render to Canvas with the change of a prop), and the air molecule grids render to Canvas. I used the fancy new IntersectionObserver to handle the scroll-based logic, with a fallback to a simple scroll listener.

NOTE: This was a very interesting project from a technical perspective! I needed to draw Waveforms in lots of different configurations and states. Waveforms can be one of a series of predefined shapes, or arbitrary shapes (as is the case when converging multiple waveforms together). Waveforms can be "playing", and any state change that can happen (even changing the waveform shape) needs to work whether it's staying still or playing. Also, every transition should use spring physics. Also, it should be performant while doing all of this.

I started writing up how it works, but I realized that it is super non-trivial, and it deserves a proper blog post. I would like to write that blog post at some point. If this interests you, feel free to poke me on Twitter and remind me.

You can also poke around yourself! Check out all the components that start with Waveform, like WaveformPlayer or WaveformTween.

Running locally

Want to run this on your machine? it should be as simple as git clone, yarn install, and yarn:start. Let me know if that fails.

Contributing

Please open issues describing changes you'd like to contribute before spending any time working on them; this is a personal side-project, and I open-sourced it primarily as an educational thing, for those curious how it was built. I'm not actively seeking external contributions, and there would be a bit of friction (this repo is no longer the "source of truth" for the project, as it lives on The Pudding).

waveforms's Issues

Translations

Hello, i just finished reading this and i loved it, it would be awesome if i could share this with people who doesn't speak english.
Would you be interested in receiving translations?
I mean, i don't know how much trouble would be to add a language selector (is it better to fork it and translate instead?)

"Further Reading" section

It would be great to have an appendix of links for folks who want to continue learning about this subject.

amplitude isn't loudness

The text is lucidly written, but it claims at multiple points that physical displacement is the same as loudness. It's a subtle point, but an important one, I think, that amplitude is a physical measure of displacement, while loudness is a perceptual corollate of amplitude. The definition of loudness is "how loud a sound sounds," while the definition of a wave's amplitude is something like "the magnitude of physical displacement of a medium's particles due to a wave's propagation through the medium." (That is, amplitude is a measure of the effect of the wave's propagation.) This becomes important when we throw timbre into the mix: if I hear a scream from a large distance away, I will probably still call this a "loud" sound -- due to its timbre, and my intuition that it would sound loud at a short distance -- even though the amplitude at my point of audition would not be very high.

Add emojis (e.g. both 🌊👋) to project description to get emoji listed ;).

Then I can add this to the js-emoji-projects list 🌊👋🎉 ;).

Speed of sound should be constant

Love the tutorial! But one thing bothers me - the air molecule grid shows one period across its width, independent of frequency, which implies that the speed of sound is linearly proportional to frequency.

Constant speed as a function of frequency is much closer to the behavior of air, which would require the number of periods visible across the width to be linearly proportional to frequency.

An expansion request

Hey, thanks for this amazing presentation. I'd like to request an expansion to this paragraph:

The difference is the scale. With harmonics, the additional "notes" are all multiples of the root frequency, whereas western music divides an octave into 12 intervals.

For me, this is the most intriguing aspect of it all, the transition from thinking about about time and displacement to thinking in terms of musical theory. I can't contribute anything on the topic myself, but if time allow and you find it worthwhile to expand this paragraph to perhaps its own section (not necessarily with another plot, just more explanation), that'd be much appreciated!

Thanks for considering.

not all "side effects " are harmonics

The text implies that additional frequency components in a spectrum will always be integer multiples of a fundamental. This conflates the important notion of partials -- spectral components that may or may not be integer multiples of a fundamental, as in non-harmonic spectra like bell sounds -- with the notion of harmonics, spectral components that bear an integer-multiple relationship to a fundamental frequency.