
Let's Learn About Waveforms - tomduncalf
http://waveforms.surge.sh/waveforms-intro
======
Derbasti
Very cool site. Just one nitpick: "Frequency" denotes the technical speed of
vibration, as said in the article.

"Pitch" is the human perception of how high or low a tone is. Pitch is a
"quale", it is purely perceptual, and _not_ measured in Hz. We perceive _one_
pitch for a guitar tone, even though it is made up of many frequencies (like
the sawtooth example).

A related technical term is "Fundamental Frequency" or "Base Frequency", which
is the lowest frequency in a harmonic tone complex.

In most cases, pitch correlates with the fundamental frequency. But not
always. For example, pianos are not strictly harmonic, their higher harmonics
are slightly higher than integer multiples of the fundamental. Yet we perceive
a single pitch. Another example: If we cut off the lowest harmonics and
fundamental using a filter (like in some telephones or cheap loudspeakers), we
still perceive the pitch as that missing harmonic. Another example: If you
play different harmonics on different ears, we still perceive it as one
homogenous tone. Another one: You can play two tones with offset fundamental
frequencies such that we _should_ hear a common fundamental below either tone.
But we don't, because our brain somehow separates co-modulated tones into
distinct auditory objects.

It is endlessly fascinating how human perception works, and "pitch" is
surprisingly nuanced and complex if you look into it deeply.

~~~
adrianmonk
> _we still perceive the pitch as that missing harmonic_

I think you mean missing fundamental here.

But aside from that, you make some very good points. The human brain has some
amazing abilities to understand what physical phenomenon might have caused the
frequencies it's picking up, even if it isn't getting all of them.

~~~
Derbasti
Yes! Thank you for the correction.

------
ponderatul
I just want to thank you maker. It's things like these that really make the
internet a special place, with so much power that can be leveraged. It's great
to see someone leveraging it to create rather than try to get people addicted
on stuff here.

~~~
joshwcomeau
Thanks for the kind words :D

~~~
wizardforhire
This may be the best example of seemless pedagogy I've ever seen on this
topic.

Now if you pushed it too the limit and went on to digital sampling and
compression codecs and ended with the Fourier transform... That would be
something legendary indeed.

~~~
curun1r
Some of that was covered by a couple of videos Xiph put out [0]. I was really
hoping they'd put out a bunch of them since I found them quite informative,
but they seemed to stop. It's too bad since I, like you, would've liked to
have seen some coverage on some of the more advanced topics.

