Fourier Series Visualisation with D3 | Hacker News Reader

Fourier Series Visualisation with D3

bl.ocks.org

257 pointscolinprince45 comments

Perhaps interestingly this visualisation technically depicts only half of the Fourier transform. The full transform adds the exact mirror image of each circle to cancel out the horizontal movement (which is usually drawn vertically, but this visualization swaps the real and imaginary axes).

This means that what this visualisation effectively depicts is the analytical signal [1] which is what you get when you use the hilbert transform to 'recover' the imaginary part of the original signal. This transformation is convenient as it allows you to determine the instantaneous phase and amplitude at each point in time, so you can calculate a frequency and volume for every single moment in time.

[1]: https://en.wikipedia.org/wiki/Analytic_signal

Id like to see what this would look like in a 3D model visualization similar to what 3blue1brown produce. These graphics communicate math so much better and are the perfect fit for AR/VR.

By sheer coincidence, I've been working on a couple of videos that explain analytic signals using 3D animations from my own animation engine, and why they're useful. I hope to upload the first one in the next week.

A link to my channel is in my HN profile, if you're interested in the earlier videos in the series.

Just watched your video on Voronoi diagrams, Delaunay triangulations, and natural neighbor interpolation. Great stuff. Please keep it up

Thanks!

In case anyone comes across this thread in the future, I've uploaded the video that covers analytic signals: https://www.youtube.com/watch?v=iyjIVSnrPSo

FFT section starts at 4:33, analytic signals come up at 7:20.

If you like this, you might also like Bill Hammack's series on a mechanical version of a fourier synthesizer (OK) and analyzer (wow!). Although it is multiple parts, each one is very short.

https://www.youtube.com/watch?v=NAsM30MAHLg

As a side note, the guy who designed it was Michelson, famous for the Michaelson/Morley experiment that disproved the existence of the luminiferous ether.

Thank you! I've just watched the second video and it is amazing.

It reminded me of a Reddit post I saw a couple of hours ago:

"How a piano key works"

https://www.reddit.com/r/gifs/comments/ptyges/how_a_piano_ke...

Cool! Thank you for sharing. I wrote a similar version myself recently:

https://observablehq.com/@drio/visualizing-the-fourier-serie...

and I have a follow up that I call Alien Machines:

https://observablehq.com/@drio/fourier-series-part-2-machine...

Thank you, Fourier!

I'm a simple guy. I see anything related to Fourier series/transform, me like. To me, it's like solution to at least 16% of all the problems I have. My only gripe is that I can't thank Fourier personally for the genius he had.

> To me, it's like solution to at least 16% of all the problems I have.

What are some examples of problems you've solved with Fourier series/transforms?

Not specific to Fourier but an optimized FFT implementation can be used in many places as a stand-in for convolution.

It's not so much a stand-in as the possibility to compute convolutions (and auto-correlation and cross-correlation) really easily and cheaply in Fourier space.

There's a good list in Wikipedia for FFT (though it's a bit more specific than just FT, but still application of it):

- fast large-integer and polynomial multiplication, - efficient matrix–vector multiplication for Toeplitz,- circulant and other structured matrices, - filtering algorithms (see overlap–add and overlap–save methods), - fast algorithms for discrete cosine or sine transforms (e.g. fast DCT used for JPEG and MPEG/MP3 encoding and decoding), - fast Chebyshev approximation, - solving difference equations, - computation of isotopic distributions.[47] - modulation and demodulation of complex data symbols using orthogonal frequency division multiplexing (OFDM) for 5G, LTE, Wi-Fi, DSL, and other modern communication systems.

And naturally for any time-based signal about half a gazillion applications due to it's ability to detect "traits" which can be stored/read efficiently due to time => freq transform

I had so much trouble getting my head around Fourier transforms at University back in the 2000s - and now interactive diagrams like these make the whole concept click almost instantly. Love these.

The math(s) got me!! pages upon pages upon pages

nice demo, but this site is great as well

https://www.myfourierepicycles.com/

you can draw your own picture and it converts it to FT

Have there been any new interactive learning materials come up that explain signal processing, fourier series, laplace transformations, etc. to mere mortals?

Everytime I want to understand control theory better I stumble over this and the literature is often quite (deliberately?) obtuse.

Why would it be deliberately obtuse?

Does matlab count as an interactive learning material?

If it does then I can recommend Practical Signals Theory with MATLAB Applications by Richard J. Tervo

Lots of real world examples of systems and signals in a level appropriate for a first DSP class.

Honestly it's kinda like linear algebra in that everyone has their own favorite and there is a place for many styles. The best thing is to go a nearby college library and look at a lot of them and find an author that speaks to you.

