13 ms·

Let's Learn About Waveforms

989 points by tomduncalf 9y ago

jcims 9y ago
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 9y ago
  FYI: You need to use the arrow keys to navigate this website
nblavoie 9y ago
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 9y ago
  Not to mention the text fading in is extremely annoying.
  - joshwcomeau 9y ago
    (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!
meowface 9y ago
Very good educational experience. Even if you already know the concepts, the animations help with understanding it all intuitively.
rrherr 9y ago
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 9y ago
  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 9y ago
    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.
jasonjayr 9y ago
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
baldfat 9y ago
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-source-software-synth-for-os-x-windows-synister/ http://www.synthtopia.com/content/2016/03/19/free-open-sourc...
elihu 9y ago
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 9y ago
  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 9y ago
    (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 9y ago
      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 9y ago
        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!
Animats 9y ago
Very nice. Few people play with this using analog equipment any more. Now JavaScript is fast enough to do synthesis in real time.
bitwize 9y ago
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.
hprotagonist 9y ago
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-spring-2011/ https://ocw.mit.edu/resources/res-6-007-signals-and-systems-... come for the wisdom, stay for the 80s polyester ties.
deleted 9y ago
[deleted]
tobyhinloopen 9y ago
Neat.
brian-armstrong 9y ago
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 9y ago
  Cool!
alexgvozden 9y ago
Does wave animation has to be so slow on mobile
yousir 9y ago
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 9y ago
  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-.
vaillancourtmax 9y ago
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/
- atarian 9y ago
  Here's a ML one (linked to by the above site): http://www.r2d3.us/visual-intro-to-machine-learning-part-1/ http://www.r2d3.us/visual-intro-to-machine-learning-part-1/ Distill has some great ML articles that are kind of similar: https://distill.pub/ https://distill.pub/
- joshwcomeau 9y ago
  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.
  - matt_j 9y ago
    Mike Bostock is the creator of d3.js and does, or did, a bunch of visualizations for NY Times. Check his website, it's amazing. https://bost.ocks.org/mike/ https://bost.ocks.org/mike/
  - zaxomi 9y ago
    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.
    - joshwcomeau 9y ago
      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.
sbussard 9y ago
pitch is a function of frequency AND loudness
- jay-anderson 9y ago
  I think it's okay in a text like this to say frequency = pitch. Frequency is the primary factor in how we perceive pitch.
  - HelloNurse 9y ago
    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).
- sizzzzlerz 9y ago
  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.
- deathanatos 9y ago
  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.
ponderatul 9y ago
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 9y ago
  Thanks for the kind words :D
  - 086421357909764 9y ago
    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.
  - wizardforhire 9y ago
    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 9y ago
      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/
- clarkmoody 9y ago
  Well, we want them to get addicted to self-directed learning on technical topics ;-)
  - 9y ago
jacobolus 9y ago
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 9y ago
  Oh wow, awesome! I've never heard of this, but it seems really great.
greatNespresso 9y ago
Fantastic experience, nothing more to add. Except, well, thanks for this marvel !
graycat 9y ago
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.
ChuckMcM 9y ago
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 :-)
leafario2 9y ago
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 9y ago
  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.
adamnemecek 9y ago
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”)
emilfihlman 9y ago
Can you _stop_ with asking the reader to mute/unmute/play with the tool? It is a) patronising and b) super annoying.
JepZ 9y ago
I think that kinda stuff should be complimentary for physics lessons in school. Interactive, quick to grasp, the only thing I want is more!
brian-armstrong 9y ago
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.
blueintegral 9y ago
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/
mgeorgoulo 9y ago
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.
the_cat_kittles 9y ago
i thought the waveform generally represents air pressure not displacement. maybe they end up being the same, or analogous?
- joshwcomeau 9y ago
  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)
romdev 9y ago
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.
posterboy 9y ago
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..
deleted 9y ago
[deleted]
barcadad 9y ago
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.
soheil 9y ago
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 9y ago
  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-113bd563691f https://hackernoon.com/simple-react-development-in-2017-113b... 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 9y ago
    Thanks a lot will definitely check out your post on React.
