Show HN: Fourier Transform Visualized via WebGL

https://static.laszlokorte.de/fourier/

by laszlokorte • 5 years ago

175 23 5 years ago

static.laszlokorte.de

I built this visualization while taking a signal processing course. The goal is to demonstrate the duality between transformations in the time and spectral domain.

For example shifting the signal along the time axis results in a linear phase twist in the spectral domain.

In most textbooks I came across the phase and magnitute are plotted separately and even in digital 3d plots often only one domain at a time is plotted.

Inspired by graphics like this [1] my idea was to plot both time and spectral domains at once onto the sides of a rotating cuboid. So each 90deg rotation of the cuboid represents one fourier transform (... -> s(t) -> S(f) -> s(-t) -> S(-f) -> ...).

[1] https://mri-q.com/uploads/3/4/5/7/34572113/3311485_orig.gif

amir734jj• 5 years ago

It's very awesome and provides educational value. Thanks for sharing.

iamcreasy• 5 years ago

Thanks for making it. I am having trouble connect the gif with the Cuboid. When you say 'signal and spectral domain' - do you mean 'time and spectral domain'? Also, what does the 'Slices' checkbox do?

laszlokorte9• 5 years ago

Yes, I mean 'time and spectral domain'. The idea of the gif is to represent the two domains orthogonal to each other graphically. The signal in the time domain is a complex function (time->(magnitude,phase)) so it can be plotted in 3 dimensions. The same is true for the spectral domain. So really there are only 2 3d plots. But moving from the time to the signal domain can also be thought of as a 90 degree rotation. In the gif you can see two blue planes are orthogonal to each other. But the gif shows only the 2d magnitude plots of the time domain and spectral domain.

The cuboid embeds a 3d plot of each domain on each of it's side in order to plot the imaginary values as well.

The slicing allows you to select up to two frequencies from the frequency domain and plot the corresponding basis function on the top side of the cuboid. The top side of the cube corresponds to the 3d coordinate system in the gif.

In hope this helps to clarify.

enriquto2• 5 years ago

I love this visualization! Especially the metaphor that two sides of the cuboid give different "views" of the same ideal object that is inside the cube. What would one show in the upper face?

Some comments on this awesome program:

1. A beautiful feature is that you can see the projection of the whole function into the complex plane. However, this visualization is difficult to see for both the frequency and time domains at the same time.

2. After some time playing with the curves, I'd like to see both sides on a flat surface. This would break the metaphor, but maybe consider an option for "unfolding" the cube to see all these visualizations at the sime time?

3. Could you add new functions? at least the Dirichlet and Fejer kernels, or even some fractal-like stuff (lacunary series, random phase noise, dubois raymond examples, etc).

laszlokorte9• 5 years ago

I now added and x-ray view option to show all sides of the cube at the same time (by hiding the cube itself)

ridiculous_fish• 5 years ago

This is super-cool. Is the source code available?

laszlokorte9• 5 years ago

Thanks! I will put the source code on github but actually its just plain html/css/js that has not been preprocessed so the source code can be viewed right in the browser.

killjoywashere• 5 years ago

Great work, I understood the algebra, I but I only thought I understood the geometry. Very slick!

cycomanic2• 5 years ago

Great visualisation! One suggestion, from someone who teaches the Fourier Transform, I recommend to get rid of the cube and have the signal, spectral domain plots on top of each other. That way you visualise the real and imaginary parts at the same time and one can much easier see the changes happening in both domains at the same time.

I understand that you wanted to visualise that spectral and signal domains are orthogonal, but I don't think having them on different sides of the cube conveys any information.

laszlokorte9• 5 years ago

Thank you for your feedback! So you mean just not rendering/masking the cube but keeping the position of the coordinate systems? The initial motivation for the cube itself was to mask any intersections of the different plots. But yes it sounds interesting to get rid of the cube itself.

cycomanic2• 5 years ago

Sorry for not being more clear. What I mean is having two separate 3d plots for the time domain, so one can look at both domains at the same time (and keep the ability to rotate etc.). Super cool would be if one could come up with a way that changing the view/rotation of one plot would change the view of the other, i.e. for example if one rotates the "time-domain" plot to only show the imaginary part, the frequency domain part would only show the corresponding FT. That might be very hard to do in practice however, because it's not straight-forward "mapping" and one should keep the ability to rotate/pan etc., maybe with some checkbox button?

lacker• 5 years ago

I feel like I'm asking stupid questions, but, why is this in a cube? As I rotate it I feel like I am looking in from multiple dimensions, but it's like I'm looking at a totally different entity through the different faces of the cube.

So for example if I turn to look at both the green face and the red face, they both have an "lm" arrow, but their arrows are pointing in different directions. Doesn't that just mean that the two diagrams don't belong on two adjacent faces of a cube at 90 degrees apart?

cantagi• 5 years ago

The fourier transform is the same for all time, and the time-series contains all frequencies, so it makes sense to plot them on orthogonal axes. However it makes sense for them to share the 3rd axis for magnitude.

However, the Im parts are just bolted on orthogonally to the Re parts and orthogonally to the magnitude. The reason the Im part of the time series shares an axis with frequency is just because the author ran out of dimensions.

MauranKilom2• 5 years ago

This means that the signal and spectrum are both sampled discretely and not continuous as that would not be possible on a computer.

I mean, true in a technical sense, but don't all the sample functions here have known analytical Fourier transforms?

One of the coolest parts about this (in my eyes) is seeing how a time shift causes a linear phase rotation in the frequency domain. But one has to choose the parameters very carefully to avoid stark aliasing (not in the Nyquist but just the "see individual line segments" sense). I would've at least hoped for a "sample count" or similar slider to control the sampling resolution.

It would also be cool to have functions in the shape dropdown that are not symmetrical. For example, I read the side text about "Taking the Fourier Transform twice results in the original signal flipped along the time axis." and wanted to try that - but with symmetrical functions the flipping is not evident. Sure, introducing a time shift did the trick, but it was a tiny disappointment.

Btw, contrary to other comments here, I like the cube visualizations and I think it makes some sense. I mean, it doesn't significantly advance my understanding/intuition by leveraging some geometric relation between the cube faces [1], but just having 3D plots of both time and frequency domain is novel to me.

[1] Although I will admit that this will help me in picturing the "apply four times to get back the original function" (does this have a name? Double-involution?).

laszlokorte9• 5 years ago

I mean, true in a technical sense, but don't all the sample functions here have known analytical Fourier transforms?

Yes but currently I make not use of it but simply apply the DFT on the samples of the function. Making use of the analytical versions would result in smoother results but I would like to allow for custom signal functions in the future so I would like to keep the simple approach of just doing the DFT.

It would also be cool to have functions in the shape dropdown that are not symmetrical. Nice idea but what interesting functins would be there that are not achieved by using the time shift?
Sure, introducing a time shift did the trick, but it was a tiny disappointment. I agree

MauranKilom2• 5 years ago

Nice idea but what interesting functins would be there that are not achieved by using the time shift?

Well, a sawtooth for example?

PS: You need two line breaks to have your replies in a separate line.

Show HN: Fourier Transform Visualized via WebGL

Related Stories