9 ms·

An animated introduction to Fourier series

601 points by gaws 2y ago

factormeta 2y ago
The link to source code is broken. Looks like someone forgot to put a '/' in the href link. The actual link is: https://www.andreinc.net/2024/04/24/assets/js/2024-04-24-from-the-circle-to-epicycles/fmachinery.js https://www.andreinc.net/2024/04/24/assets/js/2024-04-24-fro... Looks like it is using processing to do the animation.
- bosuanzi 2y ago
  I think that we need't use processing for animation. In fact, Geogebra is easy to accomplish them.
  - rjurney 2y ago
    You should try it sometime. You might fall in love with it.
- rjurney 2y ago
  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!
- teleforce 2y ago
  Looks like that link is broken as well.
- nomemory 2y ago
  Thanks for noticing, the source code for all the animations can be found here: https://github.com/nomemory/andreinc-site/tree/main/assets/js/2024-04-24-from-the-circle-to-epicycles 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 2y ago
    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 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?
  - sva_ 2y ago
    It managed to make my S23U lag, which I don't experience often. Very good read though, thanks for that. Was reading it while spending the sunset under a tree in a hammock.
szvsw 2y ago
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.
- Koshkin 2y ago
  There's quite a few of those out there, e.g. https://youtu.be/k8FXF1KjzY0 https://youtu.be/k8FXF1KjzY0.
  - chuckadams 2y ago
    My favorite is https://youtu.be/n-43Uje-OuQ https://youtu.be/n-43Uje-OuQ
    - westurner 2y ago
      "The more general uncertainty principle, regarding Fourier transforms" by 3blue1brown https://youtube.com/watch?v=MBnnXbOM5S4 https://youtube.com/watch?v=MBnnXbOM5S4 From https://news.ycombinator.com/item?id=25190770#25194040 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 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 https://en.wikipedia.org/wiki/Quantum_Fourier_transform
nico 2y ago
Very cool. Thank you for making and sharing this How are the animations made? Are they gifs or svgs or canvas + js, something else?
- nomemory 2y ago
  The animations were done using p5.js. The source code can be found here: https://github.com/nomemory/andreinc-site/tree/main/assets/js/2024-04-24-from-the-circle-to-epicycles https://github.com/nomemory/andreinc-site/tree/main/assets/j... , but I am not satisfied with it. I was learning p5.js while writing the article.
zuluonezero 2y ago
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.
kennyloginz 2y ago
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 2y ago
  This site constantly refreshes my browser (mobile) every minute or so. It made it hard to read.
  - kennyloginz 2y ago
    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 )
  - nomemory 2y ago
    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 ?
    - Tronno 2y ago
      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.
monkeytree 2y ago
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.
emmanueloga_ 2y ago
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 https://en.wikipedia.org/wiki/Laplace_transform
gqcwwjtg 2y ago
Very cool. To nitpick: the “even-ness of the cosine” graph should probably draw lines to the Y axis instead of the X.
rjurney 2y ago
[flagged]
- anyfoo 2y ago
  In math and engineering, in which context this is, he's absolutely right.
  - stergios 2y ago
    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.
    - anyfoo 2y ago
      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.
    - bigger_cheese 2y ago
      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.
      - anyfoo 2y ago
        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...
oriettaxx 2y ago
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 2y ago
  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.
thomasahle 2y ago
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 https://www.youtube.com/watch?v=spUNpyF58BY [2] https://betterexplained.com/articles/an-interactive-guide-to-the-fourier-transform/ https://betterexplained.com/articles/an-interactive-guide-to... [3] https://en.wikipedia.org/wiki/Discrete_Fourier_transform https://en.wikipedia.org/wiki/Discrete_Fourier_transform
- vikramkr 2y ago
  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 2y ago
    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).
oriettaxx 2y ago
this is super great from him, too https://www.andreinc.net/2024/01/09/the-most-important-math-exams-of-my-life https://www.andreinc.net/2024/01/09/the-most-important-math-...
photon_lines 2y ago
Great work!! Note to author: you misspelled Heaviside step function: https://en.wikipedia.org/wiki/Heaviside_step_function https://en.wikipedia.org/wiki/Heaviside_step_function. I also highly recommend 'Who Is Fourier?: A Mathematical Adventure.'
sdkfile 2y ago
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!
teleforce 2y ago
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/ https://howthefouriertransformworks.com/
dylan604 2y ago
"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?
- deleted 2y ago
  [deleted]
- defrost 2y ago
  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 2y ago
    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 2y ago
      It might make more sense if we used tau instead of pi. Then 1τ just means 1 rotation. Instead of 2π.
    - Tainnor 2y ago
      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.
