To see the results of the work I describe below, see Relativity Animation.

I have been ever-so-slowly working on understanding Special Relativity, and not too long ago I finally wrapped my head around one of the time dilation derivations. The math is easy, but understanding what it means is not so much. I decided that if I could create an animation of the moving-frame scenario, it would be helpful for my learning, so I started looking for a way to do this. It turned out to be much more of a challenge than I expected.

First step was to determine what tools and software to use to build an animation. I thought I could perhaps write some Python code, but after looking into this I decided it would be more work than I wanted. Then I looked at Lua, but none of the libraries appealed to me. Then I looked at Javascript, for which there are numerous animation libraries that render in the browser. I liked the idea of using the browser as a canvas, as I might be able to share the result, but I prefer to avoid Javascript and dependence on external libraries. Upon further investigation I finally landed on using SVG, because I could use Inkscape (which I use often) to make graphics snippets (which I ended up not doing anyway!), and I learned that SVG provides animation constructs, and finally, SVG renders natively in a browser.

With the choice of tools out of the way, I moved onto making the animation. This is all hand-coded SVG, except for a few repetitive parts that I automated with little Python scripts. Overall, creating the SVG was pretty straightforward but tedious. Other than the learning curve for SVG (O'Reilly SVG Essentials, 2nd ed. was super useful), I found it a pain to deal with upside-down coordinate calculations (since the screen origin is in the upper left corner of the canvas) and timing calculations correlated to screen positions.

Next I turned to writing the mathematical narrative and equations. This turned out to be a bit of a problem. I was of the impression that doing equations in HTML is both possible and relatively easy. It is in fact possible with MathML, but not so easy to hand code it. Tools exist to make this easier, but the effort to use them seemed excessive (well, more than I was willing to invest anyway). There are also Javascript libraries to render math symbols and equations, but again, I prefer to avoid JS. Then I took a look at LibreOffice Math, and this seemed promising. After a short learning curve, I was pretty quickly writing text and equations. I figured I could export the result as a PNG and then pull this into the web page... but NO, there is no PNG export! Ok, so export to PDF, then see if I can convert that to PNG. The quickest path at that point was to open Inkscape, import the PDF, and then export a PNG. This worked well and looked quite nice - yippee!

Last step was to build the page and publish it here on Rambler. I use Pelican as my static site generator (SSG), and have mostly settled on writing my content in Markdown. My plan was to directly insert the SVG into my page content, and use an IMG element to pull in the math PNG. But guess what? The markdown-to-HTML conversion in Pelican does not recognize the SVG, and simply omitted the code. Damn! After some research, I learned that the best, and really, quite sensible approach is to pull in the SVG in an IMG tag, which meant I needed to create a standalone SVG file. No big deal here except that getting the right header content took a bit of research as well. That done, I put it all together and voila, it worked!

So, this concludes my overview of this little project. At this point, you should go see the final result: Relativity Animation