How to generate such kind of Fourier style GIF？

[wqw547243068]

Question

• I am deeply attracted by your profile GIF，like the one at the bottom of your post
• Wondering how do you implement it？Could you share some ideas，or online tool to generate such sort of things

[Jezzamonn]

If you're talking about this animation:

The way I generated it was actually using the page itself! I draw the image with the part that says "Draw Here", although I changed the code so that it printed out the list of points into the browser console, which I saved to here: https://github.com/Jezzamonn/fourier/blob/master/js/points/me-points.js

It's actually not saved to a gif but the page computes Fourier transform on those points, and draws the animation through code. Here is where it passes in those to a new object.

fourier/js/main.js

Line 338 in b3e7ddc

controller.setPath(mePoints, 256, 0.1);

If you wanted to make something similar, probably the easiest way would be to just use the page, and draw the image there and then do a screen recording of the animation

Let me know if you have any other questions!

[wqw547243068]

Further questions:

• How did you generate those data points, stored in mePoints ? That's a heavy work

[Jezzamonn]

Ah, sorry just saw the follow up question!

So that's what I was referring to when I said I made it using the page itself. I drew on the widget that says "draw here", and then got the page to output the list of points to the browser's developer console. The logic is still there actually:

fourier/js/controller/draw-controller.js

Line 54 in 76b3212

console.log(this.path);

So if you draw something on the page and then press 'p' it'll display the list of points.

If you need to know how to open the developer console, search for "open developer console [name of browser you're using]"