sterasody 2y ago
https://jackschaedler.github.io/circles-sines-signals/ https://jackschaedler.github.io/circles-sines-signals/ There is also this wonderful primer on signal processing for people who love visualizations.
lorddr 2y ago
[dead]
deanresin 2y ago
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.
dowakin 2y ago
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: https://edstem.org/us/courses/47529/lessons/80063/slides/440310 https://edstem.org/us/courses/47529/lessons/80063/slides/440...
- barrenko 2y ago
  Is there an 'undergraduate' version of the course?
- wrasee 2y ago
  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.
  - techie128 2y ago
    The Ed link is referenced from GT's official class page: https://omscs.gatech.edu/cs-6515-intro-graduate-algorithms https://omscs.gatech.edu/cs-6515-intro-graduate-algorithms
svag 2y ago
Some explanation about Fourier transform can be found in the Feynman lectures here, https://www.feynmanlectures.caltech.edu/I_50.html https://www.feynmanlectures.caltech.edu/I_50.html
laszlokorte 2y ago
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/ https://static.laszlokorte.de/frft-cube/ [2]: https://static.laszlokorte.de/complex-plane/ https://static.laszlokorte.de/complex-plane/
alexjooau 2y ago
Great article!
hackd997865 2y ago
This is awesome! Thank you so much for sharing
Workaccount2 2y ago
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 2y ago
  And once you swap the labels on the lower left, it appears that the sign of the sin is reversed.
- nomemory 2y ago
  Thank you for noticing. I will look into the code.
justincredible 2y ago
[dead]
ppcdeveloper 2y ago
I wish I had something like this when I was studying Mathematics. This is so well done.
badrunaway 2y ago
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 2y ago
  I've used processing (p5js) but I don't necessarily recommend the library if you are looking for something simple.
  - xrd 2y ago
    I added a comment above the plugs my Svekyll blog tool. I love Svelte for these kind of things. You can view source of the post I made: https://webiphany.com/2024-04-29-distance-sean-shawn https://webiphany.com/2024-04-29-distance-sean-shawn
- seabass 2y ago
  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 https://github.com/3b1b/manim [2] https://github.com/JazonJiao/Manim.js/ https://github.com/JazonJiao/Manim.js/ [3] https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/...
  - badrunaway 2y ago
    Manim I have tried once. While it's cool - it feels designed for a specific use case. I will check out canvas API!
- abdullahkhalids 2y ago
  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).

601 points by gaws 2y ago

The link to source code is broken. Looks like someone forgot to put a '/' in the href link. The actual link is: https://www.andreinc.net/2024/04/24/assets/js/2024-04-24-from-the-circle-to-epicycles/fmachinery.js https://www.andreinc.net/2024/04/24/assets/js/2024-04-24-fro... Looks like it is using processing to do the animation.

bosuanzi 2y ago
I think that we need't use processing for animation. In fact, Geogebra is easy to accomplish them.
- rjurney 2y ago
  You should try it sometime. You might fall in love with it.
rjurney 2y ago
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!
teleforce 2y ago
Looks like that link is broken as well.
nomemory 2y ago
Thanks for noticing, the source code for all the animations can be found here: https://github.com/nomemory/andreinc-site/tree/main/assets/js/2024-04-24-from-the-circle-to-epicycles 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 2y ago
  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 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?
- sva_ 2y ago
  It managed to make my S23U lag, which I don't experience often. Very good read though, thanks for that. Was reading it while spending the sunset under a tree in a hammock.

szvsw 2y ago

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.

Koshkin 2y ago
There's quite a few of those out there, e.g. https://youtu.be/k8FXF1KjzY0 https://youtu.be/k8FXF1KjzY0.
- chuckadams 2y ago
  My favorite is https://youtu.be/n-43Uje-OuQ https://youtu.be/n-43Uje-OuQ
  - westurner 2y ago
    "The more general uncertainty principle, regarding Fourier transforms" by 3blue1brown https://youtube.com/watch?v=MBnnXbOM5S4 https://youtube.com/watch?v=MBnnXbOM5S4 From https://news.ycombinator.com/item?id=25190770#25194040 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 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 https://en.wikipedia.org/wiki/Quantum_Fourier_transform

nico 2y ago

Very cool. Thank you for making and sharing this How are the animations made? Are they gifs or svgs or canvas + js, something else?

nomemory 2y ago
The animations were done using p5.js. The source code can be found here: https://github.com/nomemory/andreinc-site/tree/main/assets/js/2024-04-24-from-the-circle-to-epicycles https://github.com/nomemory/andreinc-site/tree/main/assets/j... , but I am not satisfied with it. I was learning p5.js while writing the article.

