6 ms·
Fourier Series Visualisation with D3
- MarkLowenstein 5y agoLove how tau is defined as a constant in there. Word is spreading!
- erikschoster 5y agoWould 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!
- protomikron 5y agoThere'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.
- erikschoster 5y agoAh, OK I was on the completely wrong track. Thanks for explaining!
- 6gvONxR4sf7o 5y agoTo add to this, it's specifically because 2*pi (and forms of it like 4*pi^2) show up so frequently.
- nayuki 5y agoThe Tau Manifesto by Michael Hartl: https://tauday.com/tau-manifesto https://tauday.com/tau-manifesto
- simonw 5y agoI 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.
- 123pie123 5y agoThe math(s) got me!! pages upon pages upon pages nice demo, but this site is great as well https://www.myfourierepicycles.com/ https://www.myfourierepicycles.com/ you can draw your own picture and it converts it to FT
- kowlo 5y agoGreat work! Also nice to see some recent D3.js work that isn't on observerable.
- occamrazor 5y agoIt is on bl.ocks.org, which is managed by Mike Bostock, the founder of Observable. And there is an Observable banner on top.
- mirekrusin 5y agobl.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 https://observablehq.com/@mirek/predule-parser-csv
- nhinck 5y agoThe move to observable really killed my enthusiasm to continue using d3js in projects.
- contravariant 5y agoPerhaps 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 https://en.wikipedia.org/wiki/Analytic_signal
- jimmySixDOF 5y agoId 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.
- nitrogen 5y agoBy 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.
- ruph123 5y agoHave 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.
- kowlo 5y agoWhy would it be deliberately obtuse?
- zsmi 5y agoDoes 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.
- ruph123 5y agoI don't have a license (anymore) sadly. But thank you!
- buescher 5y agoWhich literature has seemed obtuse to you? What is your background?
- blippage 5y agoProf Allen Downey published a book called Think DSP: https://greenteapress.com/wp/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."
- cabalamat 5y agoFrom 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.
- siddboots 5y agoMaybe 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.
- cabalamat 5y agoHere'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%.
- Cogito 5y agoYour 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.
- cabalamat 5y ago> 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.
- EdvardM 5y agoI'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.
- sidpatil 5y ago> 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?
- melony 5y agoNot specific to Fourier but an optimized FFT implementation can be used in many places as a stand-in for convolution.
- petschge 5y agoIt'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.
- EdvardM 5y agoThere'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
- doctorhandshake 5y agoWow. 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.
- _448 5y agoLooking 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 https://www.youtube.com/watch?v=ds0cmAV-Yek
- tasty_freeze 5y agoIf 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 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.
- qwertox 5y agoThank 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_key_works/ https://www.reddit.com/r/gifs/comments/ptyges/how_a_piano_ke...
- drio 5y agoCool! Thank you for sharing. I wrote a similar version myself recently: https://observablehq.com/@drio/visualizing-the-fourier-series 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-machines https://observablehq.com/@drio/fourier-series-part-2-machine... Thank you, Fourier!