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&#x27;s other incredible articles.

It&#x27;s hand-crafted WebGL with no frameworks, which is insane. If you View Source on the page, you&#x27;ll see that the JS is readable because he doesn&#x27;t minify at all.

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

If you have not yet seen this site, please free a couple of hours and browse through archives, it&#x27;s the best educational material I have ever seen!<a href="https:&#x2F;&#x2F;ciechanow.ski&#x2F;archives&#x2F;" rel="nofollow">https:&#x2F;&#x2F;ciechanow.ski&#x2F;archives&#x2F;</a>

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

I&#x27;m a simple man. I see ciechanow.ski and I upvote.

<a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;from?site=ciechanow.ski" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;from?site=ciechanow.ski</a>A link to all the HN submissions from ciechanow.ski

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&#x27;s a new Bartosz Ciechanowski explainer might be my one exception to this rule.

Indeed it&#x27;s a dungeon crawler.Don&#x27;t hold your breath. It&#x27;ll be rudimentary. I&#x27;m making it for my own joy and learning, but will probably publish it by EOY.

Reminds me of DOS terminal games like Rogue and ZZT which used ASCII characters to draw everything. I hope you post it once it&#x27;s ready

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

&gt; if you run a full-volume sine wave long enough you can permanently destroy your laptop speakersMinutes? Hours?

Reminds me of Marcan trying to make Asahi not do that on MacBooks, and so far failing (<a href="https:&#x2F;&#x2F;github.com&#x2F;AsahiLinux&#x2F;linux&#x2F;issues&#x2F;53" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;AsahiLinux&#x2F;linux&#x2F;issues&#x2F;53</a>). I didn&#x27;t know that Windows laptops also had speakers that would burn out with high-volume playback.

I love the web audio API. I&#x27;ve been making a game where the theme is &quot;I don&#x27;t do art&quot; 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.

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.

I&#x27;m not getting any audio on Linux&#x2F;Chrome (Debian.) No audio from this page either <a href="https:&#x2F;&#x2F;d21u3ic0kp9e91.cloudfront.net&#x2F;choir&#x2F;04&#x2F;index.html" rel="nofollow">https:&#x2F;&#x2F;d21u3ic0kp9e91.cloudfront.net&#x2F;choir&#x2F;04&#x2F;index.html</a>, much to the dismay of our grandchildren.I checked system audio settings and see nothing muted.

Audio is not working for the three keys on iOS.Amazing content as always otherwise.

The resources were awesome! Everyone should check this out!

Great information, well organized with intuitive flow.

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&#x27;m currently around page 200, and it&#x27;s been great as an introductory resource as someone with no other background in DSP.

Here [1] I found a link [2] to download all chapters in one .zip file.[1] <a href="https:&#x2F;&#x2F;www.analog.com&#x2F;en&#x2F;education&#x2F;education-library&#x2F;scientist_engineers_guide.html" rel="nofollow">https:&#x2F;&#x2F;www.analog.com&#x2F;en&#x2F;education&#x2F;education-library&#x2F;scient...</a>
[2] <a href="https:&#x2F;&#x2F;www.analog.com&#x2F;media&#x2F;en&#x2F;technical-documentation&#x2F;dsp-book&#x2F;dsp_book_dspguide.zip" rel="nofollow">https:&#x2F;&#x2F;www.analog.com&#x2F;media&#x2F;en&#x2F;technical-documentation&#x2F;dsp-...</a>

The book is amazing: <a href="http:&#x2F;&#x2F;www.dspguide.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;www.dspguide.com&#x2F;</a> (link for the lazy)

&gt; 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&#x27;t that true though? You can only approximate it, right?

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&#x27;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&#x27;s work. It was only after Lagrange died that the paper was finally published, some 15 years later.“from chapter 8
<a href="http:&#x2F;&#x2F;www.dspguide.com&#x2F;ch8&#x2F;1.htm" rel="nofollow">http:&#x2F;&#x2F;www.dspguide.com&#x2F;ch8&#x2F;1.htm</a>

I&#x27;ve been writing notebooks about doing DSP and audio processing in JavaScript. It might be a good place to crib off of:<a href="https:&#x2F;&#x2F;observablehq.com&#x2F;collection&#x2F;@skybrian&#x2F;digital-signal-processing" rel="nofollow">https:&#x2F;&#x2F;observablehq.com&#x2F;collection&#x2F;@skybrian&#x2F;digital-signal...</a>

&gt; &quot;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&#x27;s talk about complex numbers.&quot;Maybe the latter part could be prepped by resynthesising the time-domain signal by summing the sines, and seeing that it doesn&#x27;t match the original. And it can&#x27;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&#x2F;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&#x27;t match. (But there is a whole well here about what it means for frequencies to &quot;match&quot;, which in the discrete world has to do with how long the relevant part of the signal is.)

I posted this as a submission a while ago but you might find it helpful. While learning about signal processing my self I built a collection of educational tools for visualizing some concepts. [1]Especially the fourier cube [2], the complex exponential [3], the digital filter designer [4] and the signal generator [5] might be helpful.Additionally the matrix multiplier [6] has an option for complex numbers that highlights the perspective that complex numbers can be seen as just a subset of 2x2 matrices.[1]: <a href="https:&#x2F;&#x2F;tools.laszlokorte.de&#x2F;" rel="nofollow">https:&#x2F;&#x2F;tools.laszlokorte.de&#x2F;</a>
[2]: <a href="https:&#x2F;&#x2F;static.laszlokorte.de&#x2F;fourier&#x2F;" rel="nofollow">https:&#x2F;&#x2F;static.laszlokorte.de&#x2F;fourier&#x2F;</a>
[3]: <a href="https:&#x2F;&#x2F;static.laszlokorte.de&#x2F;complex-exponential&#x2F;" rel="nofollow">https:&#x2F;&#x2F;static.laszlokorte.de&#x2F;complex-exponential&#x2F;</a>
[4]: <a href="https:&#x2F;&#x2F;static.laszlokorte.de&#x2F;signal-transform&#x2F;" rel="nofollow">https:&#x2F;&#x2F;static.laszlokorte.de&#x2F;signal-transform&#x2F;</a>
[5]: <a href="https:&#x2F;&#x2F;static.laszlokorte.de&#x2F;signal-generator&#x2F;" rel="nofollow">https:&#x2F;&#x2F;static.laszlokorte.de&#x2F;signal-generator&#x2F;</a>
[6]: <a href="https:&#x2F;&#x2F;static.laszlokorte.de&#x2F;matrix-multiplication&#x2F;" rel="nofollow">https:&#x2F;&#x2F;static.laszlokorte.de&#x2F;matrix-multiplication&#x2F;</a>

Your intuition is right, in that most of the heavy math is simply unnecessary or irrelevant at the practical level. Complex number notation doesn&#x27;t fall into that category, though. The notion of frequency is intimately tied to the notion of vector rotation, and just as you can&#x27;t represent Cartesian translation without negative numbers, you can&#x27;t represent Cartesian rotation without complex ones.The Smith book is definitely for you; also check out Rick Lyons&#x27;s books. Bo Pirkle and Julius O. Smith are good for audio-specific theory and applications.

I once found one article that started with the concept of &quot;probing&quot; 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&#x2F;cos pair.

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&#x2F;FFT explanation seems to start with complex numbers. I wish there was a resource that was programming focused, starting with &quot;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&#x27;s talk about complex numbers.&quot;I&#x27;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&#x27;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&#x27;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.)

It&#x27;s one of my favorite technical books. So simply explained, so full of engineering wisdom.

It&#x27;s the best. I learned DSP from that ~20 years ago and still use those mental models whenever I need to think through a problem. A good book like that is a friend for life.

I&#x27;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&#x27;s a great book.

+1 for the recommendation for &quot;The Scientist and Engineer&#x27;s Guide to
Digital Signal Processing&quot; 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&#x27;s Guide doesn&#x27;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&#x27;s background
is in medial imaging, though I could be mistaken.

This is awesome, reminds me of some of Bret Victor&#x27;s work.

When I started playing around with square&#x2F;triangle waves, I couldn&#x27;t help but hear <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=uyMKWJ5e1kg" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=uyMKWJ5e1kg</a>

I&#x27;d really like to learn to do what he does. It&#x27;s always so impressive, clear, concise and comprehensive. I feel like everything he does is a perfect pedagogical modality. I just wish everyone could get on board, especially university professors and publishers.

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

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.

The three keys piano at the beginning is so responsive and nice that I was stuck playing with it for 5 minutes, that&#x27;s how you hook someone to read an article

Whilst I imagine he&#x27;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&#x27;t.

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.

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.

I love it when I&#x27;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 &#x27;dense&#x27; air is under normal circumstances. The &#x27;mean free path&#x27; 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&#x27;s ear canal.

Bartosz, you&#x27;re a legend! Thank you for these amazing articles!!

Quick babe wake up, new Ciechanowski intractable dropped.

I&#x27;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

Hmm, on Windows 10 Chrome&#x2F;Firefox the demos with the movable ears don&#x27;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&#x27;s 280hz) then it seems to work fine.

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

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

Who says he isn&#x27;t? We all have our strange hobbies that we pick (and sometimes discard&#x2F;change) throughout life

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

These are amazing - from the design to the interactive demos to the writing. I think &quot;digital monograph&quot; is almost a more apt description than &quot;blog post&quot;. I&#x27;ve written tons of blog posts and they have almost nothing in common with what he&#x27;s doing. 8,000 well written words plus formatting and links plus 50 or so embedded demos is really an astounding amount of work. What I appreciate most is the use of the medium itself. Imagine if the standard format for academic papers was updated from the black and white two-column format used for a half century to something like this?

This is how school must be. I&#x27;d rather pay people like him to create interactive content than pay the school to teach my kids useless material in dry, rigid ways.

Bartosz&#x27; 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.

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

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

Speed of sound isn&#x27;t too directly affected by air pressure I think (holding all else constant): <a href="https:&#x2F;&#x2F;physics.stackexchange.com&#x2F;a&#x2F;146207" rel="nofollow">https:&#x2F;&#x2F;physics.stackexchange.com&#x2F;a&#x2F;146207</a>

&gt; at room temperature the average velocity of a particle is a staggering 460 m&#x2F;s so to make the particles visible I’m showing their motion significantly slowed downIsn&#x27;t 460 m&#x2F;s the speed of the shock waves?I mean, it you make some &quot;air particle&quot; move, it&#x27;ll hit a nearby particle, and so on, and this wave has a speed of 460 m&#x2F;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&#x27;ll decrease the pressure and the speed will be slower...

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&#x27;t really experienced since the ~2012 era.

&gt; 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 &#x27;switch&#x27; does exactly that. That&#x27;s a delightful and clever touch that of course comes from Bartosz Ciechanowski.

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

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 &gt;300m which is something like 32x pressure.So it’s not merely that there is equivalent pressure from inside.

&gt;this speed is based on pressure &amp; temperatureI&#x27;d say that pressure &amp; temperature are a consequence of the speed, not the other way around

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&#x2F;s, but just bump into each other cancelling this speed out, and this speed is based on pressure &amp; temperature.And it&#x27;s due to this speed, despite air&#x27;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.

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

Depends what point on the spectrum you refer to by &quot;how&quot;. Implementation, creativity, or the focus and discipline required to combine the two? :PI 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: <a href="https:&#x2F;&#x2F;ciechanow.ski&#x2F;js&#x2F;sound.js" rel="nofollow">https:&#x2F;&#x2F;ciechanow.ski&#x2F;js&#x2F;sound.js</a>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&#x27;t cover the focus&#x2F;discipline part, which I would definitely appreciate some pointers on... one of these days I&#x27;ll find some that fit within my ADHD address space xD

I don&#x27;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&#x27;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] <a href="https:&#x2F;&#x2F;threejs.org&#x2F;docs&#x2F;index.html#manual&#x2F;en&#x2F;introduction&#x2F;Creating-a-scene" rel="nofollow">https:&#x2F;&#x2F;threejs.org&#x2F;docs&#x2F;index.html#manual&#x2F;en&#x2F;introduction&#x2F;C...</a>[2] <a href="https:&#x2F;&#x2F;observablehq.com&#x2F;@mbostock&#x2F;hello-three-js" rel="nofollow">https:&#x2F;&#x2F;observablehq.com&#x2F;@mbostock&#x2F;hello-three-js</a>

How can one learn to create these visualizations?

Bartosz, you have to choose another name, I just upvoted by reflex, when I saw it&#x27;s you again

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

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

&gt; not difficult.And yet, not so common especially on popular websites with $$$ development costs.

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

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

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.

There&#x27;s a Patreon link in the top right on his blog

I don&#x27;t. The quality can only get worse as it changes from hobby to a job. Give him money, yes; but don&#x27;t demand increase in publishing or any commitment.

&gt; This man needs a genius grant, and this is about the 6th time I&#x27;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.

This webpage can be converted directly into a science class.

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

I took one look at the animation sliders and knew it was the same guy who did the mechanical watch thingI agree with parent comment. This man should be given funding to do this for the rest of his life.

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

I saw your comment and was like: &quot;wait a minute... surely its not the same guy as the mechanical watch thing, is it?!?!?!&quot;Absolutely blown away. As someone with a &quot;design for learning&quot; degree which I&#x27;ve found to be rather useless, I&#x27;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.

It&#x27;s pretty much the ideal for how JS should be used.

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&#x27;m not a musician at all but the 330Hz sounds closer to what I&#x27;d expect.

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

Pretty much, I&#x27;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 &quot;acoustic room design 101&quot; and beautifully illustrates how shape and dampening of the room can massively change how it sounds

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

How do you expect a market to incentivize this?

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.

He needs that. He also needs a lot more patreon supporters: <a href="https:&#x2F;&#x2F;www.patreon.com&#x2F;ciechanowski" rel="nofollow">https:&#x2F;&#x2F;www.patreon.com&#x2F;ciechanowski</a> :)

This man needs a genius grant, and this is about the 6th time I&#x27;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&#x27;s interesting and not dry.I wish I had more time to rant about this right now, but I haven&#x27;t, so: Kudos. Another amazing job.

I drew a sine-wave, at double frequency (e.g. ◠◡◠◡), but it didn&#x27;t really affect the frequency that I heard - it only changed the timbre. I wonder why...

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&#x27;s right there and instantly tweakable.

facepalmThanks. Next time I&#x27;ll try actually reading all the text on the page.Amazing that on a page with such exemplary UX my tired brain still managed to gloss over the massive letters on each key.

For me, on desktop, there is a paragraph that says keys can be played with the W E and R keys, and each key has a W E or R on it, but this isn&#x27;t present on mobile. Maybe the site thinks you desktop browser is mobile for some reason?

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.

You can support him on Patreon:<a href="https:&#x2F;&#x2F;www.patreon.com&#x2F;ciechanowski" rel="nofollow">https:&#x2F;&#x2F;www.patreon.com&#x2F;ciechanowski</a>

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?

IIRC temperature is proportional to velocity squared so increase in simulation speed will result in squared increase in temperature. But even if we account for that we are not dealing with ideal gas in real world, there bound to be collisions that break molecules apart or even start nuclear fusion at certain speeds

The thing is, temperature is just motion at very small scales. On a solid, particles are attached to one another via the atomic forces, and a &quot;temperature increase&quot; 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&#x27;s a gas, the particles are jiggling so much they aren&#x27;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 &quot;increasing the temperature&quot; of the gas.

Yup, and that is how ultrasonic heat pumps work!JWST has one<a href="https:&#x2F;&#x2F;webb.nasa.gov&#x2F;content&#x2F;about&#x2F;innovations&#x2F;cryocooler.html" rel="nofollow">https:&#x2F;&#x2F;webb.nasa.gov&#x2F;content&#x2F;about&#x2F;innovations&#x2F;cryocooler.h...</a>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.

I haven&#x27;t taken beyond high school physics, so this question is probably obvious, but I haven&#x27;t been able to find the answer (probably don&#x27;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&#x27;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?

<a href="https:&#x2F;&#x2F;archive.ph&#x2F;woqkb" rel="nofollow">https:&#x2F;&#x2F;archive.ph&#x2F;woqkb</a>

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&#x27;t understand it but want to? Don&#x27;t scroll.
You don&#x27;t want the next bit? Don&#x27;t scroll.Will this work for teachers in a classroom? Likely not as the kids who don&#x27;t care, will skip everything they can. And this page will let them, because if you don&#x27;t care to understand then this page is not for you.

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

As an educational psychologist, there&#x27;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: <a href="https:&#x2F;&#x2F;tigyog.app&#x2F;d&#x2F;H7XOvXvC_x&#x2F;r&#x2F;goedel-s-first-incompleteness-theorem" rel="nofollow">https:&#x2F;&#x2F;tigyog.app&#x2F;d&#x2F;H7XOvXvC_x&#x2F;r&#x2F;goedel-s-first-incompleten...</a>).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&#x27;d find a way to make it fun and approachable.

&gt; Interesting side note - using the &quot;basic&quot; frequency&#x2F;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&#x27;re on headphones maybe but might &quot;only&quot; be shit speakers

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

I&#x27;m not convinced it&#x27;s possible to be an ex-musician

Incredible work as always, thanks Bartosz.Interesting side note - using the &quot;basic&quot; frequency&#x2F;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.

&quot;With protracted exposure, inaudible ultrasound can also contribute to hearing loss.&quot; <a href="https:&#x2F;&#x2F;www.health.belgium.be&#x2F;en&#x2F;ultrasound-and-high-frequency-sound" rel="nofollow">https:&#x2F;&#x2F;www.health.belgium.be&#x2F;en&#x2F;ultrasound-and-high-frequen...</a>

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&#x27;m curious what the range of damage is (I&#x27;m interested in exploring ultrasound data protocols, so curious what frequency I have to go to to avoid damaging anyone&#x27;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&#x27;t cause immediate damage even if you can&#x27;t hear the sound?

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

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.

Incredible! Approachable and fun to learn.All education should aim for this bar

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

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

I&#x27;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&#x27;t tried to verify that assumtion though.

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

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.

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

&gt;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&#x27;s kinda crazy to think about. Someone across a gymnasium room farts, and you smell it milliseconds later. Ugh.

As a millenial with no degree+vague&#x2F;little prospects of being able to one day purchase my own home, I&#x27;ve already saved his entire website and put it in my &quot;very important things&quot; 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&#x27;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&#x27;t really have much words right now, other than I want to kiss this man&#x27;s feet and then maybe hope to stop crying eventually.

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

I&#x27;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&#x27;t believe I hadn&#x27;t heard of him.

Awesome! I really enjoyed the mechanical watches post as well: <a href="https:&#x2F;&#x2F;ciechanow.ski&#x2F;mechanical-watch" rel="nofollow">https:&#x2F;&#x2F;ciechanow.ski&#x2F;mechanical-watch</a>
I might send this to some of my friends who are high school science teachers.

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

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

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.

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<a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Passive_radiator_(speaker)" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Passive_radiator_(speaker)</a>

A cool physical sound apparatus is a speaker port. This is the hole(s) you may find in some speakers.<a href="https:&#x2F;&#x2F;blog.fluance.com&#x2F;wp-content&#x2F;uploads&#x2F;2021&#x2F;05&#x2F;Ported-Vs-Sealed-Speakers.jpg" rel="nofollow">https:&#x2F;&#x2F;blog.fluance.com&#x2F;wp-content&#x2F;uploads&#x2F;2021&#x2F;05&#x2F;Ported-V...</a>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<a href="https:&#x2F;&#x2F;youtu.be&#x2F;23q3zoKiuGs" rel="nofollow">https:&#x2F;&#x2F;youtu.be&#x2F;23q3zoKiuGs</a>

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

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

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&#x2F;instructions&#x2F;explanations before they are pulled from beneath us.

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.

Does anyone know what tools are used to make the visualizations? They&#x27;re silky smooth and work just as well on mobile as desktop. The elements are just a &lt;canvas&gt; element so I&#x27;m not sure how they&#x27;re populated.Edit: Oh, I think the answer is 6493 lines of artisanally hand-crafted javascript + WebGl. Beautiful.<a href="https:&#x2F;&#x2F;ciechanow.ski&#x2F;js&#x2F;sound.js" rel="nofollow">https:&#x2F;&#x2F;ciechanow.ski&#x2F;js&#x2F;sound.js</a>

Lovely article.
For interactive reading about sound and music,
I also recommend Ableton&#x27;s &quot;learning synth&quot; site.
It leverages web audio capabilities and provides exciting learning resources
about how to create synth music.
<a href="https:&#x2F;&#x2F;learningsynths.ableton.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;learningsynths.ableton.com&#x2F;</a>

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!

Not really identical, but I&#x27;d recommend the course Nand to Tetris (I believe on YouTube&#x2F;also some online platforms) and this introduction to assembly - <a href="https:&#x2F;&#x2F;github.com&#x2F;hackclub&#x2F;some-assembly-required" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;hackclub&#x2F;some-assembly-required</a>

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

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

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&#x27;m wondering if he does not have issues with procrastination or lack of motivation

Looks like vanilla js&#x2F;canvas&#x2F;webgl without any framework: <a href="https:&#x2F;&#x2F;ciechanow.ski&#x2F;js&#x2F;sound.js" rel="nofollow">https:&#x2F;&#x2F;ciechanow.ski&#x2F;js&#x2F;sound.js</a>

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

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.

Apparently it&#x27;s done by hand in WebGL. See the top comment&#x2F;thread in the previous mechanical watch submission.<a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=31261533" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=31261533</a>

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

This is how I imagined textbooks would be when &quot;multimedia&quot; became the dominant discussion in the tech world.This was great.

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.

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

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.<a href="https:&#x2F;&#x2F;en.m.wikipedia.org&#x2F;wiki&#x2F;LMS_color_space" rel="nofollow">https:&#x2F;&#x2F;en.m.wikipedia.org&#x2F;wiki&#x2F;LMS_color_space</a>Similarly, our ears are sensitive to a rather larger number of frequency bins, and and each sensory cell senses one of these bins.Neither of these sensory mechanisms is particularly sensitive to phase and, in fact, we can’t hear phase differences very well.

It&#x27;s more useful in an evolutionary sense to look at a banana and see that it&#x27;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&#x27;s transforming those separate signals into useful information.

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&#x27;t we see multiple frequencies in light waves. I assume it&#x27;s just too fast?

I took a Physics of Sound class for my minor in Physics during undergrad. One of my favorite classes I&#x27;ve taken.

For those looking for more interactive content like this, albeit with more of a game dev focus, I highly recommend <a href="https:&#x2F;&#x2F;www.redblobgames.com" rel="nofollow">https:&#x2F;&#x2F;www.redblobgames.com</a>One of my favorite articles is this one on hex grids: <a href="https:&#x2F;&#x2F;www.redblobgames.com&#x2F;grids&#x2F;hexagons&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.redblobgames.com&#x2F;grids&#x2F;hexagons&#x2F;</a>
it blew my mind the first time I noticed that all the interactions and code change when you toggle between &quot;flat topped&quot; and &quot;pointy topped&quot;.