%%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()Magical animations with RevealJS, Quarto and Manim
Putting it all together
Cameron Rutherford
Thursday, the 1th of August, 2024
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
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:
- 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.
- 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
Video Player is loading.
Current Time 0:00
/
Duration -:-
Loaded: 0%
0:00
Stream Type LIVE
Remaining Time --:-
1x
- Chapters
- descriptions off, selected
- captions settings, opens captions settings dialog
- captions off, selected
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Beginning of dialog window. Escape will cancel and close the window.
End of dialog window.
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
Magical animations with RevealJS, Quarto and Manim Putting it all together Cameron Rutherford Thursday, the 1 th of August, 2024