Sound | Hacker News Reader

Sound

ciechanow.ski

3,053 pointstodsacerdoti206 comments

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.

Is there a way to donate?

There's a Patreon link in the top right on his blog

https://www.patreon.com/ciechanowski

> This man needs a genius grant, and this is about the 6th time I've thought this.

He says this is his weekend hobby. I really wish he could work on these things full-time. The world needs more people like him.

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.

“Never turn your hobby into a job.”

This webpage can be converted directly into a science class.

Yes.

The little touches like being able to switch the entire article to metric (or imperial) are incredibly nice and make it more approachable as a result

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.

I took one look at the animation sliders and knew it was the same guy who did the mechanical watch thing

I agree with parent comment. This man should be given funding to do this for the rest of his life.

The watch, the ICE, and the ship are my favourites.

For the HN crowd who like to roll with JS turned off, you’re missing out on great interactive illustrations.

It's pretty much the ideal for how JS should be used.

It also manages to make interactive animations faster than reading news at this point.

Useful tip, thanks. I never enable JS on my machine, starting up a VM as I type.

Hmm, is it me or does the 440Hz sound seem higher pitched than it should? I'm not a musician at all but the 330Hz sounds closer to what I'd expect.

That's a 440. It's quite a high note.

The thing that keeps me in reference is remembering that middle C is like ~250 Hz

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

Now imagine if all education were like this.

What if there was a market that incentivized the creation of top-quality educational content like this? Create it for one topic, usable forever.

A market would ruin it. This type of work is done for love, not for money.

I don't think that's necessarily true.

The markets we have are perversions. They are captured; regulated and deregulated in all the wrong places.

It is possible that small changes in how money or capital works could enable far better markets.

>It is possible that small changes in how money

It is called demurrage currency or negative interest rates...

Hint: If money itself no longer accumulates without consent then capital can only accumulate with consent.

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.

How do you expect a market to incentivize this?

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.

He needs that. He also needs a lot more patreon supporters: https://www.patreon.com/ciechanowski :)

Bartosz' blog posts are in a league of their own.

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.

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

Who says he isn't? We all have our strange hobbies that we pick (and sometimes discard/change) throughout life

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.

aah, thanks! IT's true that I haven't bothered to go hunting besides the blog posts...

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

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?

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.

The book is amazing: http://www.dspguide.com/ (link for the lazy)

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.

Here [1] I found a link [2] to download all chapters in one .zip file.

[1] https://www.analog.com/en/education/education-library/scient... [2] https://www.analog.com/media/en/technical-documentation/dsp-...

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

from chapter 8 http://www.dspguide.com/ch8/1.htm

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

* Lagrange's objections

whoops! thanks. Too late to edit.

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

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.

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.

Perfectly square waves also can't physically exist, as long as there is a speed limit on the universe.

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've been writing notebooks about doing DSP and audio processing in JavaScript. It might be a good place to crib off of:

https://observablehq.com/collection/@skybrian/digital-signal...

Wow, thank you very much! Straight to the point and very helpful, especially the web audio stuff.

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

[1]: https://tools.laszlokorte.de/ [2]: https://static.laszlokorte.de/fourier/ [3]: https://static.laszlokorte.de/complex-exponential/ [4]: https://static.laszlokorte.de/signal-transform/ [5]: https://static.laszlokorte.de/signal-generator/ [6]: https://static.laszlokorte.de/matrix-multiplication/

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.

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.

It's one of my favorite technical books. So simply explained, so full of engineering wisdom.

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.

That it all worked perfectly on my phone is testament to a ton of testing.

It’s a few lines of standard JavaScript. Nice touch used by many sites, not difficult.

> not difficult.

And yet, not so common especially on popular websites with $$$ development costs.

Someone has to care enough to notice, often the case.

How is it done? Could you point to the section of code in the source code?

The relevant few lines are these:

    if ("IntersectionObserver" in window) {
        const observer = new IntersectionObserver(entries => {
            entries.forEach(entry => { entry.target.drawer.set_visible(entry.isIntersecting); })
        }, { rootMargin: "300px" })

        all_containers.forEach(container => observer.observe(container));
    } else {
        all_containers.forEach(container => container.drawer.set_visible(true));
    }

You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/API/Intersectio...

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.

Thanks!

Incredible work as always, thanks Bartosz.

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

