Animation as a torture test

I’ve been working on an animation/simulation project. I’ve found that animation can be a torture test of rendering tools. In these cases, I’ve been using HTML5 2d Canvases. Quirks that don’t show up in a review of still snapshots of a scene can become visible in an animation.

One of the animations would draw circles that were growing to infinite size and then shrinking on the opposite side. When I was exploring the animation, I would find that the circles would twitch when they got really big. They were supposed to be tangent circles at all times but that was not what I was finding.

I thought my math was wrong, perhaps with round off problems with the large numbers involved or my confusion on the complex number arithmetic.

You can see in the last frame a still of the problem being evident. The lower blue line should be tangent to the smaller circles. Eventually, I tested the animation on a different browser with a different rendering engine and found that it didn’t have the problem. My math was correct after all.

I was able to narrow down the problem with this graphic.

These circles were designed to be tangent but as the radius increased, they were getting away from the expected position. It appears that it’s a problem with an optimization in the arc routine. I was able to hide the problem in my animation by replacing the large radius arcs with interpolated line segments.

Another subtle problem is demoed in this next video. The top ‘x’s wiggle as they move. The lower one from a different rendering engine has the letters move smoothly.

I think the problem here is that the renderers do different antialiasing when a character’s coordinates are not integers.

This one was most interesting because when I tried to reproduce the problem with other angles and velocities for the motion, the effect was invisible. I managed to find the problem by accidently testing with the perfect combination of settings.

Both of these are issues that are minor and I intentionally didn’t name the browsers involved. It’s not important to the main point, that animation can demo subtle problems that aren’t visible when generating still images.

Animation and communication

I’m working on a tool to help me do animation. My underlying technology is HTML and JavaScript. I’m trying to apply some of the principles of traditional animation to my process. The primary target for the tool is math explainers.

One idea from traditional animation that seems important is the idea of creating keyframes while drafting a presentation. In an animation, the keyframes would be images with gaps between them that would be filled in by artists as they create the continuity of the motion. I could apply this idea by making still images of important stages in the product. Then, I can do the magic of making things move smoothly with polish and flair. However, when the animation is generated algorithmically, the keyframes might be similar to an advanced storyboard.

Making a storyboard would also be helpful for planning. I could make (paper) sketches of where I want the narrative to go. However, I haven’t tried this for my current video, even though it probably should be the first thing I do. I’ve been so enamored with the animation software development that that’s been a distraction from my ultimate goal.

Another (potential) idea from storytelling is that the outline is often structured in a three-act framework. I don’t really have an intuition about how to apply that idea to communicate mathematics. It sounds promising, but I haven’t explored it yet. Part of my uncertainty is my lack of experience in analyzing the three-act structure.

Animation can be a really useful tool. I don’t want to lose sight that it is just a tool and should not override the process of communication. It’s so easy to get excited about animating things in a pretty way. I also want to explain each topic effectively.

This summer, Grant Sanderson, the creator behind the YouTube channel 3Blue1Brown, sponsored a math exposition contest. His announcement of the winners shared some principles that he used evaluate the submissions.

My understanding of his discussion about the contest is that first, the information should have a motivation. Why is the information interesting? What about the topic is meaningful to the videographer? He also wanted the videos to have clarity, empathy and to be engaging. Clarity requires the video to be succinct and direct. To me, empathetic means that the video should talk to its audience. It should be aware of difficult concepts and acknowledge the difficulty. Engaging means that the audience should want to pay attention to the explanation.

Other attributes that he used to evaluate submissions to the contest was whether the videos had good quality, novelty and were memorable. To me, quality means that the chosen tools are effective and used skillfully. Novelty means that the ideas should include something new. Perhaps a new explanation, an insight that unlocks the topic to a larger audience or that it is just different. Memorable content allows the important ideas to stick with the viewer.

I think these concepts are good benchmarks to aspire to in my releases.

Sometimes a video is a good way to present the information. At other times, the ideas are better shown with a document or an interactive website. Of course, these can all be used together. Animation can help a video contain these attributes from the contest. The right information for the right audience might need more than animation technology.