
Fourier series - guiambros
http://codepen.io/anon/pen/jPGJMK
======
dmvaldman
Until Kepler, astronomers believed planets to move in circular paths, but this
did not match up with experimental data. So it was postulated that they moved
in epicycles (circles of circles of circles ..., as pictured in this codepen)
of varying radii. This model was able to represent all the data astronomers
collected, but did not explain why the radii were what they were.

When Fourier Analysis became a thing 300 years later, it was shown that indeed
any periodic function can be modeled with epicycles of certain radii. That
this epicycle "model" actually didn't simplify anything! It was an isomorphic
way of phrasing the problem, not the solution.

Luckily by then, Kepler had already postulated planets move in ellipses, and
Newton proved that even this was the consequence of the law of gravity.

Occam's Razor FTW.

------
jordigh
Huh, so I never though about it this way. The reason you can use epicycles to
draw anything is because the trig functions form a complete orthonormal
system. Because you can write a Fourier series for any piecewise continuous
function, you can also draw Homer Simpson:

[https://www.youtube.com/watch?v=QVuU2YCwHjw](https://www.youtube.com/watch?v=QVuU2YCwHjw)

------
burger_moon
Here's another project that was posted here a while back that goes into
details explaining different waveforms with examples. It's titled "SEEING
CIRCLES, SINES, AND SIGNALS A COMPACT PRIMER ON DIGITAL SIGNAL PROCESSING".
It's really well put together.

[http://jackschaedler.github.io/circles-sines-
signals/dft_int...](http://jackschaedler.github.io/circles-sines-
signals/dft_introduction.html)

------
725686
A great intro to fourier transforms with same type of animations:
[http://betterexplained.com/articles/an-interactive-guide-
to-...](http://betterexplained.com/articles/an-interactive-guide-to-the-
fourier-transform/)

~~~
hoprocker
Loved this the last(?) time a discussion on Fourier visualizations was on the
front page. These visualizations really help with breakthrough moments.

I'm surprised nobody has yet linked to the video of Fourier series for drawing
Homer Simpson.

~~~
gonzo
posted about the same time you posted:
[https://news.ycombinator.com/item?id=9765025](https://news.ycombinator.com/item?id=9765025)

------
line-o
Wow. Beautiful math. Such insight. Thank you for sharing.

    
    
      var PI2 = Math.PI * 2.0;
    

That should be Math.TAU, right?

~~~
onion2k
Javascript doesn't have a TAU constant in it's Math object (yet). He could
have added it with Math.TAU = Math.PI * 2; though.

~~~
GFK_of_xmaspast
Or alternatively continued to use PI2 like basically everybody else on the
globe who wants to actually use it for things.

------
hemmer
It's interestingly that the Gibbs phenomenon appears visually as a whiplash
effect. You can see how it would only get worse as higher order terms are
included.

------
somberi
One of my favorite questions to Math Candidates, that are potential employees:

In Fourier transform, what is being transformed to what? What is wrong with
how it is that it needs to be transformed?

I am amused at the variety of answers this produces.

~~~
antimagic
OK, I'll take a stab:

The Fourier transform is basically taking a signal, and correlating it against
sinusoids of increasing frequency and unity amplitude. Each point along the x
axis of the new signal is the result of the correlation for that frequency (x
being frequency in this coordinate system).

The transform is used when you want to analyse the frequency content of a
signal - useful when trying to determine frequency filters or bandwidth needs
to transmit the signal, for example.

Edit: (because I hit send too soon) I've always found the purely mathematical
explanation to be easier to understand than explanations involving rotating
circles or whatever. As a bonus, you can directly derive the formula from the
description, and things like Fourier series are a logical extension.

~~~
shanemhansen
What's awesome is that there are so many valid ways to interpret the math. My
favorite way to understand fourier transforms is the linear algebra approach.
You start with the fact that the best approximation for a vector in some
subspace is the projection of that vector onto the subspace. This makes total
sense visually.
[https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Pr...](https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Projection_and_rejection.png/200px-
Projection_and_rejection.png) So if you want to approximate something, it's
really nice if you can make it look like a vector and just do a projection.

After that you just do what mathematicians do, you generalize. It turns out
that if you define addition of functions in a logical way, and if you define
dot product (or inner norm) of 2 functions in a somewhat clever way, you get a
vector space that you can do projections with.

The next thing you do once you have a vector space is figure out a natural set
of basis vectors. For normal 2d space, we pick <1,0> and <0,1>. It turns out
that you get really nice properties if the vectors have a length of one and if
they are at right angles to each other. The concept of right angles can be
generalized by saying their inner product is zero. At that point there's no
more 90 degree angle, but the vectors are still independent in some useful
sense.

It turns out that if you define "multiplication" as multiplying 2 functions
together and looking at the area under them, then basically all the sin and
cos waves are orthogonal. If you multiply by the right factor, you can some up
with a sin wave where the area under the curve is one. So now you have a whole
bunch of "vectors" that are orthogonal and have a "length" of one. So now all
you have to do is measure the component of your target function along each
"axis" of your set of basis vectors and you have an approximation. That
projection is pretty easy. In 2d world if you wanted to "project" <5,6> onto
<1,0> you'd just drop the 6 and get <5,0>. "projecting" x*x along sin(x) is
conceptually pretty similar. It's just defined in terms of the inner norm from
before.

One thing I've left out because they aren't intuitively obvious to me. Sin and
Cos waves form a basis for continuous functions on an interval. That means
that if you can use "all" the sin and cos waves in your approximation, you'll
get the original function back. If they weren't a basis, then your
approximation could only get so good.

So that's my POV. Every time I think of fourier transforms, I think of a
little flashlight shining above a 3d vector that's casting a shadow onto a 2d
plane.

~~~
ska
Another really useful/practical thing from looking at things this (inner
product) way.

You have a function expressed as a weighted sum of basis vectors in your
space: e.g.

f = Sigma_n x_n e_n = Sigma_n <f,e_n> e_n

(for simplicity lets say it is self dual)

then take any approximation g = Sigma_n <g,e_n> e_n

now consider the residual:

f - g = Sigma_n w_n e_n , clearly, for some set of weights {w_n}

So this demonstrates that when you produce an error in approximation, that
error itself is composed of the same building blocks (I know, this is obvious,
but a lot of people miss it!).

This explains why in signal processing the Gibbs ringing effect looks
sinusoidal, and why errors in approximation in Haar look "blocky", etc.

Aside: also, this generalizes nicely to Frame theory where you give up
orthonormality (and hence energy conservation) but gain other things.

------
rtpg
Love a gif version I saw of this recently, so fascinating.

I think this would be neater if it had a small text field, where you could put
in a JS function, and it would do an approximate fourier series based off of a
segment of the function.

Kind of feel like someone should make a page that fully explains all the
levels of this graphic:

\- the circles let you graph f(x)=a*sin(nx+phase) (cosine on the horizontal
projection)

\- attaching the circles is the same as adding, so you actually have a way of
drawing out the first parts of a fourier series

\- any periodic function can be represented through all these spinning circles

------
vruiz
Woah. Where were all these cool visualizations when I was studying physics?!

------
aswanson
These kinds of visualizations are awesome; I remember a site back in the day
during undergrad that helped visualize the fourier components using image
processing. I learned so much more from that site than watching a professor
scribble out the formulae on a chalkboard.

------
sold
See also [http://www.quora.com/What-is-an-intuitive-way-of-
explaining-...](http://www.quora.com/What-is-an-intuitive-way-of-explaining-
how-the-Fourier-transform-works)

------
agumonkey
Pseudo-Mechanical representations of Fourier series are everywhere these days,
it's impressive how dry college math can hide the simplicity of an 'object',
composition of rotations, turned into algebra.

------
cousin_it
So wavy, when all I wanted was a straight line! I'd like a series that can
approximate not just the values of a function, but all its derivatives as
well.

~~~
jordigh
For smooth functions, the Fourier series also approximates the derivative. The
waviness you're seeing here is due to the Gibbs' phenomenon, since you're
approximating a discontinuous function. This is not a very tragic loss, since
the derivative does not even exist where the waviness is the worst.

~~~
cousin_it
Ah, of course, I see. Thanks!

------
joe563323
This is just awesome. Thank you so much. I really wish to view more blog posts
by the author of this code. Sadly it has been published as anonymous.

~~~
joajoa
It was written by André Michelle ([http://andre-michelle.com/](http://andre-
michelle.com/))

~~~
joe563323
How did you find it? How to verify if it is the same author.

~~~
beeswax
Jumping to conclusions here but: \- André has been involved with audiotool, as
joa did quite a while ago \- They are (former?) colleagues \- André has quite
a background in terms of applied signal processing, harmonics etc (I believe I
first learnt about Karplus-Strong by a talk he gave in Cologne a few years
back)

------
fnordfnordfnord
Another, prior art, so to speak.
[https://www.youtube.com/watch?v=NAsM30MAHLg](https://www.youtube.com/watch?v=NAsM30MAHLg)

A series of four videos detailing the operation of a mechanical computer for
plotting Fourier series.

------
lancefisher
So are people dropping the data- prefix in custom attributes now? e.g.
input[frequency]

~~~
namanyayg
Doesn't seem to serve any purpose too. Simply could've used a class there.
Would be interesting to know why the author did so.

~~~
marrs
Probably because there were fewer characters to type and it's slightly easier
to read.

------
jcpst
Very cool. My only concern is if you have a screen with a lower resolution
(1366 X 768), the drawer with the source code causes the user controls to be
hidden, so it's not immediately obvious that those controls exist.

~~~
KeytarHero
Same goes for if you have a bigger screen but don't maximize your browser.

Windows has terrible virtual desktop support; as a result, I don't usually
scale windows to full screen so I can actually keep multiple windows straight.
One of my big pet peeves is when websites don't scale well to smaller width or
height (height seems to be particularly neglected by web developers).

------
cturhan
Here is another version[1] made by D3.js

[1] [http://bl.ocks.org/jinroh/7524988](http://bl.ocks.org/jinroh/7524988)

------
bshimmin
I'd be seriously impressed if someone could do this just using CSS.

(I was pretty impressed already, to be fair.)

------
bcheung
Anyone know how they figured out the coefficients for the Homer Simpson one?

------
otoolep
This is really cool.

------
mosdave
damnit this would have been useful in my Signals I course...

------
sotaan
nice work!