zuluonezero 2y ago

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.

kennyloginz 2y ago

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 2y ago
This site constantly refreshes my browser (mobile) every minute or so. It made it hard to read.
- kennyloginz 2y ago
  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 )
- nomemory 2y ago
  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 ?
  - Tronno 2y ago
    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.

monkeytree 2y ago

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.

emmanueloga_ 2y ago

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 https://en.wikipedia.org/wiki/Laplace_transform

gqcwwjtg 2y ago

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

rjurney 2y ago

[flagged]

anyfoo 2y ago
In math and engineering, in which context this is, he's absolutely right.
- stergios 2y ago
  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.
  - anyfoo 2y ago
    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.
  - bigger_cheese 2y ago
    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.
    - anyfoo 2y ago
      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...

oriettaxx 2y ago

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 2y ago
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.

thomasahle 2y ago

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 https://www.youtube.com/watch?v=spUNpyF58BY [2] https://betterexplained.com/articles/an-interactive-guide-to-the-fourier-transform/ https://betterexplained.com/articles/an-interactive-guide-to... [3] https://en.wikipedia.org/wiki/Discrete_Fourier_transform https://en.wikipedia.org/wiki/Discrete_Fourier_transform

vikramkr 2y ago
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 2y ago
  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).

oriettaxx 2y ago

this is super great from him, too https://www.andreinc.net/2024/01/09/the-most-important-math-exams-of-my-life https://www.andreinc.net/2024/01/09/the-most-important-math-...

photon_lines 2y ago

Great work!! Note to author: you misspelled Heaviside step function: https://en.wikipedia.org/wiki/Heaviside_step_function https://en.wikipedia.org/wiki/Heaviside_step_function. I also highly recommend 'Who Is Fourier?: A Mathematical Adventure.'

sdkfile 2y ago

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!

teleforce 2y ago

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/ https://howthefouriertransformworks.com/

dylan604 2y ago

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

deleted 2y ago
[deleted]
defrost 2y ago
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 2y ago
  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 2y ago
    It might make more sense if we used tau instead of pi. Then 1τ just means 1 rotation. Instead of 2π.
  - Tainnor 2y ago
    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.

sterasody 2y ago

https://jackschaedler.github.io/circles-sines-signals/ https://jackschaedler.github.io/circles-sines-signals/ There is also this wonderful primer on signal processing for people who love visualizations.

lorddr 2y ago

[dead]

deanresin 2y ago

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.

dowakin 2y ago

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: https://edstem.org/us/courses/47529/lessons/80063/slides/440310 https://edstem.org/us/courses/47529/lessons/80063/slides/440...

barrenko 2y ago
Is there an 'undergraduate' version of the course?
wrasee 2y ago
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.
- techie128 2y ago
  The Ed link is referenced from GT's official class page: https://omscs.gatech.edu/cs-6515-intro-graduate-algorithms https://omscs.gatech.edu/cs-6515-intro-graduate-algorithms

svag 2y ago

Some explanation about Fourier transform can be found in the Feynman lectures here, https://www.feynmanlectures.caltech.edu/I_50.html https://www.feynmanlectures.caltech.edu/I_50.html

laszlokorte 2y ago

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/ https://static.laszlokorte.de/frft-cube/ [2]: https://static.laszlokorte.de/complex-plane/ https://static.laszlokorte.de/complex-plane/

alexjooau 2y ago

Great article!

hackd997865 2y ago

This is awesome! Thank you so much for sharing

Workaccount2 2y ago

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 2y ago
And once you swap the labels on the lower left, it appears that the sign of the sin is reversed.
nomemory 2y ago
Thank you for noticing. I will look into the code.

justincredible 2y ago

[dead]

ppcdeveloper 2y ago

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

badrunaway 2y ago

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 2y ago
I've used processing (p5js) but I don't necessarily recommend the library if you are looking for something simple.
- xrd 2y ago
  I added a comment above the plugs my Svekyll blog tool. I love Svelte for these kind of things. You can view source of the post I made: https://webiphany.com/2024-04-29-distance-sean-shawn https://webiphany.com/2024-04-29-distance-sean-shawn
seabass 2y ago
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 https://github.com/3b1b/manim [2] https://github.com/JazonJiao/Manim.js/ https://github.com/JazonJiao/Manim.js/ [3] https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/...
- badrunaway 2y ago
  Manim I have tried once. While it's cool - it feels designed for a specific use case. I will check out canvas API!
abdullahkhalids 2y ago
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).