Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Show HN: Fourier Transform Visualized via WebGL (laszlokorte.de)
175 points by laszlokorte on Dec 6, 2021 | hide | past | favorite | 23 comments


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


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


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


That's great! (but it removes the projections!?)


I am not sure yet where to put them exaclty.


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?


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.


Is the "time domain" function a complex function of time, and "spectral" domain the F.T. of that function?

I ask because it's rather unusual to look at the F.T. of complex functions, since most useful F.T.s only deal with real-valued functions of time and it might be extra confusing as the F.T. is no longer symmetric as a result

It may also be nice to use different syntax, like `x(t)` and X(\omega)` since "s" can be a bit overloaded in the context of Fourier theory


On the contrary, it's most normal to consider the time domain function [1] as a complex valued function, even if it happens to take only real values. And the reason for that is exactly for symmetry with its transform! The transform is certainly complex valued, thanks to the e^ix\xi factor (unless you take the sine and cosine transforms separately, but of course those are just the real and imaginary components).

For example, you can see the first definition on Wikipedia [2] starts with a function f:R->C.

Edit: Oh, by "symmetric" you meant the Fourier transform being symmetric about 0. I thought you meant the natural symmetry of the forms of f and \hat{f}. Still, it seems natural to me to treat the two functions similarly, including use of complex values. But I'm a (very) pure mathematician, at least in this area.

[1] Or whatever function you want to take the transform of, it doesn't have to be the time domain and is in fact often spatial. This is probably why OP used the phrase "signal domain".

[2] https://en.m.wikipedia.org/wiki/Fourier_transform


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


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


> 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


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


Ah yeah, thanks, I added a saw function.


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.


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.


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?


I added an extra x-ray view option that shows all 4 plots at the same time


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?


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.


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


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.


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




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: