Sound
todsacerdoti · 3 years ago
78 comments
todsacerdoti · 3 years ago
78 comments
vladstudio · 3 years ago
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!
maest · 3 years ago
Any idea what framework (if any) this is written in?
nwsm · 3 years ago
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.
phailhaus · 3 years ago
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.
mortenjorck · 3 years ago
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.
sebmellen · 3 years ago
I did the same. The minute I saw it on the homepage, upvote.
green-eclipse · 3 years ago
I'm a simple man. I see ciechanow.ski and I upvote.
symlinkk · 3 years ago
Reddit: Orange Edition
giarc · 3 years ago
https://news.ycombinator.com/from?site=ciechanow.ski
A link to all the HN submissions from ciechanow.ski
Waterluvian · 3 years ago
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.
Minor49er · 3 years ago
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
Waterluvian · 3 years ago
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.
n4bz0r · 3 years ago
> if you run a full-volume sine wave long enough you can permanently destroy your laptop speakers
Minutes? Hours?
Waterluvian · 3 years ago
Minutes.
I never repeated the experiment. Maybe my laptop was a dud or something.
nyanpasu64 · 3 years ago
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.
tambourine_man · 3 years ago
Audio is not working for the three keys on iOS.
Amazing content as always otherwise.
0x5345414e · 3 years ago
Works fine for me on iOS 16
incanus77 · 3 years ago
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.
tambourine_man · 3 years ago
Right you are, thanks
:facepalm
incanus77 · 3 years ago
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.
tambourine_man · 3 years ago
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.
HankB99 · 3 years ago
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.
Scarlxd · 3 years ago
The resources were awesome! Everyone should check this out!
MichaelZuo · 3 years ago
Great information, well organized with intuitive flow.
mfwit · 3 years ago
Incredible stuff as always from Bartosz.
nonrandomstring · 3 years ago
+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.
belkarx · 3 years ago
The book is amazing: http://www.dspguide.com/ (link for the lazy)
sporkl · 3 years ago
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.
ahaferburg · 3 years ago
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-...
WhitneyLand · 3 years ago
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
comboy · 3 years ago
> 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?
AceJohnny2 · 3 years ago
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.
armadsen · 3 years ago
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.
tuatoru · 3 years ago
* Lagrange's objections
AceJohnny2 · 3 years ago
whoops! thanks. Too late to edit.
andrepd · 3 years ago
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
retrac · 3 years ago
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.
cornel_io · 3 years ago
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.
anigbrowl · 3 years ago
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.
hoseja · 3 years ago
Perfectly square waves also can't physically exist, as long as there is a speed limit on the universe.
rectang · 3 years ago
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.)
skybrian · 3 years ago
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...
laszlokorte · 3 years ago
Wow, thank you very much! Straight to the point and very helpful, especially the web audio stuff.
cannam · 3 years ago
> "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.)
laszlokorte · 3 years ago
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/
CamperBob2 · 3 years ago
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.
skybrian · 3 years ago
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.
dsego · 3 years ago
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.
SonOfLilit · 3 years ago
It's one of my favorite technical books. So simply explained, so full of engineering wisdom.
voidhorse · 3 years ago
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.
anigbrowl · 3 years ago
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.
qazpot · 3 years ago
This is awesome, reminds me of some of Bret Victor's work.
aidenn0 · 3 years ago
When I started playing around with square/triangle waves, I couldn't help but hear https://www.youtube.com/watch?v=uyMKWJ5e1kg
drcongo · 3 years ago
I'm starting to think Bartosz Ciechanowski is from another planet. Everything he does is the very best explainer on that subject.
brnaftr361 · 3 years ago
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.
aubanel · 3 years ago
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.
imadr · 3 years ago
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
jcims · 3 years ago
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.
moritonal · 3 years ago
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.
jcims · 3 years ago
Nice callout. Done.
jarenmf · 3 years ago
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.
jcims · 3 years ago
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.
gattr · 3 years ago
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).
jcims · 3 years ago
Good correction, thank you!
bullen · 3 years ago
Imagine if the later demos had stereo!
bnert · 3 years ago
Bartosz, you're a legend! Thank you for these amazing articles!!
hiidrew · 3 years ago
Quick babe wake up, new Ciechanowski intractable dropped.
lagrange77 · 3 years ago
This guy!
mNovak · 3 years ago
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
zebracanevra · 3 years ago
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.
fuy · 3 years ago
What a neat switch from metric to imperial units! I wish more web pages had this.
krinchan · 3 years ago
I appreciate the mention and demonstration of Fourier Transforms. It makes a lot of previous sound codec discussions click a bit more now.
sgraaf · 3 years ago
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.
armchairhacker · 3 years ago
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
MezzoDelCammin · 3 years ago
Who says he isn't? We all have our strange hobbies that we pick (and sometimes discard/change) throughout life
zls · 3 years ago
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.
MezzoDelCammin · 3 years ago
aah, thanks! IT's true that I haven't bothered to go hunting besides the blog posts...
xnzakg · 3 years ago
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
russellbeattie · 3 years ago
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?
behnamoh · 3 years ago
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.
lozzo · 3 years ago
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
woliveirajr · 3 years ago
> 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...
jcims · 3 years ago
Yes, IIUC basically that's the point where the local particle speed is no longer sufficient to clear the leading edge of the wave.
pqn · 3 years ago
Speed of sound isn't too directly affected by air pressure I think (holding all else constant): https://physics.stackexchange.com/a/146207
naillo · 3 years ago
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.
mabbo · 3 years ago
> 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.
system2 · 3 years ago
Phenomenal post. Hard to find these type of posts unless I look at HN.
Erwin · 3 years ago
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.
zeroonetwothree · 3 years ago
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.
TremendousJudge · 3 years ago
>this speed is based on pressure & temperature
I'd say that pressure & temperature are a consequence of the speed, not the other way around
gtirloni · 3 years ago
How can one learn to create these visualizations?
skilled · 3 years ago
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.
exikyut · 3 years ago
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
phailhaus · 3 years ago
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...
gtirloni · 3 years ago
Thank you, very useful pointers.
meta-level · 3 years ago
Bartosz, you have to choose another name, I just upvoted by reflex, when I saw it's you again
mathfailure · 3 years ago
This man is a legend now. The awesomest quality of articles.
apitman · 3 years ago
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.
lelandfe · 3 years ago
That it all worked perfectly on my phone is testament to a ton of testing.
mixmastamyk · 3 years ago
It’s a few lines of standard JavaScript. Nice touch used by many sites, not difficult.
behnamoh · 3 years ago
> not difficult.
And yet, not so common especially on popular websites with $$$ development costs.
mixmastamyk · 3 years ago
Someone has to care enough to notice, often the case.
pigcat · 3 years ago
How is it done? Could you point to the section of code in the source code?
harrisi · 3 years ago
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));
}
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.
pigcat · 3 years ago
Thanks!
PostOnce · 3 years ago
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.
Liron · 3 years ago
Is there a way to donate?
gmd63 · 3 years ago
There's a Patreon link in the top right on his blog
kubami · 3 years ago
behnamoh · 3 years ago
> 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.
hoseja · 3 years ago
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.
aasasd · 3 years ago
“Never turn your hobby into a job.”
princevegeta89 · 3 years ago
This webpage can be converted directly into a science class.
jimmySixDOF · 3 years ago
Yes.
ccakes · 3 years ago
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
ChicagoBoy11 · 3 years ago
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.
agileAlligator · 3 years ago
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.
andrepd · 3 years ago
The watch, the ICE, and the ship are my favourites.
alberth · 3 years ago
For the HN crowd who like to roll with JS turned off, you’re missing out on great interactive illustrations.
bigDinosaur · 3 years ago
It's pretty much the ideal for how JS should be used.
unsafecast · 3 years ago
It also manages to make interactive animations faster than reading news at this point.
zasdffaa · 3 years ago
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.
Synaesthesia · 3 years ago
That's a 440. It's quite a high note.
rplst8 · 3 years ago
The thing that keeps me in reference is remembering that middle C is like ~250 Hz
xani__ · 3 years ago
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
jackphilson · 3 years ago
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.
panic · 3 years ago
A market would ruin it. This type of work is done for love, not for money.
mandmandam · 3 years ago
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.
imtringued · 3 years ago
>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.
Phileosopher · 3 years ago
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.
account42 · 3 years ago
How do you expect a market to incentivize this?
mandmandam · 3 years ago
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.
naillo · 3 years ago
He needs that. He also needs a lot more patreon supporters: https://www.patreon.com/ciechanowski :)
Nition · 3 years ago
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.
cyclotron3k · 3 years ago
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...
ianklug · 3 years ago
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.
dmd · 3 years ago
Use the (computer) keyboard.
ianklug · 3 years ago
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.
croddin · 3 years ago
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?
hollowturtle · 3 years ago
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?
primarydonkey · 3 years ago
You can support him on Patreon:
iammjm · 3 years ago
Superb
bkallus · 3 years ago
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?
keonix · 3 years ago
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
TremendousJudge · 3 years ago
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.
xani__ · 3 years ago
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.
extantproject · 3 years ago
patel011393 · 3 years ago
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.
_carbyau_ · 3 years ago
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.
prasoon503 · 3 years ago
Can u share your catalog, i really liked both the op's post and the tigyog.app one. And i am looking for more!
duderific · 3 years ago
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.
xani__ · 3 years ago
> 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
singingfish · 3 years ago
I'm not convinced it's possible to be an ex-musician
duderific · 3 years ago
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.
singingfish · 3 years ago
If you've got a spare few hundred bucks get yourself a korg wave drum :D
marcodiego · 3 years ago
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
owenfi · 3 years ago
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?
marcodiego · 3 years ago
"With protracted exposure, inaudible ultrasound can also contribute to hearing loss." https://www.health.belgium.be/en/ultrasound-and-high-frequen...
marginalia_nu · 3 years ago
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.
pruthvishetty · 3 years ago
This is a PhD thesis in itself!
rvba · 3 years ago
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.
CKMo · 3 years ago
Incredible! Approachable and fun to learn.
All education should aim for this bar
vhold · 3 years ago
All of this with 207 kB over the network. The two slowest requests were to google analytics.
dharma1 · 3 years ago
Was just teaching this stuff to my 12 yo son - this is way more thorough! What a gem of an interactive blog post.
iamgopal · 3 years ago
…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.
mark-r · 3 years ago
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.
lekevicius · 3 years ago
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.
robofanatic · 3 years ago
Mind blown, what a guy he is !!! and all his JavaScript is open source and not uglified.
NaturalPhallacy · 3 years ago
>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.
mensetmanusman · 3 years ago
If his site goes down, is the internet backing this up?
Amazing work.
d11z · 3 years ago
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.
Jack_rando_fang · 3 years ago
THIS is why I read HN everyday
prng2021 · 3 years ago
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.
nathan_f77 · 3 years ago
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.
_qua · 3 years ago
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).
ByThyGrace · 3 years ago
Makes you wonder if Wikipedia could be set for an interactive animation overhaul.
NickC25 · 3 years ago
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.
srcreigh · 3 years ago
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
xani__ · 3 years ago
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
jzer0cool · 3 years ago
What did you use to create the particles in the cube? And then to the browser? Very nice.
shmerl · 3 years ago
Kudos for metric system toggle!
8n4vidtmkvmk · 3 years ago
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
navi0 · 3 years ago
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.
d11z · 3 years ago
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.
forrestthewoods · 3 years ago
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.
hamasho · 3 years ago
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/
ivanche · 3 years ago
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!
codeisawesome · 3 years ago
Bartosz if you’re reading this, please make one about electronic circuits, starting from atoms to CPUs if possible! :)
user_7832 · 3 years ago
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
hoseja · 3 years ago
I was waiting for a step where pressure waves would be shown in the particle simulation. Probably too hard to make...
vollcheck · 3 years ago
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
lloydatkinson · 3 years ago
Does he use a framework like react + three.js, plain three.js, or raw canvas, I wonder?
helb · 3 years ago
Looks like vanilla js/canvas/webgl without any framework: https://ciechanow.ski/js/sound.js
tsp · 3 years ago
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.
distcs · 3 years ago
Anyone here knows what tools are being used to make the wonderful animations in the OP article?
tmnvix · 3 years ago
Apparently it's done by hand in WebGL. See the top comment/thread in the previous mechanical watch submission.
tomrod · 3 years ago
This is how I imagined textbooks would be when "multimedia" became the dominant discussion in the tech world.
This was great.
euph0ria · 3 years ago
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.
sethammons · 3 years ago
No sound plays for me on iphone 11 with firefox, chrome, nor safari. I can play audio from other sources
sillysaurusx · 3 years ago
Turn off silent.
sethammons · 3 years ago
Ah, works! Thanks!
JusticeJuice · 3 years ago
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?
amluto · 3 years ago
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.
SamBam · 3 years ago
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.
deepzn · 3 years ago
I took a Physics of Sound class for my minor in Physics during undergrad. One of my favorite classes I've taken.
darzu · 3 years ago
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".