I'm not convinced it's possible to be an ex-musician

Ha, good point. I'd like to get back to it someday but kids, work and lack of place to set up drums make it extremely challenging.

If you've got a spare few hundred bucks get yourself a korg wave drum :D

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.

Nice callout. Done.

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.

Reality is very strange.

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

Good correction, thank you!

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 DOS terminal games like Rogue and ZZT which used ASCII characters to draw everything. I hope you post it once it's ready

Indeed it's a dungeon crawler.

Don't hold your breath. It'll be rudimentary. I'm making it for my own joy and learning, but will probably publish it by EOY.

> if you run a full-volume sine wave long enough you can permanently destroy your laptop speakers

Minutes? Hours?

Minutes.

I never repeated the experiment. Maybe my laptop was a dud or something.

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.

This. This is the internet. I’m glad we can still enjoy quality driven content. To author if you’re here: any ways to support your work?

You can support him on Patreon:

https://www.patreon.com/ciechanowski

Bartosz if you’re reading this, please make one about electronic circuits, starting from atoms to CPUs if possible! :)

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

All of this with 207 kB over the network. The two slowest requests were to google analytics.

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?

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

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.

Yup, and that is how ultrasonic heat pumps work!

JWST has one

https://webb.nasa.gov/content/about/innovations/cryocooler.h...

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

Makes you wonder if Wikipedia could be set for an interactive animation overhaul.

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.

Note that diving to a depth of only 10m will double the external pressure on your body yet humans can easily survive this.

Indeed the all time record is >300m which is something like 32x pressure.

So it’s not merely that there is equivalent pressure from inside.

>this speed is based on pressure & temperature

I'd say that pressure & temperature are a consequence of the speed, not the other way around

> As a side note, I’m using metric units here, but you can *switch* to the imperial system if you prefer.

Clicking on the word 'switch' does exactly that. That's a delightful and clever touch that of course comes from Bartosz Ciechanowski.

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.

WARNING: sounds you can't hear can still damages your ear. DO NOT INCREASE THE VOLUME ON INFRA OR ULTRA SOUNDS BECAUSE YOU CAN'T HEAR THEM

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?

"With protracted exposure, inaudible ultrasound can also contribute to hearing loss." https://www.health.belgium.be/en/ultrasound-and-high-frequen...

Operative word being protracted.

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.

A cool physical sound apparatus is a speaker port. This is the hole(s) you may find in some speakers.

https://blog.fluance.com/wp-content/uploads/2021/05/Ported-V...

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.

Cool video about speaker design

https://youtu.be/23q3zoKiuGs

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

https://en.wikipedia.org/wiki/Passive_radiator_(speaker)

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.

Use the (computer) keyboard.

facepalm

Thanks. Next time I'll try actually reading all the text on the page.

Amazing that on a page with such exemplary UX my tired brain still managed to gloss over the massive letters on each key.

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.

https://ciechanow.ski/js/sound.js

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.

Superb post.

This is how I imagined textbooks would be when "multimedia" became the dominant discussion in the tech world.

This was great.

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.

If anyone who is capable is reading this:

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

When I started playing around with square/triangle waves, I couldn't help but hear https://www.youtube.com/watch?v=uyMKWJ5e1kg

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

Yes, IIUC basically that's the point where the local particle speed is no longer sufficient to clear the leading edge of the wave.

Speed of sound isn't too directly affected by air pressure I think (holding all else constant): https://physics.stackexchange.com/a/146207

This man is a legend now. The awesomest quality of articles.

…and the fact that site works perfectly under load from being top of hn shows his skill with selecting and maintaining right kind of server setup.

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/

How can one learn to create these visualizations?

By inspecting page source.

If you mean technical, you have no choice but to actually study the topic and understand it so that you can create examples like the author did.

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

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]

[1] https://threejs.org/docs/index.html#manual/en/introduction/C...

[2] https://observablehq.com/@mbostock/hello-three-js

Thank you, very useful pointers.

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.

https://en.m.wikipedia.org/wiki/LMS_color_space

Similarly, our ears are sensitive to a rather larger number of frequency bins, and and each sensory cell senses one of these bins.

Neither of these sensory mechanisms is particularly sensitive to phase and, in fact, we can’t hear phase differences very well.

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

Phenomenal post. Hard to find these type of posts unless I look at HN.

