Building a Time Dilation Animation
Fri 23 June 2023
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.
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.
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