Show HN: Interactive Essay on Signals, Sampling and the Fourier Transform | Hacker News Reader

Show HN: Interactive Essay on Signals, Sampling and the Fourier Transform

jackschaedler.github.io

293 pointsjackschaedler43 comments

Normally I'd just upvote and move on, but this is really fucking good. For example, I wish I could have seen something like that "Sine Wave Aliasing" page when I was learning this stuff, would have saved me a lot of confusion.

Thanks! Let me know if there are other topics you'd like covered, or areas that need more explanation.

Another topic that has confounded me as much as FFTs are Quaternions.

Take a look at geometric algebra.

http://www.geometricalgebra.net/

http://en.m.wikipedia.org/wiki/Geometric_algebra

That's not quite the same, but worth reading up on anyway.

The quaternions are a subalgebra of geometric algebra. It's not quite the same in that it's strictly more general and, therefore, more broadly applicable.

I found this example by Steven Wittens to be remarkably well done: http://acko.net/blog/animate-your-way-to-glory-pt2/

See the section "Blowing up the Death Star" and note that there are 100 parts total.

"So that's quaternions, the magical rotation vectors."

This is great! I'd love to see sections on convolution, the Dirac delta function, and the continuous (possibly multi-dimensional) Fourier transform.

Seconded on convolution and the Dirac delta.

This is awesome. Congratulations! It should be thrown in the face of the textbook publishing industry that still charges $100+ dollars for yearly reprints of paper bricks.

This is what the textbooks should be in the 21st century! Outstanding work and hopefully it will inspire new generation of academics to take the outdated textbook publishing monopolies out of the loop in the future.

This is one of the best pieces of expository writing I've ever seen. I particularly love the interactive phasor visualisation here: http://jackschaedler.github.io/circles-sines-signals/dft_int...

I wish they could have done things like this when I was learning signals and transforms as an undergrad. But interactive didn't really exist in the early 90s.

This is an _incredibly_ well-crafted piece of work. I mean -- my god -- the pressure wave animation? [1]

1: http://jackschaedler.github.io/circles-sines-signals/sound.h...

The D3 animations work great for me in Chrome, but my Firefox is choking on them - especially this one.

As a side note, the pressure that is waxing and waning in that diagram is very very small compared to atmospheric pressure.

The actual air molecules are moving at a much higher speed (the root mean squared velocity is dependent on the temperature). But if we imagine that these are weightless dust particles suspended in air, the diagram is accurate.

Like!! It took me a while to chew through signals and FT back in school (before the web) so I really appreciate how this is bringing browser-based animations to the general public. It's a lot easier to understand that way.

This is a wonderful piece of work. Exceptionally clear writing and excellent use of interactivity.

One minor bug report, the mathematical pi symbol (U+1D6D1) used in the unit circle doesn't appear to be displayed correctly (Chrome 40, Windows 7): https://i.imgur.com/zt0HDLO.png. It's okay in Firefox though.

Really great. One nitpick: I looked 10 seconds for "Next" link. Would be better as a single article IMO.

I registered an account just to say thanks, this is brilliant! Exactly what I was looking for.

Wow, that really means a lot. Thank you! Really glad to hear that you are finding it useful. Please send along your feedback and questions if anything doesn't make sense or is poorly communicated in the text/visualizations.

This is truly outstanding. I'd love to see an entire series done like this.

Maybe you could Kickstarter this, and use it as a template for a series of DSP/Electronics/Physics titles?

Absolutely! I would gladly contribute to a Kickstarter fund to pay for your efforts. I am sure I am not the only one...

It seems like the equation processing gets messed late in section 4 - $$ \mathrm{DFT}[k] = \sum_{n=0}^{N-1} \mathrm{x}[n] \cdot (cos(\varphi) - sin(\varphi)i) \\ where \quad \varphi = k \frac{n}{N} 2\pi $$

https://jackschaedler.github.io/circles-sines-signals/dft_wa...

there are a few other examples in section 5

Aside from that, this is really great.

That's because you're accessing the site from HTTPS, or you have HTTPS Everywhere installed which is doing it for you. I think he's loading MathJax as HTTP, which means it gets blocked because it's coming from an insecure connection.

Ah! Thank you so much.

Thanks for this observation; I've commented on the existing GitHub issue to add this information.

https://github.com/jackschaedler/circles-sines-signals/issue...

This is fantastic. I've been looking for something exactly like this to learn DSP. My brain learns best with kinds of resources. Well done!

This is incredible. I wish more professors in universities incorporated this stuff in their teaching. I occasionally use Wolfram Demonstrations: http://demonstrations.wolfram.com/

But you take it to another level! Congratulations!

Really nicely done. Thanks for sharing!

Did you use a tool to make the interactive diagrams, or just write all of them by hand?

(I can imagine myself forever tweaking each diagram, and having to cut back on them, but you've created them everywhere they might be useful - it's a fantastic site)

Hi Jack, awesome work! Did you write the HTML by hand or did you use or write some static generator? I'd love to have sidenotes like yours automatically generated and positioned.

I can't speak to how he did it, but it looks like he's just using tables and line breaks & divs to separate sections. You could easily do that by hand.

Alternately, you could use Bret Victor's technique from "Magic Ink": write a paragraph followed by a span, typically with absolute positioning. http://worrydream.com/#!/MagicInk

Incredibly well crafted site. Blasted my eardrums on the sine wave generator. I could only hear up to 18kHz now...feel like I'm getting old.

The dynamic visualizations are terrific here, I find that signals problems in textbooks are hard to understand when they are static. Awesome job!

This is the future of textbooks.

Wow !

Me being PG in wireless (electircal engg), this should have been in the curriculum :)

Someone should write a digital linear algebra textbook in this style.

This is great! Please write interactive articles on similar topics.

This is so, so cool. I wish this is what all textbooks were like.

Outstanding work, very well written, and very helpful. Thank you

Nice work, this is great stuff.

Awesome! Thanks for this.

This is simply beautiful

Reply on news.ycombinator.com