Shameless plug: A friend of mine and I made a game[1] for a jam that works the other way around. The goal is to manually fiddle with the coefficients to recreate a given shape.

It gives an easy way to play with the coefficients and hopefully allows the player to gain some intuitions. For example how some combinations of frequencies lead to rotational symmetry and why negative frequencies are necessary.

It's not very polished, though. I made a mistake while writing the algorithm that checks whether the shape is matching. It causes some false negatives in certain situations. There might also be some issues with dragging the controls on Mac OS.

[1] https://coldiv.itch.io/fouriershaper

It would be cool to have a slider or something to hide cycles, starting with the highest frequency. Basically, a way to visualize lossy compression.

I tried to stump it with this SVG. I didn't expect it to really work, but it failed fairly spectacularly

https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_U...

Why does it use two sets of vectors?

One sum of vectors is enough to trace any continuous line.

Here's a hypnotic version with one sum:

https://youtu.be/-qgreAUpPwM

Perhaps so the animations are outside of the drawing area?

And I would guess you get fewer artifacts - the version linked in a sibling comment with just one end has a lot of factors and yet is not very accurate.

Yeah, this is pretty annoying. Starting with a function from the circle to the complex plane, the Fourier series decomposes it into a sum of exponentials, which are circular motions about 0. This version with x and y coordinates separated overcomplicates and confuses. And with a four-dimensional output, there are 2 unused dimensions whose values are arbitrary.

I wonder if this means the problem is under-determined (too many degrees of freedom) and that leads to numerical instability. Certainly one set of equations is enough, as 3Blue1Brown’s Fourier transform video shows.

I implemented such a version in Scratch back in 2016! https://scratch.mit.edu/projects/117304786/

Here’s a gif of that if the project player doesn’t work for you: https://github.com/kach/gifblocks/blob/master/gallery/fourie...

Brilliant demonstration!

As you undoubtedly know, there is nothing essential about using sin waves with Fourier stuff... it can work with any shaped curve. A cool modification would be use a combination of the users input to generate a circle instead of the other way around. That is, if I draw a square, a multitude of squares of different sizes and phases, each tracing their contour, will generate the X,Y values for a circle.

This is fun but I think it's a bit buggy.

Trying to draw lines parallel and close to more than one border generates a lot of nonsense. Try with a square almost as big as the canvas.

Same thing happens when I try (emphasis on try, it wasn't that good) to draw a circle, which should be the easiest shape.

As I understand a "time series" is created for both x und y coordinates, then these are fourier transformed for the spectral components. Then when redrawing, only the real parts are used.

Is it necessary to do it for x and y separated? Couldn't you just take x for the real part and y for the imaginary part of the time series and do the Fourier transform on that?

edit: monday morning typos.

For those interested, I explain some of the math involved in computing epicycles from sample data here: http://bldavies.com/blog/computing-epicycles/

Nice one, despite understanding inner workings all I can think of is the song title "A Kind of Magic"

Could this be a way to compress vectors?

Depending on what you mean by vectors, yes. I don't know how it, if at all, it would apply to svg files, but you can absolutely take a vector and take its Fourier transform, and only keep the first few components to get a compressed representation. That is one way to do image compression.

My (poor) understanding of existing compression techniques is that you have to know what frequencies are OK to discard, otherwise the amount of information remains the same. For things like mp3 or jpg, this depends a lot on human perception of sound and images.

I fear that by dropping high frequency components, the result becomes visually unappealing (such as lines being parallel in the original becoming extremely wiggly and non-parallel).

Maybe OP can make an example with high frequencies removed?

The second pass makes the line darker. Is it on purpose or just a numeric error?

It may also be a result of the canvas drawing anti-aliased lines. Since an anti-aliased line contains some partially transparent pixels, drawing exactly the same line a second time will darken those pixels.