131 comments

[ 2.6 ms ] story [ 216 ms ] thread
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

FYI: You need to use the arrow keys to navigate this website
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.
Not to mention the text fading in is extremely annoying.
(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!

Very good educational experience. Even if you already know the concepts, the animations help with understanding it all intuitively.
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/

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/ 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.

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.

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.
> It is possible, though improbable, to hit nothing but zero-crossing values if you sample at exactly twice the highest desired frequency.

Yup! You just filled in what I called a "detail"!!!

The nonzero transition band of real antialias filters is typically a way bigger concern than the strict equality of the Nyquist theorem.
Yeah, but... have you read the (fine) article?

Just kidding, graycat, I'm a fan! How's your project going? any news?

Sure, this time I went through the article! Again, I would have liked to have some such and more if I ever teach trigonometry again.

For the project: The work for the project is as usual fast, fun, and easy but gets delayed by random, external nonsense. But have to expect such random stuff. Between now and going live is all just routine.

The current random nonsense is my development computer got sick: Apparently there was a motherboard problem giving serious data corruption.

I was working up orders for parts for two new computers when the old computer finally seriously quit.

So, I rushed out and just -- horrors -- actually BOUGHT a computer, not just parts but an actual computer. I got an HP laptop with Windows 10 Home Edition.

Then I ordered the parts. They have come now and are ready to plug together.

I deliberately selected parts about one generation out of date.

Why?

(1) My startup software makes some use, actually light, of SQL Server; it insists on ECC (error correcting coding) main memory, and I like it, too.

Apparently ECC main memory needs all of the memory, motherboard, and processor to support ECC. Well, now the easy way to get that is to buy some old parts.

(2) I'm happy using a computer with a good BIOS but don't want to get involved in the newer Unified Extensible Firmware Interface (UEFI).

Why against UEFI? No visible upside for me. Likely big downsides of lots of new architecture I don't need, lots of new complexity I don't want to have to work with, maybe some new bugs, and no doubt rather poor documentation, and less good technical information on the Internet.

Computer Industry: If you don't work hard to document your work, then I'll work hard to avoid your work.

(3) Older parts tend to have fewer bugs and better technical information.

For the case I got a

Thermaltake V3 VL80001W2Z (Black)

It's big, with a 120 mm fan and lots of air holes and places for more fans.

For a motherboard, I considered the

Asus m5a97 R2.0

but gave up as apparently they are now out of production and super hard to find in stock.

So, I settled on the

Asus m5a78l-m-usb3

It's a cute little thing, micro-ATX, a BIOS but no Unified Extensible Firmware Interface (UEFI). It supports ECC (error correcting coding) main memory and has an AM3+ socket for the AMD FX series of processors. I got two of the motherboards from AVADirect in Cleveland.

For main memory the motherboard has four DDR3 slots and can take a total of 32 GB. I was able to find and got 4 DIMMs of DDR3, 4 GB per DIMM, at 1333 MHz with ECC.

The processor is an AMD FX-8350, 64 bit addressing, with 8 cores with a standard clock of 4.0 GHz. Yes it can consume 125 W of power; thus, I will have maybe more than one fan in the case.

For the needs of my startup, that processor, motherboard, and main memory will do a LOT of computing. E.g., my old computer that died had a single core processor at 1.8 GHz, and it had my Web site pages showing on the screen before I could get my finger off the Enter key. My actual software timings indicate that this new FX-8350 computer will have plenty of capacity to do very nicely as a first server.

For disks, I got two Western Digital drives, SATA at 3.0 Gbps, and 500 GB each.

And I will bring over the SATA drives from my old computer.

And I got lots of fans, cables, etc.

Long ago I got tired of wrestling with file system drive letters. So, I have some directories DATA01, DATA02, DATA03, DATA05, PROG01, PROG02, PROG03, and they have all MY data, and my software works fine no matter what drive letters those directories are on or larger trees they are in. I will be using this little approach again.

I have a thing, goal, I want:

In my past work with Windows for this project, too often I had to reinstall Windows and all my other software, and those reinstalls, even with all the practice I got, were a lot of work. So my goal is to solve this problem of reinstalling.

So, I want:

(1) More than one instance of a bootable oper...

Wow, thanks for the update! Good luck!
I've found Steven Smith's DSP guide to be quite good. http://www.dspguide.com/

That said it's all about the underlying math. If you want something with lots of source code to start playing around with you won't find it here. But since understanding the math is critical to understanding what the source is doing I think both sides are necessary.

Also this is yet another area of CS/engineering where C rules the roost. If you're not comfortable with C you'll have a lot of trouble using actual DSP hardware.

Oh wow, this is awesome! Thanks for sharing.
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.

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 ].

(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.

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.)

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!
For what it's worth, it's easy to generate the 12-tone equal tempered scale by starting with 440 and repeatedly multiplying by the 12th root of 2.

For a just scale, it's a bit more complicated because there are sometimes multiple options. For instance, a minor seventh might be 9/5, 16/9, 12/7, or 7/4 depending on context.

In general, a pretty good "default" 12-note chromatic scale if you want to use JI in a way that works with most normal western music is 1/1, 16/15, 9/8, 6/5, 5/4, 4/3, 45/32, 3/2, 8/5, 5/3, 9/5, and 15/8. (Just multiply the fraction by the frequency of the root note to get the frequency.) 2/1 would be an octave above the root.

Just major chords are three tones that make a 4:5:6 ratio, such as 4/3, 5/3, and 2/1. You can think of a major chord as the 4th, 5th, and 6th harmonic of a note two octaves below the root. (1:3:5 or other octave-equivalents are also major chords.)

