Designing Motion: An Invitation To Dynamic Animation
It’s been over a decade since I started working as a Flash developer. But nowadays, because Flash is considered an obsolete technology, the position itself is close to being extinct. Nevertheless, there are still plenty of opportunities to create programming-driven dynamic animations through the use of other tools. “Dynamic animation” not only refers to playback along the time axis but also about dynamically generated and interactive animations as well.
These are some interesting key points I’d like to share with you today.
What is an animation?
“Animation” is derived from the latin word “animatio” which means “the action of imparting life” (Wikipedia). When talking about designing it, it could be said that we are, in a way, thinking of how to give life to something that doesn’t have it, hence we are designing how to animate it. There are several ways of animating something, as you probably already know, such as drawing a sequence of images by hand, photographing something you slowly move (stop motion), or even by using 3D software to render the animation. However, if you programatically create the animation it will require a whole different approach.
Essentials of dynamic animations
If you want to programatically create an animation that shows a car moving from left to right, the key will be to determine how much time the car will take and what kind of interpolation the car will use when moving from point A to point B. Robert Penner’s easing functions are a popular example that can be used to easily test different kinds of interpolation since they have already been ported to various libraries. But if you are good at math, and would like to express yourself, I encourage you to try creating your own formula using a graphing application such as Grapher, a standard application found on any Mac. Some artists, like James Patterson, even like to mix hand-drawn animations with programmatically created ones.
Disney’s Twelve Basic Principles of Animation, well known by many animators, can also be produced through the use of programmatic animations. Creating movement by changing values in position, scale and rotation every frame gives quite a different feeling from that of manually created ones.
Advantages of programming-driven animations
There is no need to draw one by one.
Once you have established the world rules in code, the computer calculates and display the results. With hand-made animations it is impossible to create distinct ever-repeating patterns (such as waves), but, leaving the difficulty aside, programming-driven animations make this possible. This is particularly useful for those not wanting to draw things like smoke or water one particle at a time.
They are reusable.
The language syntax depends on the tools you use, and you might also have to consider the effects of the environment it’s being run at, but the logic itself doesn’t change. Let’s think of Tetris as an example. Tetris stores the X-Y data of the elements on the field within a two-dimensional array. It also manages the X-Y data of the falling Tetrimino (a shape made out of 4 squares) in another two dimensional array. Every time the Tetrimino moves or rotates, it checks for collision with the two-dimensional array for the field, and whenever a horizontal line is formed, it erases the data of that row and displays the result to the user. The logic works equally well for HTML5, Processing and Unity. The logic behind how objects move is reusable as well.
Experimenting is easy
You can create hundreds of patterns instantly or move tens of thousands of objects and still be able to easily test the results. Artists like Joshua Davis have created delightful works using dynamic animations that would otherwise require a tremendous amount of time if they were to be made by hand. Techniques that aim for randomness (like action painting) are also facilitated by this approach.
Embrace the unexpected
Imagine playing rock-paper-scissors, would it still be fun if your opponent kept using the same move over and over again? By introducing randomness to your animations you can create fluctuations to the movement and to the logic itself. You can even decide how random your randomness should be!
Make it interactive
You can make the animation react to simple things such as user taps and swipes on a smartphone or to clicks on the web, but you can also create more complex interactions such as analyzing music in real time, responding to attack sounds, or reacting to sensors’ real life input like temperature and pressure. Works by Robert Hodgin , who creates high-quality dynamic images in Processing and Cinder, perfectly illustrate this technique which can be seen inside the iTunes visualizer.
Summary
Dynamic animations are less suitable than hand-drawn and stop motion animations for when an “artistic” taste is desired or for when creating a story. However, taking into consideration the benefits described above can really enhance the experience presented to the users. For those who would like to know more about dynamic animations I recommend the book Generative Design: Visualize, Program, and Create with Processing.