[0] [https://xiph.org/video/](https://xiph.org/video/)

------
vaillancourtmax
I really, _really_ love this kind of visual guide. Do you guys know of
anything similar for other (unrelated) learning subjects?

Edit: just saw this one in the footer of the Waveforms page.
[http://www.r2d3.us/visual-intro-to-machine-learning-
part-1/](http://www.r2d3.us/visual-intro-to-machine-learning-part-1/)

~~~
joshwcomeau
Creator here, also keen to know if anyone has suggestions. The r2d3 one was
(obviously) a huge inspiration, it's such a nice way to learn things.

I can't seem to find it now, but either the NY Times or the Washington Post
built something similar, for the 2018 US house/senate races. Lots of graphs as
you scroll, with scroll-based events, IIRC.

EDIT: ah, how could I forget Nicky Case's explorabl.es! Was a huge inspiration
for me as well.

~~~
zaxomi
Nice work!

I have a suggestion about the chord:

With a single chord like this I think it sounds better to tune it with "just
intonation". For a major chord it is [ f * 1, f * 1.25, f * 1.5 ]. With these
frequencies the chord will not wobble.

~~~
H1Supreme
A little wobble can be nice though. When I write synthesizer patches, I almost
always detune the oscillators a few cents.

~~~
zaxomi
On a synth in a musical piece, absolutely.

But in a technical piece like this, I prefer if it isn't.

------
rrherr
Here's another good link, similar in message & medium:

Seeing Circles, Sines, and Signals: A Compact Primer on Digital Signal
Prcoessing, by Jack Schaedler

[https://jackschaedler.github.io/circles-sines-
signals/](https://jackschaedler.github.io/circles-sines-signals/)

~~~
gracenotes
I was going to link this one if someone did not already. It is a natural
followup from this article and must-read for getting intuition on DFT and its
limitations, many of which are just limitations of sampling.

As far as progressing even further into DSP, especially for audio processing,
I've found
[https://www.dsprelated.com/freebooks/filters/](https://www.dsprelated.com/freebooks/filters/)
to be a good map of the territory. But as someone with a CS degree rather than
an engineering or math degree, it's all pretty overwhelming.

~~~
graycat
Likely DFT abbreviates discrete Fourier transforms. By now the main interest
in DFT is the FFT -- fast Fourier transform, for positive integer n points, n
/ log(n) times faster.

The FFT was reinvented by J. Tukey, at Princeton and Bell Labs, at a US
Presidential Science Advisors meeting, while Tukey was taking meeting notes
with one hand and doing Fourier derivations with the other, from a query from
R. Garwin, at IBM's Watson lab. Garwin said he was using too much computer
time calculating Fourier transforms, so Tukey showed him the FFT. Later Cooley
at IBM programmed the FFT, and Cooley and Tukey published the work. The FFT
was revolutionary for signal processing, for sonar, radar, molecular
spectroscopy, etc.

The _sampling_ issue is: Suppose have a periodic waveform with highest
frequency 20 KHz (kilo Hertz, 1000 cycles per second). Then there is the
canonical theorem of interpolation theory that says that can reproduce the
wave form exactly from the values of the waveform at equally spaced points
40,000+ times a second, or some such (there is a detail right at the 40,000).
There is a cute pseudo-proof based just on pictures!

So, for DFT/FFT, we start with those _sampled_ values, and that's the
"discrete" part. E.g., the reason audio CDs use 44 KHz or some such is that
they want to be good for music up to 22 KHz. If the music really does have
significant power at 22 KHz and we sample at only, say, 15 KHz, then we will
have under sampled and end up with distorted music.

A computer sound card or chip has to reverse the discrete sampling and
generate a continuous waveform for the audio system and speakers, that is, to
_analog_.

There is a good start on Fourier series (for periodic waveforms) with the math
done carefully in W. Rudin, _Principles of Mathematical Analysis_. If a
waveform is not periodic but defined for all time, then we can do the closely
related Fourier transform, and there is a nice treatment of the math in W.
Rudin, _Real and Complex Analysis_.

Suppose we have waveforms x(t) and y(t) where t is time and x(t) and y(t) are
real numbers. Suppose we also have real numbers a and b. Suppose we are in,
say, a concert hall and musicians are playing x(t) and y(t). Suppose due to
the concert hall, for function h what we hear from x is h(x). Then we hope and
believe that

h( ax + by ) = ah(x) + bh(y)

that is, the the concert hall effect h is a _linear operator_. If in addition
h doesn't change over time, say, yesterday to tomorrow, then, presto, bingo:
All h and the concert hall can do to x and y is adjust the volume of the
harmonics! Or, a time invariant linear system is a linear operator and, from
Fourier theory, a convolution. Here I am simplifying somewhat.

Well, the world is awash in linear systems, especially for sonar and radar.
So, one of the big, early uses of DFT/FFT was in analyzing the acoustic
signals from reflections from subsurface layers from small explosions at the
surface, all for looking for oil.

~~~
stan_rogers
Good... except that the reason for 44.1KHz isn't to reproduce signals up to
22.05KHz, it's to reproduce signals up to 20KHz reliably. It is possible,
though improbable, to hit nothing but zero-crossing values if you sample at
exactly twice the highest desired frequency. Sampling just a little more often
than 2X eliminates that error; you'll always be forced to non-zero values from
which you can reconstruct the original signal.

~~~
twtw
The nonzero transition band of real antialias filters is typically a way
bigger concern than the strict equality of the Nyquist theorem.

------
lighttower
I never learned any music. My only understanding of music came from the
physics labs at school, messing around with signal generators. My wife was
trained in piano, I've asked her countless times, so what frequency are you
playing when you hit this key? Why is this key, called middle C, yet C repeats
further down the keyboard? Doesn't a C map to a unique frequency? I've been
asking her for a translation of music into physical terms for years -- to no
avail (she's a doctor). I'm looking for a "for dummies" type book, but
instead, it would be "Music for Engineers with no music background." Also why
are there pure C notes and C chords... I want that book!

~~~
TheOtherHobbes
It's called Middle C because it's the C in the middle of the keyboard.

All the other Cs are called C because we perceive them as "the same note."

Ask her to play a tune, and then play it again an octave higher and then
lower. The pitch is different, but there's also a sense that all three
versions are the same.

Mathematically, pitch is like a helix. Points with the same rotation - which
happen to be a frequency ratio of powers of 2 - sound very closely related.

Instead of giving every single note a different name, it's useful to give
notes the same repeating set of 12 names and then add a separate "height"
variable - called the octave - to describe which turn of the helix they're on.

If you play pitches with the same rotation at the same time they blend well
together. In fact you can barely tell them apart.

Of course you can rotate by less than a full circle. If you play the same tune
with a different pitch offset - say one note instead of twelve, which is the
smallest rotation you can do on a conventional keyboard - you'll hear it's
still the same shape, but there's a jarring effect between the different
versions.

Some rotations sound good together, but not as good as the identity rotation.
Others clash and sound bad.

As a guide, simple divisions of the pitch circle - like 3:2 - sound smoother
than the more complicated divisions.

The twelve notes approximate the rotations that sound best together. You get a
good mix of smooth and not so smooth blends, and you can build all kinds of
combinations with them.

You use approximations and not exact whole number ratios because you want to
be able to write music that isn't stuck with a single starting/reference note.
You can play the same tune at different starting pitches and the relationships
between the notes doesn't change.

If you use whole number ratios a tune that sounds good starting on one note
sounds weird and sour starting on others. The pitch spiral turns into an oval
corkscrew, and the neat rotations get distorted.

And yes, all the As, Bs, Cs have their own specific frequencies. By convention
A = 440Hz, and everything else is tuned around that. All the As are powers of
2 either side of 440Hz - from 27.5Hz, which is the lowest note on a piano, to
3520Hz for the highest A.

~~~
lighttower
Wow. Thank you for this! Your writing here is making clear what's been the
issue. Music people don't speak Hz, they have their own specific terms that I
can't parse because they layer many physical concepts.

~~~
lamename
So true. Communication often breaks down when people who think or speak at
different levels of abstraction meet, and their backgrounds collide.

Worst case: they argue in vain. Best case: the above happens

------
brian-armstrong
I made an interactive "lab" for tuning and customizing my modem. The lab has a
spectrograph so you can see how the audio content changes as you tune it.
Sorry for the plug, but I thought it might be interesting for people who are
into this stuff :)

[https://quiet.github.io/quiet-profile-lab](https://quiet.github.io/quiet-
profile-lab)

~~~
joshwcomeau
Cool!

------
8bitsrule
This is very well done. As a synthesist, I'd suggest (since you got so close)
that you add one detail towards the end:

the amplitude and frequencies of the overtones are ALL that gives (apart from
attack/decay and modulations) any instrument (physical or electronic) playing
a single note its individual character.

It'd be really cool if you could demo that.

~~~
joshwcomeau
Interesting idea! I think that, as another commenter said, there's a lot in
that "apart from..." \- I feel like I risk oversimplifying it (plus, as I'm
sure you know, convincing physical instruments are notoriously hard to
reproduce with oscillators and envelopes and filters alone).

But yeah, maybe I could do more to show just how wide the application of this
concept is... it's not just limited to abstract waveforms, it's the
fundamental rules for all instruments. Will give this some thought (and if you
have ideas for how to demo it, let me know!)

~~~
lamename
This would be a great 'part 2' if you had time. You could also consider
demonstrating some vowel synthesis [1].

Great work by the way!

[1]
[https://www.youtube.com/watch?v=sx5KNQYY_cg](https://www.youtube.com/watch?v=sx5KNQYY_cg)

------
jcims
Very nice! If you want to take it into the next step of waveform/signal
processing, Kevin Reid (kpreid) built an amazing interactive lesson a few
years back. Left / Right arrows to navigate the slides, click drag the graph
if you like:

[http://visual-dsp.switchb.org/presentation](http://visual-
dsp.switchb.org/presentation)

~~~
zachberger
FYI: You need to use the arrow keys to navigate this website

------
graycat
I've thought that I needed some such when I last taught trigonometry. Sure,
it's a graphical introduction to the applied math of Fourier series.

The OP started saying that the horizontal axis was time but later discussed
180 degrees without connecting degrees with time.

Why the harmonic frequencies are distinct positive whole number multiples of
the fundamental frequency? Because the sine waves at those frequencies form an
orthogonal coordinate system with all the advantages of such a system in 2 and
3 dimensions we know well. Similarly for linear algebra with positive whole
number dimensions. So, right, the periodic waves are in a vector space of
countably infinite dimensions. Usually in practice we can get good
approximations by considering only the first dozen or two harmonics.

The waves travel according to the wave equation. It would be good to connect
with that.

The lecture might have discussed the effect of tone controls and linear
systems and linear filtering more generally.

------
leafario2
The wrong frequencies on the frequency axis really aren't necessary. It
doesn't make it more complex if you put the real frequency values the and it
is less confusing to people who know that sound below 20hz roughly is never
audible.

Otherwise, great site! I think it is great that Fourier was basically
explained without mentioning his name.

~~~
joshwcomeau
The biggest problem was that the waveforms are animated in some parts, and
they actually move in-speed (so 1Hz does 1 cycle a second). If it was, say,
50Hz, the inaccuracy would shift so that it was moving at 1/50th speed, and
that seems harder to explain (even here, I'm not sure if my explanation makes
sense!)

And yeah, hah. My goal was to not mention his name anywhere, since "fourier
transforms" just sounds scary and jargony.

------
ChuckMcM
This reminded me of Jim Blinn's mathematics work
([https://www.youtube.com/watch?v=iO0t1IPk8KA](https://www.youtube.com/watch?v=iO0t1IPk8KA)).
Very well done. Next up, the FFT :-)

------
mgeorgoulo
Awesome. Stuff I found interesting: Triangle and Square waves have only "odd"
harmonics: 3x, 5x, 7x of the base frequency and so on... Sawtooth has even &
odd harmonics. Sound "brightness". Everyone speaks about it but it's something
that you learn to recognize by example. For instance it is my impression that
sines sound "brighter" than triangles (triangles reminding me of my Atari
2600...) The convergence slider was an excellent addition. Chords have
recognizable shapes. Never thought of that. Makes sense.

------
jacobolus
Neat!

The new tool Observable is a pretty friendly / straight-forward way to make
this type of thing, for folks who want to get started on making interactive
explanations.

Here’s one in the same general area as the link under discussion:
[https://beta.observablehq.com/@freedmand/sounds](https://beta.observablehq.com/@freedmand/sounds)

(Observable has the additional benefit that readers are treated as
peers/authors and can play with the code directly.)

~~~
joshwcomeau
Oh wow, awesome! I've never heard of this, but it seems really great.

------
baldfat
Best thing to do from this is to grab a free synthesizer and play around. This
is an "easy" on written by college students in Berlin. Has 3 oscillators and 3
filters and can build a ton of sounds from a wave sound.

[http://www.synthtopia.com/content/2016/03/19/free-open-
sourc...](http://www.synthtopia.com/content/2016/03/19/free-open-source-
software-synth-for-os-x-windows-synister/)

------
hprotagonist
If you want to go really deep down the rabbit hole, Oppenheim's MIT OCW
lecture/text are basically the signals bible. Oppemheim's text is clear and
lucid -- and he was Bose's student to boot!

[https://ocw.mit.edu/resources/res-6-007-signals-and-
systems-...](https://ocw.mit.edu/resources/res-6-007-signals-and-systems-
spring-2011/)

come for the wisdom, stay for the 80s polyester ties.

------
romdev
For years I've been using paper and pen to explain waveforms, noise
cancellation, and the psycho-acoustic model to a few of my musician friends.
Every time their eyes have glazed over, and I've thought "there's gotta be
some animated web page that explains this better." And here it is - exactly as
imagined! Thanks for creating it.

------
elihu
Nicely done.

That major chord at the end sounds a little wobbly. Not sure if it's out of
tune or tuned exactly to equal temperement and it's just more obviously out of
tune with respect to the just intervals because of the timbre.

It would be interesting to have a just major chord (i.e. the 4th, 5th, and 6th
harmonics of some note) and compare with the equal tempered triad.

~~~
zaxomi
When using sine waves in a single chord the tuning is much more obvious.

I looked at the code and for the major chord it uses:

[f * 1, f * 1.2599388379204892, f * 1.4984709480122322]

With f = 440Hz it will be [440.000, 554.373, 659.327].

Equal temperament (12-TET) would be:

[f * 1, f * 1,25992104989487, f * 1,49830707687668]

With f = 440Hz it will be [440.000, 554.365, 659.255].

Since it isn't pure it will wobbly a little bit.

In this case it would be better to use "just intonation":

[f * 1, f * 1.25, f * 1.5]

With f = 440Hz it will be [ 440, 550, 660 ].

~~~
joshwcomeau
(creator here)

Thanks for this! To be honest, my music theory isn't that deep; I had never
heard of equal temperament or just intonation. I think I just did the math
based on a note-to-frequency table I googled. Clearly I have some research to
do!

I did find the chord a little "off", but I thought that was just me.
Originally, the audible frequencies for the other bits were completely outside
the western music scale, and so the chord sounded _really_ off.

~~~
zaxomi
Great, you found my comment!

That explains why I didn't find what tuning you where using.

By the way, there is no contact information on the page (if there is, I didn't
see it when I was looking for it.)

~~~
joshwcomeau
Yeah, at the very bottom there's a link to my twitter, but you're right, it's
not the most approachable way to collect feedback. Sorry about that!

------
bitwize
I like the format of this. It has supplementary "slides" and animations (and
sound!), but I can read the material at my own pace. I frickin' hate the
recent trend of "documentation through talk". Want to know this weird trick in
Kubernetes? Here, watch this talk from the last KuberConf. What? No.

------
JabavuAdams
Good work! It takes a lot of effort to make this kind of content.

I would love it if in the diagrams of air molecules, they weren't all lined up
vertically. This gives a misleading impression. How difficult a change would
it be to draw the dots in spatially random positions, but such that the
_density_, not the the positions form vertical bands?

E.g. Like this: [https://qph.ec.quoracdn.net/main-
qimg-e041242ac2954be7e84765...](https://qph.ec.quoracdn.net/main-
qimg-e041242ac2954be7e84765baa8266a7a)

------
blueintegral
While this page is mostly about sound waves, here's a great talk using similar
tools to explain RF:
[http://www.youtube.com/watch?v=DUGr_Z04SKs&t=12m31s](http://www.youtube.com/watch?v=DUGr_Z04SKs&t=12m31s)

Here's the interactive slides to play with: [http://visual-
dsp.switchb.org/](http://visual-dsp.switchb.org/)

------
semi-extrinsic
This is brilliant! Person who made this: thank you!

Would it be possible to make this available for translation into other
languages, as a community project (all hosted in the same place)? This would
be awesome for high school physics in any language.

FYI, I think I spotted a tiny mistake:

"Try adjusting the convergence slider to see how the phase of a waveform
affects how loud the resulting wave is."

I think this paragraph should say "phase slider"?

~~~
joshwcomeau
Hey there! Creator here.

I actually did set this up with i18n in the back of my mind; all of the copy
lives in 1 file, so I imagine it wouldn't be _too_ much work!

If there are volunteers to copy it into other languages (the only other one I
know is French and I wouldn't trust myself to get the details right), I can
spend some time working on getting it to support it.

EDIT: Also, not a typo :) I wanted to make sure users try out both sliders in
that section, since you get a lot of interesting effects. When the convergence
is 100%, you get phase cancellation. When it's 50%, you get some really groovy
looking waveforms.

------
mendeza
This is amazing, I would love to something similar to this in Augmented
Reality, here is a snapchat AR experience where you visualize several
waveforms:

[https://www.reddit.com/r/SnapLenses/comments/7xl1n3/animated...](https://www.reddit.com/r/SnapLenses/comments/7xl1n3/animated_parametric_curves/)

------
soheil
I was absolutely mind blown by this. Then I found out it was made in React, I
was always on the fence about using it, now I’m in love ️

Happy Valentine’s Day

~~~
joshwcomeau
Glad to hear that! :D

I've been working with React almost exclusively for 2-3 years (I do
occasionally experiment with Vue, or work with Backbone). Once you get used to
thinking in React, it makes projects like this really easy; the data flow
never got complicated, even though I'm not using any other "state management"
library (don't believe the "React is just the V in MVC" saying!).

If you're interested in getting started with React, I wrote a "no fluff" blog
post: [https://hackernoon.com/simple-react-development-
in-2017-113b...](https://hackernoon.com/simple-react-development-
in-2017-113bd563691f)

My goal with the post was to cut out everything unnecessary, and focus on
getting the user to build something with React with as little time/effort as
possible. React now comes with an amazing build system that abstracts away all
the configuration, but a lot of folks starting out don't know that, and wind
up spending a week tinkering with Webpack and Babel and build config, and
installing and learning dependencies they don't need.

~~~
soheil
Thanks a lot will definitely check out your post on React.

------
meowface
Very good educational experience. Even if you already know the concepts, the
animations help with understanding it all intuitively.

------
brian-armstrong
This page reminds me of the interactive demos you'd find in a science museum.
Those demos were very influential in my understanding of how basic phenonena
worked, though I think they often raised more questions than they answered.
Nice job to the creator for making something that, I think, would really get a
kid's curiosity going.

------
__m
There is a nice book on waves called the Wavewatcher's Companion. It's not a
mathematical description though.

------
adamnemecek
You guys and gals should check out audiokit
[https://github.com/AudioKit/AudioKit](https://github.com/AudioKit/AudioKit)
your one stop shop for all your audio needs (as long as these needs happen on
a platform ending with “OS”)

------
datenwolf
>> WARNING: The slider lets you add up to 75 additional harmonics, but it's
computationally intensive to calculate and render all these waves! If you're
on a slower device, it may make the page slow / unresponsive if you climb up
too high.

 _ugh_ just use a (i)FFT, dammit.

~~~
tntn
How would that help? The IFFT would left you quickly synthesize the total
waveform From the frequency spectrum, but the whole point of the visualization
is to be able to show all the frequency components and interpolate between the
individual components and the resulting waveform. The IFFT doesn't help you
there.

No matter how you do it, rendering 75 independent waves will take more
computation than rendering 2.

~~~
datenwolf
The complexity of a (i)FFT scales with O(n·log(n)), whereas a naive, direct
fourier transform scales with O(n·m) where `n` is the number of samples and m
is the number of channels. Therefore for any `m > log(n)` the direct method
wastes a lot of computational power.

The base of the logarithm depends on the radix of the FFT implementation, but
in the end it comes out as a constant factor anyway, and for most FFTs out
there it's a base in the range of 2…5, so it's at most a factor of about
log(5)/log(2) =~= 2.32

Say you're synthezising a waveform of 1024 samples, then the break even
between a fast against a direct fourier transform comes it at around 10
channels. For small numbers of channels the direct method is better. Prime
example: Quadratur demodulators where you operate on just a single frequency
with the real and imaginary parts.

But when you want to do simple additive synthesis, just put your amplitudes
and phases at the right places in the spectrum and to a Inverse fourier
transform. It's almost always going to beat any other method. Also it's
numerically more stable (although the amplitudes in audio synthesis are never
going to be so spread out that precision is going to be a problem).

~~~
tntn
I understand the complexity and function of the FFT. However, the sluggishness
of this demo is not due to the actual synthesis of the final wave, it is due
to calculating and render each individual waves. I agree you could easily
synthesize the final wave with the IFFT, but the point of the demo is to
display _all_ the components. The IFFT wouldn't help with this.

------
yousir
I've been looking for an approachable read on waves and so I like this very
much. A nice touch is the retro visitor counter at the bottom of the page.
Made me nostalgic. When I got to it it said ~1600. I reloaded the page and it
was almost at 3000. The power of HN I guess.

~~~
joshwcomeau
Hah, thanks! I open-sourced the counter separately (although beware, it's a
React component): [https://github.com/joshwcomeau/react-retro-hit-
counter](https://github.com/joshwcomeau/react-retro-hit-counter)

Also, for any folks who immediately scroll down to see it: the hit-counter
only loads a few seconds after the page initializes. This was done
intentionally to avoid adding yet another thing to the busy period of initial
mount. It means visits of less than a few seconds aren't counted, but
-shrugs-.

------
jasonjayr
Another highly recommended presentation and an on-topic followup to waveforms,
namely, how waveforms are digitally sampled ...

[https://xiph.org/video/vid2.shtml](https://xiph.org/video/vid2.shtml)

------
nblavoie
My eyes just can't stop staring at the animated wave form. I can't read the
text on the right side. But the content seems to be very nice.

~~~
tsomctl
Not to mention the text fading in is extremely annoying.

~~~
joshwcomeau
(creator here)

Sorry it bugged you! I learned when showing this to people that not everyone
focuses their eyes on the same part of the screen, and so the focusing thing
might not align to where you like to read.

I needed some way to make it clear which "step" the user is on, since the
stuff the waveform does changes from step to step.

Open to suggestions for future audio things I do if you have ideas for how to
align them without faded text!

------
dakom
Wow - I _love_ this site! Such a great use of the web - both the interactivity
and nicely laid out text lessons.

On a pedagogic level I also love how it builds up too

Well done!

~~~
joshwcomeau
Thank you! The pedagogy was super important to me (I work at Khan Academy, so
I suppose that was a given, haha). I really tried to make it not just a
gimmick, but have the interactions/animations help clarify what's difficult
for words/static images to explain.

------
JepZ
I think that kinda stuff should be complimentary for physics lessons in
school. Interactive, quick to grasp, the only thing I want is more!

------
Animats
Very nice. Few people play with this using analog equipment any more. Now
JavaScript is fast enough to do synthesis in real time.

------
posterboy
too much text.

tl;dr: fiddle with knobs to modulate linear sound.

This is great in principle! Computer music fueled my understanding of signals;
Just as drawing is instrumental to understanding linear algebra. Even, the two
are isomorphic upto dimension, Einsteinian relativity, etc..

------
barcadad
In case anyone missed it, the most genius description of the Fourier Transform
was published recently by the 3Blue1Brown YouTube site
([https://www.youtube.com/watch?v=spUNpyF58BY](https://www.youtube.com/watch?v=spUNpyF58BY)).
It is absolutely brilliant.

------
greatNespresso
Fantastic experience, nothing more to add. Except, well, thanks for this
marvel !

------
the_cat_kittles
i thought the waveform generally represents air _pressure_ not displacement.
maybe they end up being the same, or analogous?

~~~
joshwcomeau
The two are related :) I chose displacement because it's a simpler thing to
explain visually, and didn't want to cover both.

In the bit with the air molecule grid, the areas where the molecules are
clustered together are high-pressure, while the areas with large spaces
between them are low. This is caused by the staggered nature of the
displacement vibrations.

(I'm sure there's a more sophisticated way to explain this, but that's as I
understand it)

------
alexgvozden
Does wave animation has to be so slow on mobile

------
eurticket
excellent

------
tobyhinloopen
Neat.

------
sbussard
pitch is a function of frequency AND loudness

~~~
deathanatos
Sorry, as a musician, I've never heard pitch defined this way. Pitch is
essentially another word for frequency (though perhaps used more commonly in
the context of a musical instrument or a human voice, and most musical
instruments emit harmonics, as described in the article, and are thus not a
singular frequency).

Merriam-Webster corroborates this:

> _the property of a sound and especially a musical tone that is determined by
> the frequency of the waves producing it : highness or lowness of sound_

Wiktionary as well:

> _The perceived frequency of a sound or note._

Oxford:

> _The quality of a sound governed by the rate of vibrations producing it; the
> degree of highness or lowness of a tone._

~~~
Maybestring
>The perceived frequency of a sound or note.

I think the claim that pitch is a partial function of loudness is about
perception. If pitch is defined as the 'percieved' frequency, then it includes
whatever synthesis of sensory data the brain uses.

The most obvious, is a comparison to concurrent or recently heard sounds. A
b-flat preceeded by a c really does sound different than one preceeded by a g.
(At least, it really does for me).

Edit: But my understanding of pitch has also, always been pitch = frequency.

~~~
melq
Amplitude (loudness) has nothing to do with frequency, and changes in
amplitude will not affect the frequency perceived. Pitch == frequency.

------
rootw0rm
this is much better than the manual for my analog synth

------
emilfihlman
Can you _stop_ with asking the reader to mute/unmute/play with the tool?

It is a) patronising and b) super annoying.