I don't have a license (anymore) sadly. But thank you!

Which literature has seemed obtuse to you? What is your background?

Prof Allen Downey published a book called Think DSP: https://greenteapress.com/wp/think-dsp/

It can be bought, but is available for free. Code is also available via GitHub. It uses Python and Jupyter.

"The premise of this book (and the other books in the Think X series) is that if you know how to program, you can use that skill to learn other things. I am writing this book because I think the conventional approach to digital signal processing is backward: most books (and the classes that use them) present the material bottom-up, starting with mathematical abstractions like phasors."

Great tip, thank you!

understanding digital signal processing by lyons is a classic.

of the standard texts, my favorite was the proakis one.

also used linear systems and signals by lathi in school, it was okay.

I'm not sure you know it, since it isn't new, but this is pretty neat:

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

It's also done with (an old version of) d3.

Wow this is pretty much what I had in mind, thank you so much!

Looking at the visualisation in the above link, I remembered this[0] video I saw a few days back.

[0] https://www.youtube.com/watch?v=ds0cmAV-Yek

Wow. I’ve been using FFT for more than 20 years but never understood the underlying math better than I did after about 10 seconds of watching this animation.

Great work! Also nice to see some recent D3.js work that isn't on observerable.

It is on bl.ocks.org, which is managed by Mike Bostock, the founder of Observable. And there is an Observable banner on top.

Indeed, those facts didn't escape me. But like I said: nice to see some recent D3.js work that isn't on observerable.

I really don't mean to be an ass, but since you misspelled it twice I believe you might want to know that it's spelled ObservABLE, not ObservERABLE.

bl.ocks.org is little brother of observable. Observable grew from it. Personally I like observable for experimenting with interactive tutorials for npm packages, ie [0].

What I'm missing is typescript support, otherwise it's really cool.

[0] https://observablehq.com/@mirek/predule-parser-csv

The move to observable really killed my enthusiasm to continue using d3js in projects.

Love how tau is defined as a constant in there. Word is spreading!

Would you mind elaborating a little or pointing us toward where we can read more about this?

I just (more-or-less blindly, not grokking the actual math behind it) ported the yin algorithm from someone else's implementation this year and tau was defined as a range where tau min is samplerate / freq_max and tau max is samplerate / freq_min where freq_min and freq_max are the bounds of the detection algorithm, at least as I understood it. My port works but I never really understood tau (except as I described) -- if there's a way I can refactor this with a fixed tau that would be very interesting!

There's some more or less serious discussion, that instead of using π = 3.14... (Pi) in formulas, we should adopt τ = 6.28... (Tau). Proponents claim, that it would simplify many formulas that include the term "2π".

For example the circumference on the unit circle is 2π and would become just τ if we adopted it as a constant.

Ah, OK I was on the completely wrong track. Thanks for explaining!

To add to this, it's specifically because 2*pi (and forms of it like 4*pi^2) show up so frequently.

The Tau Manifesto by Michael Hartl: https://tauday.com/tau-manifesto

From the code:

    function FT(A, N, φ) {
        φ = φ || 0;

Just don't. Identifiers should start with [A-Za-z_] and contain [A-Za-z0-9_] and no other characters.

Maybe where you’re from that’s the accepted convention, but in some domains (e.g., scientific computing, statistical programming) it is common to mix in Greek letters . If the symbol is widely understood, it absolutely makes sense to use it.

Here's a program with 3 identifiers. One uses Latin alphabet, one Greek and one Cyrillic. Can you tell which is which?

   Κ = 1
   K = 2
   К = 3

As for "widely understood", consider a program that uses 10 Greek symbols each of which is known by 90% of programmers (a high estimate IMO). If the program is looked at by 10 programmers, the probability that they'll all know the symbols is 0.0027%.

Your example is misleading because of your choice of characters (and to some degree typeface), not your choice of alphabet. You would have the same problem (and people have had the problem) using the characters 1, I, and l in identifiers.

This argument does not apply to the original example and it's an odd argument to make.

The biggest downside to using 'φ' over 'phi' is how hard the first is to type on most keyboards, and how it might be harder to google (although I just tested and copy+paste+search gives me the right answer immediately).

I'm a fan of reducing jargon, but this is a very standard symbol and I like its use in a codebase - especially one targeted at people studying mathematics.

> but this is a very standard symbol [...] especially one targeted at people studying mathematics

I've studied maths at university level and I didn't recognise phi (I thought of it as "that squiggle") in that context.

I mean I probably could've guessed it's name was psi or phi or somesuch, but I certainly wouldn't have been sure.

Reply on news.ycombinator.com