Alternative to Beamer for Math Presentation

Although using blackboard and chalk is the best option for a math talk for various reasons, sometimes due to limit on the time, one has to make slides to save time on writing. The most common tools to create slides nowadays are LaTeX and Beamer.

When I was preparing for my talk at Vancouver for Connections in Discrete Mathematics in honor of the work of Ron Graham, as it is my first ever conference talk, I decided to ditch Beamer due to my lack of experience. Finally, I ended up using html+css+javascript to leverage my knowledge in web design.

The javascript framework I used is reveal.js. Though there are other options such as impress.js, reveal.js fits better for a math talk. One can easily create a text-based presentation with static images / charts. The framework also has incorporated with MathJax as an optional dependency, which can be added with a few lines of code. What I really like about reveal.js as well as impress.js is that they provide a smooth spatial transition between slides. However, one has to use other javascript library to draw and animate diagrams. For that, I chose raphael.js, a javascript library that uses SVG and VML for creating graphics so that users can easily, for example, create their own specific chart. The source code of the examples on the official website is really a good place to start.

To integrate reveal.js and raphael.js to achieve a step-by-step animation of a diagram, I hacked it by adding a dummy fragment element in my html document so that reveal.js can listen to the fragmentshown event and hence trigger raphael.js to animate the diagram. In cases where the diagrams are made of html elements, I used jQuery to control the animation. Here is my favorite animation in the slides generated by jQuery.

Untitled
How does mathematics progress?

However, one has to make more effort to reverse the animation made by raphael.js or jQuery if one wants to go backwards in slides. I did not implement any reverse animation since I did not plan to go back in slides at all.

In case there is no internet access during the presentation, one has to have copies of all external javascript libraries (sometimes also fonts), which, in my case, are MathJax, raphael.js and jQuery. In order to use MathJax offline, one need to configure reveal.js. Here is how my final html document looks like.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>A Bound on Turán Number for Cycles of Even Length</title>
  <meta name="description" content="A contributed talk at Connections in Discrete Mathematics">
  <meta name="author" content="Ziln Jiang">
  <link rel="stylesheet" href="css/reveal.css">
  <link rel="stylesheet" href="css/theme/solarized.css" id="theme">
  <link rel="stylesheet" href="css/custom.css"> <!-- your customized css stylesheet can go here -->
  <!--[if lt IE 9]>
  <script src="lib/js/html5shiv.js"></script>
  <![endif]-->
</head>

<body>
  <div class="reveal">
    <div class="slides">
      <section>
         ...
      </section>
    </div>
  </div>
  <script src="lib/js/head.min.js"></script>
  <script src="lib/js/jquery.min.js"></script> <!-- local jQuery library -->
  <script src="js/raphael-min.js"></script> <!-- local raphael.js -->
  <script src="js/reveal.js"></script>
  <script src="js/diagram-animation.js"></script> <!-- your additional animation can go here -->
  <script>
    Reveal.initialize({
      controls: false,
      slideNumber: true,
      progress: true,
      fragments: true,
      // Optional libraries used to extend on reveal.js
      dependencies: [
        { src: 'plugin/math/math.js', async: true } // to enable MathJax
      ],
      math: {
        mathjax: 'lib/js/MathJax/MathJax.js' // local MathJax
      }
    });
  </script>
</body>

</html>

Currently, my slides only work on Chrome correctly. There is another bug that I have not figured out yet. If I start afresh from the first slide, then my second diagram generated by Raphael is not rendered correctly. I got around it by refreshing the slide where the second diagram lives. This is still something annoying that I would like to resolve.

After all, I really like this alternative approach of making slides for math presentation because it enables me to implement whatever I imagine.

15 (this post is made with love)

Leave a Reply