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