Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Fourier series visualisation with D3.js (ocks.org)
170 points by bprs on April 7, 2014 | hide | past | favorite | 19 comments


Just in case anybody seeing this missed the post earlier:

Article: https://news.ycombinator.com/item?id=7543691 Fourier Discussion: https://news.ycombinator.com/item?id=7544481

Direct link to Fourier animation: http://math.stackexchange.com/a/738048

More advice from the discussion: http://betterexplained.com/articles/an-interactive-guide-to-...


Wow, that's awesome.

Speaking of fourier, you need to see this http://en.m.wikipedia.org/wiki/File:Fourier_transform_time_a...


Oh yeah, I ignored this at first because I just saw wikipedia, but it's the same animation that was discussed in the other HN post.


  function FT(A, N, φ) {
    φ = φ || 0;
    return function(x) {
      var n = -1, y = 0;
      while (++n < N) {
        y += A[n] * Math.sin(τ * (n + 1) * x + φ);
      }
      return y;
    }
  }
hehe, seems annoying to type. Copy&paste everytime one of them is needed?


In Vim using digraphs:

    Ctrl-K f *   →   φ
    Ctrl-K t *   →   τ
In general:

    Ctrl-K <latin letter> * → <greek equivalent>


I love Vim's digraphs!

In emacs it's

    C-| tex
then

    \phi → φ
etc, which can be quite a bit more typing but can be easier to remember if you already know the TeX instructions for everything.

Now we just need to convince other editors to add something similar...


I think you mean C-u C-\ and then change the input type to tex.

There are other ways of inputting digraphs: C-x 8 RET lets you enter the name of any unicode symbol.

I wrote about the many ways of inputting digraphs and unicode here:

http://www.masteringemacs.org/articles/2010/10/13/diacritics...


You're right, thanks. But C-u doesn't seem to be necessary, unless I have a strange setup.


search and replace as the last launch step


This is incredible. The linked circles perfectly illustrate how complex functions can be constructed from many superimposed sine waves. I'm very happy with this new knowledge! :)


Amazing how little code is needed to make this!


Amazing. The real-time application of this is extremely powerful.


Powerful indeed. Imagine a lot of such "math demos" --- one for each equation/principle/concept in math. Instead of just the plot of a graph, you have a "toy" that you can play with.

I never knew about <input type="range" ... but will be sure to play with it.


Employing similar visualizations for other Numerical Methods would also be interesting to view.


The sawtooth wave seems more pathological than it should be.


really impressive. note, if you accidentally add a / in one of the input fields, it gets a bit wonky and only refresh will repair it.


It's amazing.. very simple code !


Really nicely implemented


Impressive stuff!




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: