Giter VIP home page Giter VIP logo

manim_reveal's Introduction

manim-reveal

Combines the manim library with reveal.js to create animated slides.

Setup

First install manim

Next get reveal.js and do the full setup (npm install)

Then install the python package manim-reveal located in this repository, by running following command

pip install .

Run example

Clone this repository, and run the following commands

cd python
manim example_slide_scene.py MathTest SimpleVideoSlide

This will create and copy the video and fragments files into the folder video_slides for each SlideScene.

Copy the folders, video_slides, js and the file index.html into a new reveal.js directory.

Finally run npm start to start the presentation.

How to create an animated slide

To create a new slide using manim, follow these steps

  1. Subclass SlideScene instead of the Scene class.
  2. In the CONFIG add the parameter video_slides_dir. This should point to a folder called video_slides in your reveal.js directory.
  3. In contruct(), add the function call self.slide_break() whenever you want the presentation to pause.
  4. Run the manim command on your python file. This will automatically update the video_slides directory you specified in the config.
  5. Add the following tag <script src="js/add_video_slide.js" slide_scene="SimpleVideoSlide"></script> instead of <section> ...</section> in your index.html. You have one such tag for each video slide.
  6. Make sure you add the tag <script src="js/video_slide.js"></script> at the bottom of your index.html. This only needs to be done once per index.html. This script is needed to make the video slide fragments work.
  7. Run npm start, or refresh your browser if you have already started the server.

Below is a simple example of a video slide

from manimlib.imports import *
from manim_reveal import SlideScene

class SimpleVideoSlide(SlideScene):
    CONFIG={
        "video_slides_dir":"../video_slides"
    }
    def construct(self):
        gamma = TexMobject("\gamma")
        gamma.scale(5)
        obj = Circle()

        self.play(FadeIn(obj))
        self.slide_break()

        self.play(Transform(obj,gamma))
        self.slide_break()

        self.play(FadeOut(obj))
        self.wait(1)

Uninstall

To uninstall the python package, run

pip uninstall manim_reveal

manim_reveal's People

Contributors

anjandn avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

manim_reveal's Issues

Class inheritance does not work

If a class inherits from SlidesScene, and another class is derived from that class, I get an error that looks for a copy of the intermediate class mp4 to copy to video_slides_dir, which doesn't exist

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.