Fourier transform animation

[hugo-s29]

Hello,

The first article on this "blog" was clearly explained, and detailed. In general, it was really great. However, I thought it would be nice to have an interactive part, where you could experiment and try things not shown in the video animations.

For example, in the Fourier transform post, it could be great to have a web and interactive version of the animation bellow :

So, I worked on it and I have a working prototype which works in the browser.

When I say a prototype, what I actually mean is there are some things to add : the labels, a way to give the frequencies to the waves; but most of the work is done.

The code is available here.

I hope to see new posts as great as the first one, Best regards, Hugo

[leios]

This looks great! Good job!

How would this function differently than a video embedded into the post (like in blog mode)? What level of interactivity are you anticipating?

In the post we have already, we were trying to have a thumbnail that would correspond to the print mode variation while the blog mode would switch over to the related video. Would something like that be possible with embedded animations like these?

I have heard some murmurings among the manim community that there might be a version of manim that could be played in the browser in a similar fashion. I could imagine a workflow for future posts where we modify the video's manim script and make embeddable animations instead of mp4 files. This is a good idea to keep in mind for the future.

[hugo-s29]

Thanks for replying to me,

To embed the animation, I thought of directly adding an iframe to the markdown code. There may be a better way to embed HTML and javascript code with honkit.

About the interactivity, I thought you could set the different frequencies with their respective intensities. Then, the graph of the Fourier transform will be built automatically. You could also pause and control the advancement of the animation.

With the print mode, interactivity is impossible. A thumbnail is possible: the animation uses SVG, so the animation could be paused and we export it to an SVG file, then converts it to a PNG image.

About manim-community, there is a repository manim-renderer which uses electron. However, this is a tool to make desktop apps, so it isn't possible with a web browser. A web version could be done by changing the manim renderer code but it's slow to use python in the browser. Animations from manim in python could be translated to javascript. However, I made a tool similar to manim to make animations in the browser. I included a way to play the animations in the browser and also render them to frames that could be converted to an mp4 video and could be used as a thumbnail. I built the first version last year using only SVG but there were problems with it: you couldn't render 3d shapes, the renderer and the animations weren't optimized. But I'm working on a second version using WebGL which will be more stable. The first version can be found here : https://github.com/graphize, but there is almost no documentation.

[hugo-s29]

Hello,

I worked to add a control panel to change the different frequencies in the sine wave and to play, pause or restart the animation. fourier-transform-animation-hugo-s29.vercel.app

This was what I had planned for the interactivity, I haven't found any other controls to add. So, please tell me if some interactive parts are missing, such that I could add them.

Best regards, Hugo

[hugo-s29]

Hello,

I've done some research about how it would be possible to embed a Manim animation. I've found 2 ways to achieve web-compatible animations :

1. Rewriting Manim in javascript, or use an alternative.
2. Using Web Assembly to run Manim in the browser.

However, for both solutions, there are some drawbacks. For example, for the 1st one, the library would take a long time to create, and there will be no conversion between the python code used by the original Manim, and the javascript code used in the web version. For the 2nd solution, it would be possible to use Manim python code in the browser, but web assembly is only supported in the most recent versions of browsers, and it can be slow.

I've also looked at the manim-renderer repository to see how they achieved linking the python code of Manim Community with the WebGl renderer. They used a web server (grpc).

I also looked at eulertour.com (github.com/eulertour/eulerv2), it is using pyodide which can run Python code with WebAssembly and the renderer was built in javascript. So, it doesn't have all the options of the original manim (Graph Scene for example).

Nevertheless, I found a tool named Transcrypt to convert all python code to javascript, which a compiled version of Manim could run in every web browser (98% of the browsers support WebGl). There are many advantages :

• The compiled code is written in javascript so it is naturally supported by web browsers
• The animations are written in python, and can both work in python (to be converted to an mp4) and in the browser (to be interactive)
• All of the functionalities could work in the browser (including Graph Scene)

However, there is a major drawback, some libraries can't be compiled to javascript: for example, NumPy is using c code so it can't be compiled. So, it needs to be written in pure python or pure javascript.

So, I've started working on the solution using Transcrypt, and it is available in this repository: github.com/hugo-s29/manim-web.

If, there are other ways to run Manim animations in the browser, please tell me.

[leios]

Hey Hugo,

Firstly: this looks great / great work!

The truth is that @3b1b and I will be having a discussion on Monday about the best way to integrate interactive demos into the project (which is why I was slow to respond). At this stage, we are not sure if the interactivity will help people understand the content over well-chosen video clips.

Have you chatted with anyone on the manim-community discord about this?

[hugo-s29]

Hello,

Whether or not this interactive part will be added to this project, this may be useful for someone else who want to make make interactive math animations. Also, I haven't talked on the manim community discord yet. I will probably do it soon, since other opinions about this may help me.

[hugo-s29]

Hello,

I've been working on an animation engine similar to Manim that could run in the browser. It's called Manim-web.So, I recreated an interactive version of the Fourier animation. The red dot in the Fourier graph can be dragged to a specific winding frequency.

The GitHub repository can be found here. The animation can be found here and it's source code here.

There is already an interactive animation (here), but it may be easier to create and maintain interactive animations written in a Manim-like style.