∑ XahLee
now, Xah's Edu Corner Extempore! episode №20171221120845, on the math intrinsics of animation or what i've learned!
so, in the past weeks, i've been studying svg animation or web animation tech. Basically read the whole svg 1.1 v2 spec on animation. It turns out, there's something intrinsically complex about 2D animation, and quite interesting.
∑ XahLee
imagine, you have a rectangle, and a small circle inside. The circle is a billiard ball, you want to bounce it around the rect, as a pool table animation.
normally, you do animation by drawing each frame. Basically, write a timed loop, and in each, say the position of the circle. This, we might call the imperative approach, as in imperative programing, where you say exactly what to do in each step.
∑ XahLee
but there's a declarative approach. That is, instead of a timed loop, you specify the drawings of the start frame, and end frame, and give a path. The ball, will move thru the path, in linear time. That's declarative approach, and is what svg/css/web animation is about.
note that in this declarative approach, the compiler, still actually need to figure out at what frame/time the ball is, and draw it. So, it's like function programing, the compiler, generate things for you.
∑ XahLee
the declarative approach seems simple. But actually, not quite. There are lots intrinsic complexity. Imagine the billiard ball again. Now, as your ball moves, it needs to slow down. So the timing, isn't “linear”
So, now you need a spec of what's called “calcMode” in svg, that controls the pace of animation. possible values are • linear • discrete • paced • spline. In css animation, you have similar called “animation-timing-function”.
∑ XahLee
Now, suppose there are 2 billiard balls. 1 hits the other, stops, and the other moves. So, now you kinda have 2 animations, one starts after the other stops. So, now in declarative way, you need to have a spec of when animations starts or connect.
∑ XahLee
now, look at this animation. The imperative approach, you just draw the thing for each loop, easy. In declarative approach, you draw line segment, then specify a path, and corresponding rotation (of the line), for the animation. Actually slightly more complex.
∑ XahLee
the declarative approach, in fact you may break it down into 4 animation sequences. Using mirror (transform) of the 1st part to produce the other 3 animation sequences. It is actually much more complex than the imperative approach.
∑ XahLee
also, as far as i know, in svg/css/web animation tech, there's no way to create a “leave a trace” effect, as needed in this animation (for the line). So the declarative approach is either impossible by itself, or far more complex to create.
∑ XahLee
Now, imagine you want to do animation of swarm of birds. You might have seen 3d boids. (web search it) Or, in 2d, a bunch of dots moving about in a particular pattern. (lets stick with 2D) Or, imagine, the flight of 5 jet planes in a air show. Or, many of the screen saver patterns.
∑ XahLee
so, when the animation becomes complex, the declarative approach breaks down. Cuz it is impossible to nice math describe the change of shapes/orientation/path especially when they change in a pace that's not simply linear or simple function.
∑ XahLee
The imperative approach, where we “hard code” each shape (2d or 3d)'s position/orientation for each frame. Is actually simpler to do when the animation is complex.
Jonkman Microblog is a social network, courtesy of SOBAC Microcomputer Services. It runs on GNU social, version 1.2.0-beta5, available under the GNU Affero General Public License.
All Jonkman Microblog content and data are available under the Creative Commons Attribution 3.0 license.