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.