[HN Gopher] Fourier Series Visualisation with D3
___________________________________________________________________
Fourier Series Visualisation with D3
Author : colinprince
Score : 151 points
Date : 2021-09-23 18:04 UTC (4 hours ago)
(HTM) web link (bl.ocks.org)
(TXT) w3m dump (bl.ocks.org)
| MarkLowenstein wrote:
| Love how tau is defined as a constant in there. Word is
| spreading!
| erikschoster wrote:
| 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!
| protomikron wrote:
| There's some more or less serious discussion, that instead of
| using p = 3.14... (Pi) in formulas, we should adopt t =
| 6.28... (Tau). Proponents claim, that it would simplify many
| formulas that include the term "2p".
|
| For example the circumference on the unit circle is 2p and
| would become just t if we adopted it as a constant.
| erikschoster wrote:
| Ah, OK I was on the completely wrong track. Thanks for
| explaining!
| simonw wrote:
| 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.
| 123pie123 wrote:
| 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
| doctorhandshake wrote:
| 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.
| cabalamat wrote:
| From the code: function FT(A, N, ph) {
| ph = ph || 0;
|
| Just don't. Identifiers should start with [A-Za-z_] and contain
| [A-Za-z0-9_] and no other characters.
| siddboots wrote:
| 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.
| kowlo wrote:
| Great work! Also nice to see some recent D3.js work that isn't on
| observerable.
| mirekrusin wrote:
| 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
| occamrazor wrote:
| It is on bl.ocks.org, which is managed by Mike Bostock, the
| founder of Observable. And there is an Observable banner on
| top.
| kowlo wrote:
| Indeed, those facts didn't escape me. But like I said: nice
| to see some recent D3.js work that isn't on observerable.
| EdvardM wrote:
| 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.
| sidpatil wrote:
| > 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 wrote:
| Not specific to Fourier but an optimized FFT implementation
| can be used in many places as a stand-in for convolution.
| contravariant wrote:
| 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
| ruph123 wrote:
| 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.
| kowlo wrote:
| Why would it be deliberately obtuse?
| buescher wrote:
| Which literature has seemed obtuse to you? What is your
| background?
| zsmi wrote:
| 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.
| ruph123 wrote:
| I don't have a license (anymore) sadly. But thank you!
| a-dub wrote:
| 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.
| sva_ wrote:
| 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.
| ruph123 wrote:
| Wow this is pretty much what I had in mind, thank you so
| much!
| blippage wrote:
| 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."
| ruph123 wrote:
| Great tip, thank you!
___________________________________________________________________
(page generated 2021-09-23 23:00 UTC)