Hacker News

Powered by HN Search API

Sound

From https://ciechanow.ski/sound/
todsacerdoti | 2022-10-18 | 3053

Comments:

vladstudio

2022-10-18
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/

mortenjorck

2022-10-18
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.

Waterluvian

2022-10-18
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.

tambourine_man

2022-10-18
Audio is not working for the three keys on iOS.

Amazing content as always otherwise.

Scarlxd

2022-10-18
The resources were awesome! Everyone should check this out!

MichaelZuo

2022-10-18
Great information, well organized with intuitive flow.

mfwit

2022-10-18
Incredible stuff as always from Bartosz.

nonrandomstring

2022-10-18
+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.

qazpot

2022-10-18
This is awesome, reminds me of some of Bret Victor's work.

aidenn0

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

drcongo

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

aubanel

2022-10-18
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

2022-10-18
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

2022-10-18
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.

bullen

2022-10-18
Imagine if the later demos had stereo!

bnert

2022-10-18
Bartosz, you're a legend! Thank you for these amazing articles!!

hiidrew

2022-10-18
Quick babe wake up, new Ciechanowski intractable dropped.

lagrange77

2022-10-18
This guy!

mNovak

2022-10-18
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

2022-10-18
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

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

krinchan

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

sgraaf

2022-10-18
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.

lozzo

2022-10-18
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

2022-10-18
> 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...

naillo

2022-10-18
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

2022-10-18
> 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

2022-10-18
Phenomenal post. Hard to find these type of posts unless I look at HN.

Erwin

2022-10-18
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.

gtirloni

2022-10-18
How can one learn to create these visualizations?

meta-level

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

mathfailure

2022-10-18
This man is a legend now. The awesomest quality of articles.

apitman

2022-10-18
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.

PostOnce

2022-10-18
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.

Nition

2022-10-18
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.

ianklug

2022-10-18
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.

mirkodrummer

2022-10-18
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?

iammjm

2022-10-18
Superb

bkallus

2022-10-18
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?

extantproject

2022-10-18

patel011393

2022-10-18
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.

duderific

2022-10-18
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.

marcodiego

2022-10-18
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

pruthvishetty

2022-10-18
This is a PhD thesis in itself!

rvba

2022-10-18
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

2022-10-18
Incredible! Approachable and fun to learn.

All education should aim for this bar

vhold

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

dharma1

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

iamgopal

2022-10-18
…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.

lekevicius

2022-10-18
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

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

NaturalPhallacy

2022-10-18
>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

2022-10-18
If his site goes down, is the internet backing this up?

Amazing work.

Jack_rando_fang

2022-10-18
THIS is why I read HN everyday

prng2021

2022-10-18
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

2022-10-18
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

2022-10-18
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).

NickC25

2022-10-18
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

2022-10-18
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

jzer0cool

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

shmerl

2022-10-18
Kudos for metric system toggle!

8n4vidtmkvmk

2022-10-18
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

2022-10-18
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.

forrestthewoods

2022-10-18
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

hamasho

2022-10-18
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

2022-10-18
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

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

hoseja

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

vollcheck

2022-10-18
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

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

tsp

2022-10-18
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

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

tomrod

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

This was great.

euph0ria

2022-10-18
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

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

JusticeJuice

2022-10-18
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?

deepzn

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

darzu

2022-10-18
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".