This man needs a genius grant, and this is about the 6th time I've thought this.
Any one of these pages would be a feat, an achievement to be proud of, but as a collection, it forms one of the greatest educational resources of its type that I have known.
These things can give you more intuition about a subject in 45 minutes than a textbook might be able to in 3 months, because it's interesting and not dry.
I wish I had more time to rant about this right now, but I haven't, so: Kudos. Another amazing job.
I saw your comment and was like: "wait a minute... surely its not the same guy as the mechanical watch thing, is it?!?!?!"
Absolutely blown away. As someone with a "design for learning" degree which I've found to be rather useless, I'd gladly have traded by dozens of thousands of dollars for a chance to learn with this guy. The technical sophistication combined with the incredibly didactic and clear flow of his work is truly insane.
Not necessarily. I'm a major fan of the "value for value" approach (i.e., you pay how much you think they're worth). It's been proven to work in some places already (e.g., Bandcamp, The Chosen), and we haven't really jumped onto its potential yet.
Basic income could let people work on stuff like this without the fear of starvation.
The tech is there, the resources are there. The will is there, if you ask the right questions. But powerful interests like things the way they are, and are willing to kill millions to keep things that way.
I don't. The quality can only get worse as it changes from hobby to a job. Give him money, yes; but don't demand increase in publishing or any commitment.
Pretty much, I'm scrolling for few minutes and every demo is more impressive than the previous one.
And the part about sound bouncing in the room is basically "acoustic room design 101" and beautifully illustrates how shape and dampening of the room can massively change how it sounds
They way he is able to explain complex subjects by starting from first principles, gently adding more and more layers, with beautiful, custom-made figures and animations is truly, literally, awesome.
I strongly recommend supporting the author via his Patreon if you enjoy his blog posts.
These are amazing - from the design to the interactive demos to the writing. I think "digital monograph" is almost a more apt description than "blog post". I've written tons of blog posts and they have almost nothing in common with what he's doing. 8,000 well written words plus formatting and links plus 50 or so embedded demos is really an astounding amount of work. What I appreciate most is the use of the medium itself. Imagine if the standard format for academic papers was updated from the black and white two-column format used for a half century to something like this?
The article on mechanical watches had so much depth and such good explanations I thought he was a mechanical watch engineer or enthusiast who happened to also have web design, 3d animation, and writing skills
He does :) hope he doesn't mind me sharing from his Patreon:
> I myself don't even own any traditional watches, so the topic was very new to me. Thankfully, it was easy to understand the gist of how mechanical watches work just from watching some YouTube videos and I decided to give the topic a go.
If you subscribe -- you should subscribe!! -- you can read his "making of" posts which are also fascinating. I don't think he's a domain expert in anything he's written about, he just does a ton of research and only produces a few articles per year.
He has an commentary article on Patreon where he says he doesn't even own any traditional watches, and had to buy a movement to take apart and understand
This is how school must be. I'd rather pay people like him to create interactive content than pay the school to teach my kids useless material in dry, rigid ways.
+1 for the recommendation for "The Scientist and Engineer's Guide to
Digital Signal Processing" by Steven W. Smith. I spoke to Steven many
years ago about his putting all of the book PDFs online for free and
since then have recommended at least 5 university libraries to buy it
because the students could get free copies of a great book that can be
referenced in the library.
FWIW the The Scientist and Engineer's Guide doesn't actually cover a
lot on sound. It starts in a particular DSP way with frequency domain
definitions and convolution - and I actually think Steven's background
is in medial imaging, though I could be mistaken.
Wow. Such a profound insight could not get published for 15 years because others couldn’t grasp it. Including Lagrange!
It’s an uncomfortable reminder of how essential reputation and credibility are in the machinery of science.
”The paper contained the controversial claim that any continuous periodic signal could be represented as the sum of properly chosen sinusoidal waves. Among the reviewers were two of history's most famous mathematicians, Joseph Louis Lagrange (1736-1813), and Pierre Simon de Laplace (1749-1827).
While Laplace and the other reviewers voted to publish the paper, Lagrange adamantly protested. For nearly 50 years, Lagrange had insisted that such an approach could not be used to represent signals with corners, i.e., discontinuous slopes, such as in square waves. The Institut de France bowed to the prestige of Lagrange, and rejected Fourier's work. It was only after Lagrange died that the paper was finally published, some 15 years later.“
> Lagrange had insisted that such an approach could not be used to represent signals with corners, i.e., discontinuous slopes, such as in square waves.
Isn't that true though? You can only approximate it, right?
In the same sense that a circle does not exist, because you can only approximate it with an arbitrary number of points/lines. But an infinite number of points the same distance from the origin is a good definition of a circle. In a similar way, an infinite set of sine waves approximating a square wave is a square wave, mathematically speaking.
Sort of. The error at a square wave's "cliff" does shrink in width as you add higher and higher frequencies to the approximation, but the height of the error does not diminish, so you have to be explicit about what you mean by "converge". If you considered MAX(ABS(approximation(x) - square(x))) as your error metric it would not go to zero even in the limit; for most intents and purposes we don't care about that, though, and in any case the limiting behavior is much nicer for "normal" functions that don't have discontinuities like a square wave.
In practice, yes you can only approximate it, because in theory it requires an infinite series of sinusoidal waves. But since maths is all about the theory, Laplace's objections were silly.
(though I admit I don't know what the state of acceptance of infinite series was at that time)
Also, it's fine to cut off the infinite series of sinusoidal waves because all physical systems cut off around a given frequency, for example human hearing around ~20kHz.
Also, in practice, there's no such thing as a truly sharp corner, which makes sense intuitively based on the math, I think. But real systems have inertia, friction, stray resistance/capacitance/inductance, etc. so you can't have a truly perfect square wave in a physical or electrical system in the real world.
Not quite, that's not the problem. We're in the realm of maths here and therefore of pure abstraction, so that's not the point. Adding terms to the Fourier series of a square wave you have an overshoot that does not converge to zero as the number of terms goes to infinity. This is called the Gibbs phenomenon https://en.wikipedia.org/wiki/Gibbs_phenomenon
Corners in signals are like limits in calculus or irrational numbers in arithmetic. Once you accept them as an abstraction that you can't touch them directly all the anxiety dissipates.
I have this conviction that I ought to be able to code up crude audio DSP processors before I understand the totality of the theory.
For example, every DFT/FFT explanation seems to start with complex numbers. I wish there was a resource that was programming focused, starting with "Step 1: Process this artificially created periodic signal by multiplying it by sine waves of frequencies from from 1 to N. There are our bins! Step 2: OK, for real world signals we need phase, so now let's talk about complex numbers."
I've been studying math for a while trying to build up the prerequisites for writing audio DSP code. I have this sneaking suspicion that at the end what I want to achieve won't be as hard as DSP resources imply. At least there will be parts that I could have done with hardly any theory at all. But because of the way these resources are written, I have to consume massive amounts of theory first.
(For background, I've worked as a mastering engineer and have done a fair amount of audio production, so I know intimately what the tools ought to do.)
I posted this as a submission a while ago but you might find it helpful. While learning about signal processing my self I built a collection of educational tools for visualizing some concepts. [1]
Especially the fourier cube [2], the complex exponential [3], the digital filter designer [4] and the signal generator [5] might be helpful.
Additionally the matrix multiplier [6] has an option for complex numbers that highlights the perspective that complex numbers can be seen as just a subset of 2x2 matrices.
Your intuition is right, in that most of the heavy math is simply unnecessary or irrelevant at the practical level. Complex number notation doesn't fall into that category, though. The notion of frequency is intimately tied to the notion of vector rotation, and just as you can't represent Cartesian translation without negative numbers, you can't represent Cartesian rotation without complex ones.
The Smith book is definitely for you; also check out Rick Lyons's books. Bo Pirkle and Julius O. Smith are good for audio-specific theory and applications.
Saying that you can't represent cartesian rotation without complex numbers seems a bit much? You do need two numbers. But you can teach a trigonometry class without complex numbers, using either cartesian coordinates or polar notation. And matrices do work.
> "Step 1: Process this artificially created periodic signal by multiplying it by sine waves of frequencies from from 1 to N. There are our bins! Step 2: OK, for real world signals we need phase, so now let's talk about complex numbers."
Maybe the latter part could be prepped by resynthesising the time-domain signal by summing the sines, and seeing that it doesn't match the original. And it can't, not least because all of the sines start at 0. But if you have cosines as well, it can. Then refer to the geometrical relationship between sine/cosine and phase.
A preliminary to the earlier part might be to multiply a single long sinusoid by another one, and see what happens when their frequencies do or don't match. (But there is a whole well here about what it means for frequencies to "match", which in the discrete world has to do with how long the relevant part of the signal is.)
I once found one article that started with the concept of "probing" with a test signal, and then you need to probe with both sine and cosine to reconstruct the phase. Complex numbers seem to be a neat mathematical notation for this sin/cos pair.
pdfs are the chapters are available freely on that website, but if anyone wants to spare themselves the effort of combining them all into one for easier perusal, feel free to email me (in bio) and I can send the combined pdf. I'm currently around page 200, and it's been great as an introductory resource as someone with no other background in DSP.
I'm actually reading through it right now after trying out a few other DSP resources. It is by far the clearest and most approachable, without sacrificing much depth at all. It's a great book.
It's the best. I learned DSP from that ~20 years ago and still use those mental models whenever I need to think through a problem. A good book like that is a friend for life.
I was 20 minutes into this before I realized the interactive bits were automatically turning themselves off and on based on which one was visible in the viewport. That seems obvious, but the fact that it worked so intuitively and without bugs on my system says a great deal. This is what master UX design looks like.
As a side note, all of the code is very pleasant to read. It's interesting that it's seemingly (almost) all hand-written, given that there are commented-out rules in the CSS, for example. I'm not sure what's going on with the HTML though, probably some custom generator.
Interesting side note - using the "basic" frequency/amplitude slider section, you can tell if you have any hearing loss in a certain ear at a certain frequency, as well as high frequencies in general.
As an ex-musician, I have some hearing loss caused by playing and being around extremely loud music. Between 6KHz and 7KHz, I felt the sound shift towards my right hear, indicating some hearing loss at that frequency in my left ear. Between 10KHz and 11.5KHz, I felt a strong shift toward my left ear, indicating hearing loss at those frequencies in my right ear. Above about 12.3KHz, I lost the sound entirely.
One very gentle bit of feedback (haha) to the author would be to provide anchors to each section so they could be more easily linked.
> Interesting side note - using the "basic" frequency/amplitude slider section, you can tell if you have any hearing loss in a certain ear at a certain frequency, as well as high frequencies in general.
If you're on headphones maybe but might "only" be shit speakers
The three keys piano at the beginning is so responsive and nice that I was stuck playing with it for 5 minutes, that's how you hook someone to read an article
I love it when I'm halfway through something and take a second to pause and wonder why someone put so much effort into it, and them I appreciate that they did. This is amazing.
One thing that surprised me the first time I learned it is how 'dense' air is under normal circumstances. The 'mean free path' is the mean distance that a particle travels before changing velocity (typ due to collision). The mean free path of atmospheric air at standard pressure is ~65 nanometers, with ~2x10^19 (20 billion billion) molecules per cubic centimeter experiencing about 10^33 collisions per second. This is roughly the volume of an adult's ear canal.
Whilst I imagine he'd produce content regardless of income, he does have a slightly successful Patreon. To encourage this effort, consider supporting him in some form, if you don't.
I was able to reach 10^-7 mbar with a good vacuum system and I though I would have few thousand molecules, turns out there is a billion (10^9) molecules per cubic centimeter at that vacuum level.
And yet somehow, as far as we know, the energy of every molecular collision is faithfully preserved during a supernova, when effectively the entire volume of a star collapses into its core in less then a second.
That's not accurate. Only the inner core collapses (hence the "core-collapse supernova"; there are also other types), the rest rebounds, is heated up by core-produced neutrinos, and gets ejected. The Wikipedia article is a good start, also there are plenty of good papers on arxiv (e.g. on still-not-too-successful numerical modeling of the aforementioned "heating", without which the thing simply doesn't go bang).
I love the web audio API. I've been making a game where the theme is "I don't do art" so my assets are CSS, emojis, and manually made sounds using frequency and sinewaves and such.
The one lesson I learned the hard way is that if you run a full-volume sine wave long enough you can permanently destroy your laptop speakers.
Reminds me of Marcan trying to make Asahi not do that on MacBooks, and so far failing (https://github.com/AsahiLinux/linux/issues/53). I didn't know that Windows laptops also had speakers that would burn out with high-volume playback.
I love how every Ciechanowski post starts explaining from the very basics, but makes things so beautifully explained that my 10s attention span magically extends up to the way where I can learn a lot.
Not really identical, but I'd recommend the course Nand to Tetris (I believe on YouTube/also some online platforms) and this introduction to assembly - https://github.com/hackclub/some-assembly-required
I think my favourite part of this is being able to draw your own waveform and then play it. Super cool. You can learn about something so much faster when it's right there and instantly tweakable.
I drew a sine-wave, at double frequency (e.g. ◠◡◠◡), but it didn't really affect the frequency that I heard - it only changed the timbre. I wonder why...
I haven't taken beyond high school physics, so this question is probably obvious, but I haven't been able to find the answer (probably don't know the right terms to search).
When I increased the slider that allows you to change the flow of time for the gas in the cube, it really looked like visualizations I've seen of increasing the temperature of a gas. Is there a deeper relationship here? Could an observer tell the difference between a cube $A$ of gas in which the flow rate of time were doubled and a cube $B$ of gas with normal time passage, but a correspondingly increased temperature? If so, what would give it away?
The thing is, temperature is just motion at very small scales. On a solid, particles are attached to one another via the atomic forces, and a "temperature increase" means that the particles are jiggling more. With high enough jiggling, the particles start to break apart and the substance undergoes a phase transition. Now, when it's a gas, the particles are jiggling so much they aren't attached to one another, they are flying around at very high speeds as shown in the visualization. So, your intuition is correct: increasing the speed of the particles then is in fact the same as "increasing the temperature" of the gas.
IIRC temperature is proportional to velocity squared so increase in simulation speed will result in squared increase in temperature. But even if we account for that we are not dealing with ideal gas in real world, there bound to be collisions that break molecules apart or even start nuclear fusion at certain speeds
basically, make a standing wave of gas in a pipe and the peak of pressure will be hotter than the valley. Put the thing you want to cool in the valley, radiator in the peak, and voila, a heat pump.
This reminds me of spending hours digging through Microsoft Encarta as a kid. It was full of cool animations and demos like this (though these are much better).
I was surprised by how much I was surprised by the very first fact -- that air molecules move around at extremely high speed of 450m/s, but just bump into each other cancelling this speed out, and this speed is based on pressure & temperature.
And it's due to this speed, despite air's low density, the force air exerts is enormous -- equivalent to 10 tons per square meter. Somehow, the human sandwich does not explode nor implode due to equivalent pressure coming from the other side and inside.
It even has a different explanation text how to use keyboard (2nd paragraph), depending on whether you open a site from a desktop or mobile! Impressive!
Hmm, on Windows 10 Chrome/Firefox the demos with the movable ears don't work very well when the position changes. Both browsers output horrible audio in those sections.
edit: If I limit Firefox to 60fps (down from my display's 280hz) then it seems to work fine.
Would love some additional info on this if you are aware of any. My intuition says (and could very well be very wrong) sound at one frequency would only damage that or very nearby frequencies hearing range? If wrong I'm curious what the range of damage is (I'm interested in exploring ultrasound data protocols, so curious what frequency I have to go to to avoid damaging anyone's - and potentially animals as well - hearing).
I also assume if you are starting at a reasonable (laptop, small desktop speakers) at a low-to-medium level (say 50-60dB), increasing a bit won't cause immediate damage even if you can't hear the sound?
It's also important to realize that especially with infrasound, you're always exposed to it along with most regular sounds.
The modulation applied to sound to turn it into speech (i.e. amplitude and frequency shifts on order ~0.5-2 Hz) shows up in the frequency spectrum at those sorts of frequencies.
If you say "hey hey hey hey hey", that's a 1 Hz-or-whatever sound wave you're producing with a higher frequency carrier wave.
Is the hole to help get the sound out..? No. As this article shows you, the speaker already moves back and forth, this will create changes in pressure yada yada.
The speaker port is not just a hole, it’s a tube. The air in that tube has a mass and due to changes of air pressure inside the box, the air mass in the tube will move back and forth just like a plate in the article.
The result is that you basically have 2 “moving plates” which create sound: the speaker cone itself powered by a motor, and the air mass in a tube powered by the air pressure in the speaker enclosure.
To elaborate, the tube is tuned right below where in closed box the speaker would lose efficiency, so the frequency shift is 180 degrees, and as it takes air from behind it (which is shifted by 180 so it gets to 360 total). But that causes the frequency curve to drop steeper below that.
There is also variant of that where instead of pipe hole there is an extra passive membrane
Nothing really to say about this other than excellent work again and this really inspires me to make amazing web-based material in ways I haven't really experienced since the ~2012 era.
A fantastically written and extremely technically performant page as always from Bartosz.
Several of the piano key demos ask you to observe what happens when you play multiple keys at once. Is there a way to do this on a desktop PC that I am missing? I had to switch to my phone to try those sections.
For me, on desktop, there is a paragraph that says keys can be played with the W E and R keys, and each key has a W E or R on it, but this isn't present on mobile. Maybe the site thinks you desktop browser is mobile for some reason?
I wish the learning experience in school was similar to this. Excellent writing and the playing-around-with-the-subject really easied the learning for the concepts.
Does anyone know what tools are used to make the visualizations? They're silky smooth and work just as well on mobile as desktop. The elements are just a <canvas> element so I'm not sure how they're populated.
Edit: Oh, I think the answer is 6493 lines of artisanally hand-crafted javascript + WebGl. Beautiful.
This is absolutely phenomenal. This is how a lot of education should be. What blew my mind is how the author gradually increases the density of subject matter, going from the basics to the most advanced concepts in such a way that things just flow naturally. To say nothing of the interactive-ness of the page itself, which helps explain things exceptionally.
I hope this gets extended into a class about radio frequency communication. Everything here applies to all the wireless gadgets ubiquitous in our modern society, yet many haven’t the foggiest idea how antennas, carrier waves, and modulation combine to beam the Internet everywhere.
What we (the unmanicured masses) crave most is a clear blueprint for reconstructing the new Internet once our consumerism-based, debt-aggregation system inevitably comes to a screeching halt, complete with a spectacularly bloody and sparkling implosion.
I lack the proper academic terminology to even understand the field enough to discern what exactly it is that I don’t know that I don’t know, and personally my time “wasting time learning things on my own for seemingly no reason other than wanting to know” has recently been cut short, and I am left aching for someone to emerge from this chaos and hopefully be receptive to these messages/instructions/explanations before they are pulled from beneath us.
it would be lovely to have some personal note from Bartosz on how is he working on these articles - every single one looks like a masterpiece and at this point I'm wondering if he does not have issues with procrastination or lack of motivation
For those looking for more interactive content like this, albeit with more of a game dev focus, I highly recommend https://www.redblobgames.com
One of my favorite articles is this one on hex grids: https://www.redblobgames.com/grids/hexagons/
it blew my mind the first time I noticed that all the interactions and code change when you toggle between "flat topped" and "pointy topped".
I'm just as stunned as many others here after seeing this blog. What an incredibly talented engineer, writer, and artist all in one! He should be famous. Can't believe I hadn't heard of him.
> at room temperature the average velocity of a particle is a staggering 460 m/s so to make the particles visible I’m showing their motion significantly slowed down
Isn't 460 m/s the speed of the shock waves?
I mean, it you make some "air particle" move, it'll hit a nearby particle, and so on, and this wave has a speed of 460 m/s. In a solid object (wood, for example) the particles are close together and the speed will be greater. If you remove air particles it'll decrease the pressure and the speed will be slower...
I'd guess that most of the work is being done client side, leaving the server to just push out the text and code. I haven't tried to verify that assumtion though.
Lovely article.
For interactive reading about sound and music,
I also recommend Ableton's "learning synth" site.
It leverages web audio capabilities and provides exciting learning resources
about how to create synth music.
https://learningsynths.ableton.com/
I don't want to dissuade you, but you probably should not try to do it the same way he does: completely from scratch using pure JS + WebGL and without any frameworks. He's able to pull it off because he clearly has an incredible depth of knowledge of how it works, but mere mortals like you and me will likely get stuck in the bog of minutiae.
I recommend starting off by playing around with Three.js, which will get you up and running really quickly while still staying pretty grounded in WebGL. [1] You can make blog posts very similar to Ciechanowski using ObservableHQ. [2]
Depends what point on the spectrum you refer to by "how". Implementation, creativity, or the focus and discipline required to combine the two? :P
I had a quick look; as always with the presentations on this website, all the un-minified JavaScript is right there for you to pour over: https://ciechanow.ski/js/sound.js
So that covers the implementation: a giant pile of WebGL to power the rotatable boxes and animate effectively using the GPU, alongside in this case a bunch of Web Audio code.
Unfortunately that doesn't cover the focus/discipline part, which I would definitely appreciate some pointers on... one of these days I'll find some that fit within my ADHD address space xD
Awesome! I really enjoyed the mechanical watches post as well: https://ciechanow.ski/mechanical-watch
I might send this to some of my friends who are high school science teachers.
I encountered a strange bug on iOS: after visiting the Sound website, which uses the Web Audio API to play sounds, web-views in other apps (e.g. Lieferando, a food-delivery app) would play the same sound. So it seems like all web views share the audio context. Really weird.
Side note. I have always wondered, if we can hear the multiple frequencies caused by wave interference in soundwaves (e.g. square vs sine), why can't we see multiple frequencies in light waves. I assume it's just too fast?
We can, but we lump them into three bins, L, M, and S. The usual red, green, and blue are derived from those. L, M, and S are sensed by different cells.
It's more useful in an evolutionary sense to look at a banana and see that it's yellow, than to feel distinctly that your red and green cone cells are each being stimulated separately.
The combination happens in our brain because it's transforming those separate signals into useful information.
In addition to all the recommendations about supporting his Patreon, I also recommend following him on Twitter and clicking the bell icon: he only tweets when new articles are published, a very worthwhile notification.
OMG yes!!!!!! there was a post on sound years ago that was excellent, a bit similar to this, but i could never find it again. i genuinely want to know more about how sound works. looking forward to reading this
On atomic level. Like atoms oscilating? How many photons are emitted when say 5 carbon atoms connect with 5 oxyxen particles?
I tried searching and no avail.
I'd really like to learn to do what he does. It's always so impressive, clear, concise and comprehensive. I feel like everything he does is a perfect pedagogical modality. I just wish everyone could get on board, especially university professors and publishers.
Interesting. Just earlier I went to Bartosz website to see if there was anything and there was not... and then he publishes sound and I see it here on hackernews.
I am going to enjoy this. thanks
As a millenial with no degree+vague/little prospects of being able to one day purchase my own home, I've already saved his entire website and put it in my "very important things" folder.
As someone who really likes math, programming, and visual design as well as having spent hours upon hours practicing often short, yet incredibly complex lead guitar riffs by himself for many hours as a kid, I never quite grasped music theory back then and I realize now that essentially the only reason that is the case is because it was never presented to me in such a fun, digestible, and incredibly beautiful way; a way that I've been very much seeking to discover myself my whole life.
There are people who pay others to build schools, and then there are those that build things far more capable of transmitting the most optimally distilled form of knowledge and intellectual achievement that mankind has to offer to us today.
I don't really have much words right now, other than I want to kiss this man's feet and then maybe hope to stop crying eventually.
View the source of the articles and you will find thousands of lines of readable HTML, handwritten JavaScript using canvas and WebGL, and handwritten audio manipulation using window.AudioContext. Similar stories for the author's other incredible articles.
It's hand-crafted WebGL with no frameworks, which is insane. If you View Source on the page, you'll see that the JS is readable because he doesn't minify at all.
Explorable models are a great way to increase engagement and understanding. Beyond that, I would supplement this with highly frequent comprehension questions to check for learning. I bet you'd find a way to make it fun and approachable.
Please no!
Part of the beauty of this exposition is the respect for the reader knowing their own mind and controlling the consumption themselves.
You don't understand it but want to? Don't scroll.
You don't want the next bit? Don't scroll.
Will this work for teachers in a classroom? Likely not as the kids who don't care, will skip everything they can. And this page will let them, because if you don't care to understand then this page is not for you.
Any one of these pages would be a feat, an achievement to be proud of, but as a collection, it forms one of the greatest educational resources of its type that I have known.
These things can give you more intuition about a subject in 45 minutes than a textbook might be able to in 3 months, because it's interesting and not dry.
I wish I had more time to rant about this right now, but I haven't, so: Kudos. Another amazing job.