Magical animations with RevealJS, Quarto and Manim

Putting it all together

Cameron Rutherford

Thursday, the 1^th of August, 2024

Table of contents

• Intro
• Manim
• Bad example
• Here is what just directly embedding the video on a slide/html looks like
• Okay, but what about Multiplex?
  • End

Intro

We are going to do our best to have a manim animation as the content for this slide… Let’s see how it goes! Maybe we have to pull in the animation from a notebook to the side as an element within this document…

Manim

Manim is a python library that is used for these slide animations, and I have wrapped https://github.com/RickDW/manim-revealjs with Quarto as a reveal extension. The source code for the first example is quite simple:

Bad example

One option that keeps this all quite simple, is to just embed the output of a notebook into this presentation, albeit this has quite a few gotchas, and probably isn’t recommended…

Warning

This video will not play if you try and render it

%%manim -qm -v WARNING DemoScene

mn.config.video_dir= "./videos"

class DemoScene(PresentationScene):
    def construct(self):
        # TODO find out why end_fragment has the t parameter
        rect = mn.Rectangle(fill_color=mn.BLUE, fill_opacity=1)
        self.play(mn.Create(rect))
        self.end_fragment()

        self.play(rect.animate.shift(mn.UP).rotate(mn.PI / 3))
        self.end_fragment(fragment_type=COMPLETE_LOOP)

        self.play(rect.animate.shift(3*mn.LEFT))
        self.end_fragment()

Note that unless you are careful, in both the rendered notebook preview, along with the embedded output here will not work.

Yes, while I could just add the media into the site data, there are a few things to consider:

1. I am trying to embed the animation into the revealJS presentation seamlessly, so I need the .json files along with the mp4. This might only be possible in reveal, in which case I will do conditional content to deal with making HTML look nice.
2. If you add all output in media, you will end up caching a whole bunch of information, and it can get very messy.

Here is what just directly embedding the video on a slide/html looks like

Notice that you can’t really step through the animation as well as you can on the next slide (see revealJS format for this!)

Okay, but what about Multiplex?

Does that work with revealJS?

TODO: - Add poll to verify / test and guage satisfaction

End

While not a thoroughly impressive demo, this opens up the possibility to use all of Manim’s awesome animations seamlessly within a slide!

TODO:

• Embed as a section of a slide
• Publish extension as standalone thing
• Create cooler examples