Fourier series(codepen.io)
codepen.io
Fourier series
http://codepen.io/anon/pen/jPGJMK
24 comments
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
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_int...
A great intro to fourier transforms with same type of animations: http://betterexplained.com/articles/an-interactive-guide-to-...
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.
I'm surprised nobody has yet linked to the video of Fourier series for drawing Homer Simpson.
posted about the same time you posted: https://news.ycombinator.com/item?id=9765025
Wow. Beautiful math. Such insight. Thank you for sharing.
var PI2 = Math.PI * 2.0;
It's much better than this:
https://github.com/torvalds/linux/blob/d158fc7f36a25e19791d2...
https://github.com/torvalds/linux/blob/d158fc7f36a25e19791d2...
OK, what the hell is going on here?
"powers of three" - see the comment on line 653 [1] of the same file
[1] https://github.com/torvalds/linux/blob/d158fc7f36a25e19791d2...
[1] https://github.com/torvalds/linux/blob/d158fc7f36a25e19791d2...
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.
Or alternatively continued to use PI2 like basically everybody else on the globe who wants to actually use it for things.
Exactly.
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.
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.
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.
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.
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.
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.
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.
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.
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.
[deleted]
[deleted]
Isn't that essentially a glossary question? But I'm sure the inventive answers are priceless.
[deleted]
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
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
Woah. Where were all these cool visualizations when I was studying physics?!
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.
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.
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.
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.
Ah, of course, I see. Thanks!
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.
It was written by André Michelle (http://andre-michelle.com/)
How did you find it? How to verify if it is the same author.
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)
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.
A series of four videos detailing the operation of a mechanical computer for plotting Fourier series.
So are people dropping the data- prefix in custom attributes now? e.g. input[frequency]
Let's talk about the content of this demo, not the implementation.
No, let's talk about both. There's a reason this was posted to codepen with code that isn't obfuscated.
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.
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).
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).
Here is another version[1] made by D3.js
[1] http://bl.ocks.org/jinroh/7524988
[1] http://bl.ocks.org/jinroh/7524988
I'd be seriously impressed if someone could do this just using CSS.
(I was pretty impressed already, to be fair.)
(I was pretty impressed already, to be fair.)
Anyone know how they figured out the coefficients for the Homer Simpson one?
This is really cool.
damnit this would have been useful in my Signals I course...
[deleted]
nice work!
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.