I wish there was a post like this about fire.

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.

This is awesome, reminds me of some of Bret Victor's work.

The resources were awesome! Everyone should check this out!

Great information, well organized with intuitive flow.

I appreciate the mention and demonstration of Fourier Transforms. It makes a lot of previous sound codec discussions click a bit more now.

I'm really curious to know how he selects the topic of each article; the archive has quite a range!

This is the type of blog I aspire to make, one day

I'm starting to think Bartosz Ciechanowski is from another planet. Everything he does is the very best explainer on that subject.

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.

I took a Physics of Sound class for my minor in Physics during undergrad. One of my favorite classes I've taken.

I was waiting for a step where pressure waves would be shown in the particle simulation. Probably too hard to make...

Was just teaching this stuff to my 12 yo son - this is way more thorough! What a gem of an interactive blog post.

https://archive.ph/woqkb

No sound plays for me on iphone 11 with firefox, chrome, nor safari. I can play audio from other sources

Turn off silent.

Ah, works! Thanks!

Imagine if the later demos had stereo!

Bartosz, you have to choose another name, I just upvoted by reflex, when I saw it's you again

Anyone here knows what tools are being used to make the wonderful animations in the OP article?

Apparently it's done by hand in WebGL. See the top comment/thread in the previous mechanical watch submission.

https://news.ycombinator.com/item?id=31261533

What did you use to create the particles in the cube? And then to the browser? Very nice.

Mind blown, what a guy he is !!! and all his JavaScript is open source and not uglified.

Does he use a framework like react + three.js, plain three.js, or raw canvas, I wonder?

Looks like vanilla js/canvas/webgl without any framework: https://ciechanow.ski/js/sound.js

What a neat switch from metric to imperial units! I wish more web pages had this.

THIS is why I read HN everyday

Incredible! Approachable and fun to learn.

All education should aim for this bar

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

If his site goes down, is the internet backing this up?

Amazing work.

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.

Kudos for metric system toggle!

This is a PhD thesis in itself!

Superb

This guy!

Bartosz, you're a legend! Thank you for these amazing articles!!

Incredible stuff as always from Bartosz.

Ordinarily, I follow the HN best practice of clicking through to a link first rather than upvoting based solely on the headline and domain.

Seeing there's a new Bartosz Ciechanowski explainer might be my one exception to this rule.

I did the same. The minute I saw it on the homepage, upvote.

I'm a simple man. I see ciechanow.ski and I upvote.

Reddit: Orange Edition

https://news.ycombinator.com/from?site=ciechanow.ski

A link to all the HN submissions from ciechanow.ski

If you have not yet seen this site, please free a couple of hours and browse through archives, it's the best educational material I have ever seen!

https://ciechanow.ski/archives/

Any idea what framework (if any) this is written in?

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.

Quick babe wake up, new Ciechanowski intractable dropped.

>If it wasn’t for the collisions with other molecules, those fragrant particles could travel the distance to your nose in a fraction of a second.

That's kinda crazy to think about. Someone across a gymnasium room farts, and you smell it milliseconds later. Ugh.

Audio is not working for the three keys on iOS.

Amazing content as always otherwise.

Works fine for me on iOS 16

Make sure your alerts aren’t muted. I’m on an iPad and I had to check the widget in Control Center to get sound, but then it worked fine.

Right you are, thanks

:facepalm

I still don’t understand why this mutes functionality like this page’s, but not web video or audio players or the like in web pages.

Yeah, iOS sound is an enigma. If you lower the sound, does it change the ringtone? How about the alarm?

No one knows for sure, one of the true mysteries of the universe.

I'm not getting any audio on Linux/Chrome (Debian.) No audio from this page either https://d21u3ic0kp9e91.cloudfront.net/choir/04/index.html, much to the dismay of our grandchildren.

I checked system audio settings and see nothing muted.

As an educational psychologist, there's a lot to love here and I catalog posts like these as examples of expert exposition.

One suggest to Bartosz: breaking one long essay into many smaller pages or hiding content until the viewer has indicated understanding of previous steps will be even more useful (see: https://tigyog.app/d/H7XOvXvC_x/r/goedel-s-first-incompleten...).

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.

Can u share your catalog, i really liked both the op's post and the tigyog.app one. And i am looking for more!

Reply on news.ycombinator.com