possibility of SVG/HTML/canvas animations?

[dz0]

Hi,

any ideas of implementing lightweight-manim for web-browsers?

I stumbled upo https://brython.info/ and think, it could play the scripts on client-side.

[hydrobeam]

There's @eulertour 's Manim-Web https://eulertour.com/ that uses pyodide.

It takes a while to load up, but from there you can create scenes and work in the web. I'm not sure about how ready it is, but it is functional.

[dz0]

Thanks,

seems its source is 2y old.. curious if it runs most recent manim version?

Editor didn't show code on Firefox, but ok on Chrome
I tried to paste few basic examples from https://docs.manim.community/en/stable/examples.html#basic-concepts
but it didn't work :/

ps.: also found https://github.com/manim-web/manim-web (in dart language)

[hydrobeam]

seems its source is 2y old.. curious if it runs most recent manim version?

That repository hasn't been updated, it's actually fairly recent (within the past ~4 months I believe).

Editor didn't show code on Firefox, but ok on Chrome

It takes a while to pop up so that might be what's happening, but I'm not sure.

I tried to paste few basic examples from https://docs.manim.community/en/stable/examples.html#basic-concepts
but it didn't work :/

Manim-Web uses a very different structure for getting code to run, more in line with how the web expects animations to be run. So scenes from the docs won't work when pasted over.

Here's a scene that will work: (press Preview, then you can drag around the circle with your mouse)

from manim.opengl import *
import manim.utils.opengl as opengl
import numpy as np

class Example(Scene):
    def setup(self):
        self.renderer.camera = Camera(orthographic=True)
        self.circle = Circle(fill_opacity=0.5)
        self.add(self.circle)
        self.dragged_object = None

    def on_mouse_down(self, x, y):
        x_coord = x * config["frame_x_radius"]
        y_coord = y * config["frame_y_radius"]

        center_to_mouse_point = \
            np.array([x_coord, y_coord, 0]) - self.circle.get_center()

        if np.linalg.norm(center_to_mouse_point) < self.circle.radius:
            self.dragged_object = self.circle

    def on_mouse_move(self, x, y):
        if self.dragged_object is None:
            return
        x_coord = x * config["frame_x_radius"]
        y_coord = y * config["frame_y_radius"]
        self.dragged_object.move_to(x_coord * RIGHT + y_coord * UP)

    def on_mouse_up(self, x, y):
        self.dragged_object = None

    def draw(self, t, dt):
        pass

draw does the heavy lifting here.