rootw0rm 9y ago
this is much better than the manual for my analog synth
JabavuAdams 9y ago
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-e041242ac2954be7e84765baa8266a7a https://qph.ec.quoracdn.net/main-qimg-e041242ac2954be7e84765...
mendeza 9y ago
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_parametric_curves/ https://www.reddit.com/r/SnapLenses/comments/7xl1n3/animated...
Derbasti 9y ago
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 9y ago
  > 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 9y ago
    Yes! Thank you for the correction.
- joshwcomeau 9y ago
  Interesting! I hadn't thought of it that way. Those examples are wild. And yeah, human perception of sound was something I had wanted to explore more, but I didn't want it to be even longer... might be interesting as a follow-up (although I don't know exactly how to visualize it... Thanks for the feedback :)
lighttower 9y ago
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!
- ryansouza 9y ago
  Here you go: http://tobyrush.com/theorypages/index.html http://tobyrush.com/theorypages/index.html
- 8bitsrule 9y ago
  In most Western music there are 12 tones in an octave. So if you play a note with a fundamental frequency of 440 Hz, it will repeat itself (one octave higher) 12 steps later at 880 Hz. Notes one or more octaves apart all have the same name! Diving deeper: a 'C' on a piano is actually made up of -multiple- frequencies. The 'same' 'C' on any other instrument is made up of a -different- set of frequencies. See: overtones.
- kaoD 9y ago
  About that specific question, the term you're looking for is "pitch class".
- TheOtherHobbes 9y ago
  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.
8bitsrule 9y ago
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.
- jerrre 9y ago
  > (apart from attack/decay and modulations) This is a much bigger factor if you loop steady state parts of classical instruments it becomes very difficult to differentiate them.
  - 8bitsrule 9y ago
    Well, sort of. Depends on how experienced the listener is (and/or is willing to become - many/most listeners CRAVE instant familiarity). But that importance depends on how different the instruments are already. The saxophone and the clarinet are quite different 'steady state'. Bell and piano are quite different. So I proposed a 'gateway concept'. Else it takes a long time to grok it all. Eventually the differences all add up to very complex waveforms (I didn't even mention register, which is important for differentiating the classical string families). Personally, I'm glad of this, since the timbre space explored by conventional instruments is a VERY VERY small part of the sonic universe.
- joshwcomeau 9y ago
  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 9y ago
__m 9y ago
There is a nice book on waves called the Wavewatcher's Companion. It's not a mathematical description though.
dakom 9y ago
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 9y ago
  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.
semi-extrinsic 9y ago
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 9y ago
  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.
datenwolf 9y ago
>> 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 9y ago
  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 9y ago
    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 9y ago
      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.
eurticket 9y ago
excellent

989 points by tomduncalf 9y ago

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 9y ago
FYI: You need to use the arrow keys to navigate this website

nblavoie 9y ago

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 9y ago
Not to mention the text fading in is extremely annoying.
- joshwcomeau 9y ago
  (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!

meowface 9y ago

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

rrherr 9y ago

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 9y ago
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 9y ago
  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.

jasonjayr 9y ago

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

baldfat 9y ago

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-source-software-synth-for-os-x-windows-synister/ http://www.synthtopia.com/content/2016/03/19/free-open-sourc...

elihu 9y ago

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 9y ago
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 9y ago
  (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 9y ago
    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 9y ago
      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!

Animats 9y ago

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

bitwize 9y ago

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.

hprotagonist 9y ago

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-spring-2011/ https://ocw.mit.edu/resources/res-6-007-signals-and-systems-... come for the wisdom, stay for the 80s polyester ties.

deleted 9y ago

[deleted]

tobyhinloopen 9y ago

Neat.

brian-armstrong 9y ago

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 9y ago
Cool!

alexgvozden 9y ago

Does wave animation has to be so slow on mobile

yousir 9y ago

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 9y ago
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-.

vaillancourtmax 9y ago

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/

atarian 9y ago
Here's a ML one (linked to by the above site): http://www.r2d3.us/visual-intro-to-machine-learning-part-1/ http://www.r2d3.us/visual-intro-to-machine-learning-part-1/ Distill has some great ML articles that are kind of similar: https://distill.pub/ https://distill.pub/
joshwcomeau 9y ago
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.
- matt_j 9y ago
  Mike Bostock is the creator of d3.js and does, or did, a bunch of visualizations for NY Times. Check his website, it's amazing. https://bost.ocks.org/mike/ https://bost.ocks.org/mike/
- zaxomi 9y ago
  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.
  - joshwcomeau 9y ago
    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.

sbussard 9y ago

pitch is a function of frequency AND loudness

jay-anderson 9y ago
I think it's okay in a text like this to say frequency = pitch. Frequency is the primary factor in how we perceive pitch.
- HelloNurse 9y ago
  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).
sizzzzlerz 9y ago
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.
deathanatos 9y ago
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.

ponderatul 9y ago

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 9y ago
Thanks for the kind words :D
- 086421357909764 9y ago
  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.
- wizardforhire 9y ago
  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 9y ago
    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/
clarkmoody 9y ago
Well, we want them to get addicted to self-directed learning on technical topics ;-)
- 9y ago

jacobolus 9y ago

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 9y ago
Oh wow, awesome! I've never heard of this, but it seems really great.

greatNespresso 9y ago

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

graycat 9y ago

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.

ChuckMcM 9y ago

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

leafario2 9y ago

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 9y ago
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.

adamnemecek 9y ago

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

emilfihlman 9y ago

Can you _stop_ with asking the reader to mute/unmute/play with the tool? It is a) patronising and b) super annoying.

