Fourier series

by guiambros • 11 years ago

244 47 11 years ago

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

namanyayg• 11 years ago

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• 11 years ago

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

retroencabulato• 11 years ago

Let's talk about the content of this demo, not the implementation.

benihana• 11 years ago

No, let's talk about both. There's a reason this was posted to codepen with code that isn't obfuscated.

rtpg• 11 years ago

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

otoolep• 11 years ago

This is really cool.

vruiz• 11 years ago

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

line-o2• 11 years ago

Wow. Beautiful math. Such insight. Thank you for sharing.

  var PI2 = Math.PI * 2.0;

That should be Math.TAU, right?

onion2k• 11 years ago

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.

line-o2• 11 years ago

Exactly.

GFK_of_xmaspast• 11 years ago

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

cosmolev2• 11 years ago

It's much better than this:

https://github.com/torvalds/linux/blob/d158fc7f36a25e19791d2...

daniel-levin• 11 years ago

OK, what the hell is going on here?

sotaan• 11 years ago

nice work!

joe5633232• 11 years ago

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• 11 years ago

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

joe5633232• 11 years ago

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

burger_moon• 11 years ago

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...

sold• 11 years ago

bshimmin• 11 years ago

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

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

agumonkey• 11 years ago

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.

hemmer• 11 years ago

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• 11 years ago

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.

JoeAltmaier• 11 years ago

Isn't that essentially a glossary question? But I'm sure the inventive answers are priceless.

antimagic• 11 years ago

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• 11 years ago

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... 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.

jcpst• 11 years ago

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• 11 years ago

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• 11 years ago

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

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

aswanson• 11 years ago

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.

725686• 11 years ago

A great intro to fourier transforms with same type of animations: http://betterexplained.com/articles/an-interactive-guide-to-...

hoprocker• 11 years ago

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• 11 years ago

posted about the same time you posted: https://news.ycombinator.com/item?id=9765025

jordigh2• 11 years ago

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

mosdave• 11 years ago

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

dmvaldman• 11 years ago

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.

cousin_it2• 11 years ago

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.

jordigh2• 11 years ago

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_it2• 11 years ago

Ah, of course, I see. Thanks!

gp7• 11 years ago

http://codepen.io/anon/pen/VLrppy

fnordfnordfnord• 11 years ago

Another, prior art, so to speak. https://www.youtube.com/watch?v=NAsM30MAHLg

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

bcheung• 11 years ago

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

Fourier series

Related Stories