If you add on the 7th harmonic to make a 4:5:6:7 chord (and for this you'll need at least one note not on the scale I provided above), you get a barbershop dominant seventh chord.

Just minor chords make a ratio of 10:12:15, which you could also think of as 4/4 : 4/5 : 4/6.

The advantages of just tuning are that it sounds very stable and allows precise distinctions between very similar notes. Equal temperament is an approximation of just intervals and has been dominant for the last few hundred years largely because it allows instruments with a moderate number of fixed pitch notes to play in any arbitrary key and with each other.

Very nice. Few people play with this using analog equipment any more. Now JavaScript is fast enough to do synthesis in real time.
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.
(comment deleted)
Does wave animation has to be so slow on mobile
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.
Hah, thanks! I open-sourced the counter separately (although beware, it's a React component): 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-.

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/

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.

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.

Thanks for the feedback; I saw this further down the comments as well. Will give it a shot!

EDIT: Yep, sounds way better. Will definitely have to look more into this! Thanks again.

A little wobble can be nice though. When I write synthesizer patches, I almost always detune the oscillators a few cents.
On a synth in a musical piece, absolutely.

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

Bret Victor has been a major protagonist of interactive visualization: http://worrydream.com/

"The Ladder of Abstraction" is close to this explicit document style, but if you're interested in the history and philosophy of interactive visualization, you can lose days on that site.

Here's a whole page of them: http://explorabl.es/
Wow, thanks for sharing. That site and all the sites it links to restore my faith in humanity.
I love these kind of things too and link to them frequently from my audio-themed newsletter (http://webaudioweekly.com). I'm particularly fond of Tero Parviainen's interactive explorations of generative music, for example: https://teropa.info/blog/2017/01/23/terry-rileys-in-c.html
Hi Chris! Creator here, I'm a subscriber to Web Audio Weekly. Appreciate the work you do, always excited when I receive it :)
Thanks Josh! This is going in the next issue, of course :)
Please checkout 3Blue1Brown.

3Blue1Brown, by Grant Sanderson, is some combination of math and entertainment, depending on your disposition. The goal is for explanations to be driven by animations and for difficult problems to be made simple with changes in perspective.

pitch is a function of frequency AND loudness
I think it's okay in a text like this to say frequency = pitch. Frequency is the primary factor in how we perceive pitch.
Since "frequency" has a straightforward definition and a straightforward unit of measure, "pitch" is a fancier word reserved for alternate units (e.g. MIDI note numbers) or slightly modified concepts (e.g. pitch classes, not frequency classes).
Consulting the online experts, I see pitch as being a function solely of frequency. Loudness is another attribute of what one hears. There might be some psychoacoustic magic going on that could cause one to interpret a single frequency to have a variable pitch based upon the amplitude of the sound but that's a artifact of the listener, not the sound. Look at it this way. If you stike middle A on a piano with different intensities and monitor the sound using a frequency analyzer, the analzyer will report a sound at approximately 440 Hz regardless of how soft or hard the key is struck.
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.

Usually for music, pitch is another term for the frequency of the fundamental tone. So, a sine wave at 440 Hz will seem to the ear to have the same pitch as the open A string on a violin or the first A above middle C on a piano, and the same for other frequencies, pitches, and musical instruments. E.g., we can tune a whole orchestra with just a single tuning fork for A4 at 440 Hz, and when the whole orchestra plays A it sounds good, that is, without beats from the fundamental frequencies of some of the instruments being a few Hz away from a whole number multiple or fraction of 440 Hz.

However, IIRC, this simple relationship between frequency of the fundamental and pitch to the ear does not hold well for all possible periodic sounds.

>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.

Amplitude (loudness) has nothing to do with frequency, and changes in amplitude will not affect the frequency perceived. Pitch == frequency.
(comment deleted)
Pitch is the perceptual correlate of fundamental frequency. When you make acoustic measurements, you measure frequency, not pitch.
This is correct. Although I would say amplitude or intensity, rather than loudness: for loudness itself is a function of intensity and frequency.

At least for pure tones that aren't too high, most listeners perceive a pitch drop at higher intensities.

Both in the Journal of the Acoustical Society of America:

S.S. Stevens, "The relation of pitch to intensity", Vol. 6, 1935, pp. 150-154. http://asa.scitation.org/doi/10.1121/1.1915715

W.B. Snow, "Changes of pitch with loudness at low frequencies", Vol. 8, 1936, pp. 14-19. http://asa.scitation.org/doi/10.1121/1.1915846

When you start seeing cycles or cps instead of Hz in the references you know you have reached the good stuff! x)
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.
Thanks for the kind words :D
I too very much appreciate this, as soon as I saw it I shared it with a couple students I mentor. Interestingly we're talking about synthesizers as an instrument and this is a great visual tool! Keep it up! I'd be happy to send a small donation for continued write-ups.
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.

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/

Well, we want them to get addicted to self-directed learning on technical topics ;-)
It's about time we get high on this.
Yeah, I was thinking as I was reading it how dry this would have been without the visual and aural accompaniment (in fact, I think I probably did try to read something similar when I was in college). I do wish there was a way to pause the animations, though, they got distracting as I was trying to read.
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

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

Oh wow, awesome! I've never heard of this, but it seems really great.
Fantastic experience, nothing more to add. Except, well, thanks for this marvel !
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.

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.

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.

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

It is a) patronising and b) super annoying.