JepZ 9y ago

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

brian-armstrong 9y ago

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.

blueintegral 9y ago

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/

mgeorgoulo 9y ago

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.

the_cat_kittles 9y ago

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

joshwcomeau 9y ago
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)

romdev 9y ago

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.

posterboy 9y ago

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

deleted 9y ago

[deleted]

barcadad 9y ago

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.

soheil 9y ago

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 9y ago
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-113bd563691f https://hackernoon.com/simple-react-development-in-2017-113b... 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 9y ago
  Thanks a lot will definitely check out your post on React.

rootw0rm 9y ago

this is much better than the manual for my analog synth

JabavuAdams 9y ago

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-e041242ac2954be7e84765baa8266a7a https://qph.ec.quoracdn.net/main-qimg-e041242ac2954be7e84765...

mendeza 9y ago

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_parametric_curves/ https://www.reddit.com/r/SnapLenses/comments/7xl1n3/animated...

Derbasti 9y ago

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 9y ago
> 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 9y ago
  Yes! Thank you for the correction.
joshwcomeau 9y ago
Interesting! I hadn't thought of it that way. Those examples are wild. And yeah, human perception of sound was something I had wanted to explore more, but I didn't want it to be even longer... might be interesting as a follow-up (although I don't know exactly how to visualize it... Thanks for the feedback :)

lighttower 9y ago

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!

ryansouza 9y ago
Here you go: http://tobyrush.com/theorypages/index.html http://tobyrush.com/theorypages/index.html
8bitsrule 9y ago
In most Western music there are 12 tones in an octave. So if you play a note with a fundamental frequency of 440 Hz, it will repeat itself (one octave higher) 12 steps later at 880 Hz. Notes one or more octaves apart all have the same name! Diving deeper: a 'C' on a piano is actually made up of -multiple- frequencies. The 'same' 'C' on any other instrument is made up of a -different- set of frequencies. See: overtones.
kaoD 9y ago
About that specific question, the term you're looking for is "pitch class".
TheOtherHobbes 9y ago
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.

8bitsrule 9y ago

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.

jerrre 9y ago
> (apart from attack/decay and modulations) This is a much bigger factor if you loop steady state parts of classical instruments it becomes very difficult to differentiate them.
- 8bitsrule 9y ago
  Well, sort of. Depends on how experienced the listener is (and/or is willing to become - many/most listeners CRAVE instant familiarity). But that importance depends on how different the instruments are already. The saxophone and the clarinet are quite different 'steady state'. Bell and piano are quite different. So I proposed a 'gateway concept'. Else it takes a long time to grok it all. Eventually the differences all add up to very complex waveforms (I didn't even mention register, which is important for differentiating the classical string families). Personally, I'm glad of this, since the timbre space explored by conventional instruments is a VERY VERY small part of the sonic universe.
joshwcomeau 9y ago
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 9y ago

__m 9y ago

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

dakom 9y ago

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 9y ago
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.

semi-extrinsic 9y ago

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 9y ago
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.

datenwolf 9y ago

>> 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 9y ago
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 9y ago
  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 9y ago
    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.

eurticket 9y ago

excellent