return to table of content

An animated introduction to Fourier series

thomasahle
20 replies
18h15m

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.

[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

vikramkr
4 replies
17h15m

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?

Sharlin
2 replies
16h41m

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

code_biologist
1 replies
16h28m

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!

Sharlin
0 replies
16h2m

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!

[1] https://longnow.org/essays/richard-feynman-connection-machin...

thomasahle
0 replies
12h58m

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.

keithalewis
4 replies
16h35m

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.

sfpotter
3 replies
15h12m

Uhh... there is a lot more to say about Fourier series than "just that they're defined for any locally compact abelian group". Give me a break.

keithalewis
2 replies
8h0m

Do you know understand how quoting works? You are supposed to use the words the person actually typed.

Feel free to cite a textbook on Fourier analysis proving a result not contained in Rudin's text. Uhh.. here's your break. Put up, or shut up.

eigenket
0 replies
3h50m

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.

ajkjk
2 replies
16h52m

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.

thomasahle
1 replies
12h56m

Right, they are very simple and elegant in algebra.

Visualizing them with nested circles flying around and drawing pictures, definitely makes them seem more weird.

atoav
0 replies
11h31m

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.

behnamoh
1 replies
15h29m

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.

jonahx
0 replies
12h57m

I realize the only thing that actually gets the job done is some solid math equations, no questions asked.

I don't think it's that as much as...

I still do all the proofs for math subjects in order to know I can derive them.

You have to do something, apply the knowledge. That's the piece that learning solely from nice visuals misses.

It just so happens that actually solving problems often involves using equations. But I don't think that the essential ingredient.

richrichie
0 replies
13h33m

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.

nomemory
0 replies
9h24m

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.

duped
0 replies
2h49m

I was about to comment (as a joke) "it's just a change of basis, what's so hard to understand"

It's the signals & systems version of "monoid in the category of endofunctors"

3abiton
0 replies
11h5m

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.

nomemory
1 replies
9h38m

Thanks for noticing, the source code for all the animations can be found here: https://github.com/nomemory/andreinc-site/tree/main/assets/j...

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.

xrd
0 replies
1h6m

I'm really fascinated by the discussions here. A few days ago I posted a blog that uses animations to talk about embeddings and cosine distance.

https://webiphany.com/2024-04-29-distance-sean-shawn

I used Svelte and basically pure HTML.

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?

bosuanzi
1 replies
20h12m

I think that we need't use processing for animation. In fact, Geogebra is easy to accomplish them.

rjurney
0 replies
18h49m

You should try it sometime. You might fall in love with it.

teleforce
0 replies
17h21m

Looks like that link is broken as well.

rjurney
0 replies
18h50m

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!

dylan604
4 replies
16h5m

"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?

defrost
3 replies
15h46m

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.

dylan604
2 replies
14h53m

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.

adzm
0 replies
10h15m

It might make more sense if we used tau instead of pi. Then 1τ just means 1 rotation. Instead of 2π.

Tainnor
0 replies
3h28m

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.

szvsw
3 replies
21h1m

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.

westurner
0 replies
18h45m

"The more general uncertainty principle, regarding Fourier transforms" by 3blue1brown https://youtube.com/watch?v=MBnnXbOM5S4

From https://news.ycombinator.com/item?id=25190770#25194040 :

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.

"QFT and iQFT; Inverted Quantum Fourier Transform" https://en.wikipedia.org/wiki/Quantum_Fourier_transform

kennyloginz
3 replies
20h1m

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.

Tronno
2 replies
16h16m

This site constantly refreshes my browser (mobile) every minute or so. It made it hard to read.

nomemory
0 replies
9h20m

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 ?

kennyloginz
0 replies
13h28m

It wasn’t perfect, but miles better than 99% of sites currently. ( I have been reading a couple wired articles recently, any may be biased )

wrasee
1 replies
5h18m

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.

barrenko
0 replies
10h59m

Is there an 'undergraduate' version of the course?

badrunaway
3 replies
2h37m

I wish to build such tutorials for things I know about. What tool is simple for such animations? Sorry if this is not a useful comment.

nomemory
1 replies
2h28m

I've used processing (p5js) but I don't necessarily recommend the library if you are looking for something simple.

seabass
0 replies
2h22m

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.

[1] https://github.com/3b1b/manim

[2] https://github.com/JazonJiao/Manim.js/

[3] https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/...

oriettaxx
1 replies
18h27m

Super! I really wish I could have these animation in high school :)

(too bad my CPUs goes sky rocket, so every time we open that page we contribute to heating up the planet :)

nomemory
0 replies
9h35m

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.

nico
1 replies
20h15m

Very cool. Thank you for making and sharing this

How are the animations made? Are they gifs or svgs or canvas + js, something else?

Workaccount2
1 replies
4h36m

I'm pretty sure that there is a mistake in the unit circle animation under "The sine and the cosine". It looks like the author mixed up sin and cos

You can right click the image and "Open image in a new tab" for a freeze frame, then checking the values it seems they are switched.

wrycoder
0 replies
20m

And once you swap the labels on the lower left, it appears that the sign of the sin is reversed.

zuluonezero
0 replies
20h13m

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.

teleforce
0 replies
16h17m

Great tutorial on understanding Fourier series and a tetris game based on Fourier series to boot.

Here's another helpful website dedicated to Fourier series and Fourier Transform with videos and books:

https://howthefouriertransformworks.com/

sdkfile
0 replies
16h20m

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!

ppcdeveloper
0 replies
3h20m

I wish I had something like this when I was studying Mathematics. This is so well done.

monkeytree
0 replies
19h38m

Sinusoidal Tetris is hidden in there - very cool! I'm not good at it, but it seems like a fun way to help visualize how sinusoids combine.

laszlokorte
0 replies
8h11m

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]

[1]: https://static.laszlokorte.de/frft-cube/

[2]: https://static.laszlokorte.de/complex-plane/

hackd997865
0 replies
7h7m

This is awesome! Thank you so much for sharing

gqcwwjtg
0 replies
19h13m

Very cool. To nitpick: the “even-ness of the cosine” graph should probably draw lines to the Y axis instead of the X.

emmanueloga_
0 replies
19h15m

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

--

1: https://en.wikipedia.org/wiki/Laplace_transform

deanresin
0 replies
12h19m

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.

alexjooau
0 replies
7h20m

Great article!