I struggled for a long time to understand the Fourier transform, using visual materials like 3b1b [1] and betterexplained [2].
Eventually it clicked when considering the Discrete Fourier transform [3], which is just an orthogonal matrix you multiply onto a vector.
All the stuff about the inverse FFT, Plancherel theorem and Parseval's theorem come for free: they just say that the matrix is orthonormal.
Maybe this only works if you've already invested in understanding linear algebra. But once I had this discrete understanding, back porting it to the continuous Fourier transform was easy enough.
Maybe I'm weird, but this was a case where just looking at the equations was much easier than all the animations of circles and stuff.
I felt like it made total sense when I understood the idea of a basis, plus
"sinusoids are a basis for (a class of functions)"
Everything else basically follows from that. The Fourier transform itself integrates (in one notation) e^{-ikx} against f(x). Well, the integral is a giant dot product, e^{-ikx} is the "transpose" of e^{ikx}, one of the basis vectors, so this amounts to saying f_i = <e_i, f> for a basis element e.
The circles never really bothered me, in the end one circle just gives you the value/time of a partial sine wave. Instead of nesting them you could just put one partial into each row and add them up down below.
That's a really interesting case, and my gut feeling is that you are definitely very weird lol, not that that's a bad thing. How do you end up understanding linear algebra but turning to youtube videos to understand the fourier transform? My gut feeling is that 99% of people who understand linear algebra would learn fourier transforms through the same mechanism they used to learn advanced math (textbooks, university courses, etc) where the default way of introducing the subject would be something like 'just an orthogonal matrix you multiply onto a vector,' an otherwise unintuitive explanation that leaves a void that said youtube videos are trying to fill. For example the 3b1b video has to gently re-introduce why complex numbers are useful - different target audience you know?
People who are good at algebra aren’t necessarily good at calculus/analysis and vice versa. It sounds perfectly reasonable that someone might struggle with the continuous FT (integrals, brrh!) but grok the discrete version perfectly well (just a sum of basis functions).
Heh, my college signals courses first taught continuous time systems then focused on discrete time in a follow-up course. They assumed you knew enough calculus at the start that Laplace transforms wouldn't be a huge hurdle, even if you hadn't seen them before. Discrete time / Z-transform was treated as more "advanced".
But I agree, I've done enough integrals for a lifetime!
Computer scientists and programmers live in an inherently discrete world where there’s algebra everywhere you look but very little calculus outside certain niches. I’m reminded of the Feynman and the Connection Machine story [1] where he ended up analyzing some complex binary circuits in terms of differential equations because as a physicist he lived and breathed the continuum – unlike his computer engineer coworkers!
> How do you end up understanding linear algebra but turning to youtube videos to understand the fourier transform?
As a computer scientist I never actually had a calculus class where we used fourier series.
I just ran into them often enough, through stuff like the fast fourier transform for computing convolutions, that I thought I should understand it better.
So I googled the topic, and stuff like 3b1b is what came up, and what everyone said were the most intuitive explanations.
I eventually did a course on binary functional analysis, and it thought the discrete boolean fourier transform.
My experience has been the same: all these intuitive and visual explanations of math/physics stuff on YouTube/else just makes me "feel" like I learnt it, but then as soon as I need to use it in practice, I realize the only thing that actually gets the job done is some solid math equations, no questions asked. I still do all the proofs for math subjects in order to know I can derive them.
It's unfortunate, and I wish just watching such beautiful visuals would magically instill the idea in my brain, but it just feels like intellectual dopamine for me.
It probably happens most frequently in math. And people usually first realize it when they're sitting in the exam room and have to actually apply what they think looked so easy on YouTube. I may or may not speak from personal experience
I agree.
I much prefer the clean math language as well. I guess some people can process abstraction better than others. Fourier series are just a topic in approximation theory, which is a rich area.
It's sad to see that the educational system stayed generalized, and never customized to each person's mental capabilities, I always find neat articles discussing different topics from a totally different perspective. If only these existed back then when I was a studen.
You are not weird; you are just differently wired.
I find beauty in the fact that a bunch of circles are spinning on a stick (axis) with increasing frequencies, and if sum up their "tracks", you end up approximating shapes.
This is how people who lived before you did it. It's math. You can just read what they had to say instead of pretending a YouTube video or comic is actual hard won knowledge.
Nobody has anything more to say about Fourier series than what Walter Rudin figured out long ago. They can be defined for any locally compact abelian group. They are just trying to teach themselves about what is established theory.
As far as I know Rudin focuses on Fourier analysis on locally compact Abelian groups. There's been plenty of attention paid to doing Fourier analysis on other objects, especially compact Lie groups or symmetric spaces.
Of course there are people who would say that this isn't Fourier analysis anymore but the same ideas are still at play.
Fair enough. I'm just verklempt about the plethora of purported tutorials that barely scratch the surface. Sit down with a textbook. Read it. Think hard and do the problems. Watching cartoon animations is not learning the subject.
Excuse me, I've got a lot of clouds that need to be yelled at.
It's not something I am particularly proud of, as I was learning p5.js while writing the article, so I've started doing things in a very inefficient way.
When I have some spare time, I will update the article accordingly to include the correct links.
This post has the entirety of the post as a download if you scroll to the bottom and click the view source link. You can download a Svekyll blog that can be compiled with "npm run build" so you can hack the code yourself.
I think Svelte is an incredible tool for building these kinds of animations. I would be very curious to see how/if you would compare processing and Svelte, Andre?
God, I love Processing. Most beautiful programs I’ve ever written were in Processing. I had this plan to recover from atypical depression by visualizing all of basic linear algebra using Processing but… I couldn’t program a computer for some time. Doh!
Great article! I like that it starts with circles and complex numbers ans builds up from there. Some other explanations try to only throw in complex numbers in the end.
If you are interested in this topic you might also like my visualization of a fractional fourier transform [1] and the complex plane [2]
Very nice! I feel like I have a decent understanding of the Fourier transform, and it receives much love out there in terms of coverage, cool visualizations, etc.
For the people out there who enjoys working in explainers ... maybe consider covering the Laplace transform too? [1] I used to know how to use it to analyze electronic circuits, but I kinda forgot all about it by now (oops :-p) so this is my lazy ask :-).
Seeing an epicycles animation years ago did wonders for my understanding of the complex representation of Fourier series, and I’ve been looking for that animation ever since to share with others getting into signals for the first time. This post far surpasses that page though! Excellent work, excited to share it with people in the future.
> Convolution is in fact multiplication in Fourier space (this is the convolution theorem [1]) which says that Fourier transforms convert convolutions to products. 1. https://en.wikipedia.org/wiki/Convolution_theorem :
>> In mathematics, the convolution theorem states that under suitable conditions the Fourier transform of a convolution of two functions (or signals) is the pointwise product of their Fourier transforms. More generally, convolution in one domain (e.g., time domain) equals point-wise multiplication in the other domain (e.g., frequency domain). Other versions of the convolution theorem are applicable to various Fourier-related transforms.
Thanks, great examples and wonderful website. It’s crazy how this site is handled with ease, yet most static news sites I visit constantly crash my browser.
This is a personal blog, and I haven't 'tested' the article on too many devices. I don't have the time or the capacity to do so.
A thing I've noticed is that on some phones is very choppy (the code behind the animation is not the greatest), but I don't understand why it would refresh your browser. What phone / browser are you using, out of curiosity ?
Mobile Safari on iOS 17.5.1 - I noticed it happens when zooming in and out (to better see the graphs). Good luck, I hope you are able to find a solution.
I only got FFT after following the course `Introduction to Graduate Algorithms`( Georgia Tech) and implementing everything from the lectures in python. It is really good course:
Your link just asks me for a login, which of course I don’t have. I’ve not heard of Ed before. I am interested but the “see how it works” section doesn’t really tell you how it works. As is the trend, it seems you have to sign up first. Shame.
This is an excellent review with animations that make the math visually intuitive. I love how it grows from the simple to the ridiculously complex at a reasonable pace.
It happens to me when I am using Chromium under Linux, it seems that my Hardware acceleration is not working. While on MAC, Windows or Firefox (Linux) it works flawlessly. On mobile is choppy as well (unless you have a flagship).
Unfortunately I didn't know how to optimise the animations better, and once I found out, 90% of the code was already written.
From the section "Euler's Identity", I believe that you made a typo when substituting a -> e, you should have written a -> i. Thanks for great post though!
This would be a great companion tutorial to a text book. I loved the animations and the interactive animations. It could use some proofreading, however.
There's manim [1] from YouTuber 3blue1brown. And while it doesn't work on the web, there is a port [2] that does, which runs on p5.js. If you want a bit more control, you can use a canvas animation library directly. A few popular ones are p5, GreenSock, and PixiJS--but there are so many others. For simpler animations and for the most control over the result, it's pretty rewarding to just use the built-in Canvas API [3] directly.
I have very happily and effectively used Mathematica to build such animations. It's also easy to make interactive animations (sliders to change values etc).
"We rarely see angles expressed in degrees; usually, we represent them in relation to the number PI"
I love it when someone too close to the tree loses sight of the forest this way. "rarely see angles in degrees" is so wild of a comment for anyone outside of math. How does one find their location on a map in long/lat in degrees or radians? Do we say degrees on a compass or how many radians? How many radians is that star in right ascension? Did that skater just land a 4*pi jump or a 720?
The context of "we" there is literally applied mathematics and it's absolutely correct that degrees are rare in that field .. a "720" is not a useful way of describing two full revolutions.
It tells me everything I needed to know that it was 2 full circles. At least better than 4pi does. "We" all agree that 1 circle is 360° so 2 circles would be 720°. It's really not difficult.
People living in the worlds of maths forget the rest of the world is not a place of absolutes. There are so many way of looking at things and labeling things. Yet, maths people look at normies like they're stupid for not seeing it their way and make argumentative statements like degrees are useless and anyone using them are silly.
You're the only person making argumentative statements. The quoted sentence in the article was descriptive, not normative. In the context where you'd discuss Fourier series, degrees really aren't used. You're the only person bringing up skateboarding as if it had any relevance to the article.
In engineering text books, sure they use radians. In mechanical engineering design if you put a radian on a geometrical dimensioning and tolerance sheet it's not going to go well for you.
I suspect the same holds for civil engineering too. I have my doubts that radians are useful in chemical engineering, but I could be wrong there.
Fair, I was mostly thinking electrical engineering and similar. For civil engineering, I'm curious what is common. As soon as you have Fourier and/or Laplace Transforms, you will most likely end up using radians, and are these not relevant for civil engineering? I have no idea, though the modeling of linear, time-invariant systems (i.e. filters) strike me as important if you're building, say, a bridge, and/or care about seismic activity at all.
Nevertheless, in the context in which this was presented, radians are the only way to go.
Output on control system HMI Scada screens for stuff like Tilt Drives are all in degrees as well, in this respect it's like the Kelvin scale. Control system doesn't display thermocouple readings in Kelvin either (at plant I work at Temperature setpoints are displayed as degree Celsius).
You might use Radians/Kelvin internally for ease of calculation but they aren't numbers you quote around or report things in.
I would be very surprised though if the people who actually implement the control systems (as in doing the hard math) don't use radians, though. Is that really not the case? Using degrees just seems like unnecessary extra steps when dealing with transfer functions...
Internally yes they probably convert but it is not exposed anywhere, kind of like Chemical reaction you convert everything to Mols internally to do the calculations but externally you report all of the inputs as a mass.
The control system won't tell the operator to add an extra 0.3 mols of reactant or to tilt the furnace by Pi/4 radians
Eventually it clicked when considering the Discrete Fourier transform [3], which is just an orthogonal matrix you multiply onto a vector. All the stuff about the inverse FFT, Plancherel theorem and Parseval's theorem come for free: they just say that the matrix is orthonormal.
Maybe this only works if you've already invested in understanding linear algebra. But once I had this discrete understanding, back porting it to the continuous Fourier transform was easy enough.
Maybe I'm weird, but this was a case where just looking at the equations was much easier than all the animations of circles and stuff.
[1] https://www.youtube.com/watch?v=spUNpyF58BY
[2] https://betterexplained.com/articles/an-interactive-guide-to...
[3] https://en.wikipedia.org/wiki/Discrete_Fourier_transform