Animation technique 2/4: computer-assisted animation

Now that you know all about traditional (frame-by-frame) animation, you're probably wondering how the computer helps animators speed up their production process.

First of all, there's Ctrl-Z, of course. Thanks to Adobe Photoshop, Procreate and TV Paint (dedicated to traditional digital animation), we no longer have to redo the same drawing 15 times.

But there's more to computers than just Ctrl-Z! First and foremost, it's a calculating machine, and its capabilities are also put to good use in animation.

Calculator

There's no escaping it, even with digital technology: 24 frames per second are still required for a cinema film.

Imagine an object at position A at time 0, which is moved to position B one second later. The computer will be able to calculate all its positions between A and B. It will then divide the distance into 24 positions and place the object back in the right place.

These two images (A and B) are called keyframes. keyframes because they define the most important points in the animation.

But the computer doesn't limit its calculations to just position: there's also rotation, scale, anchor point, and many other properties relating to the nature of the image.

In fact, images can have two natures:

1. Either they are defined by points, in which case they are vector illustrations,
2. Either they are defined by pixels, in which case they are bitmaps.

The computer will be able to use the specific properties of each image to animate them.

Let's see how!

Vector illustration

It all starts with the vector, that mathematical object that scares everyone but delights scientists. In fact, it's just a point that exists in a mathematical space. And whether you like it or not, your screen is a 2-dimensional mathematical space: with a width and a height, and a finite number of pixels.

For example, a rhombus defined by vectors can be composed of just 4 vector points in a 2-dimensional space(2D, which includes the X abscissa and Y ordinate), as in the diagram above.

That's all there is to it.

If you want to enlarge this square, all you have to do is move these 4 points, , and thus modify only the coordinates of these points. You'll get optimum definition, whatever their size.

This is the basis of vector illustration.

The best-known vector image format is SVG, widely used on the Web today.

Thanks to its mathematical properties, you can easily animate its shape by moving its points.

Let's take an example: let's draw a vector circle at instant 0, and transform it into a vector square one second later, and see what happens. The result is called morphing, and it's all calculated by the computer.

And since vector illustration is created from solid color (or color gradient) shapes and outlines, a highly identifiable style emerged a few years ago: flat design (whether in illustration or animation, for that matter).

Bitmaps

Bitmaps, on the other hand, are composed of a fixed number of pixels in both height and width.

A diamond in a raster image 10 pixels high by 10 pixels wide will always comprise 100 pixels. Remember, in vector, we only had 4 points to define it! That's why bitmap images are usually much heavier than vector images.

And if you want to enlarge it, as in the image above, you'll see it pixelated: each pixel becomes much more visible. You lose sharpness and therefore quality.

The most popular bitmap formats are PNG, JPG and GIF.

The computer uses the properties of these pixels, each defined by 3 colors: Red, Green and Blue (RGB), to animate them, blur them, make them transparent and add all kinds of effects.

To transform this square into a circle, it immediately becomes much more complicated, as you have to act on the hundred or so pixels that make up this square.

This is where complex algorithms come into play to work on these pixels. These are special effects, or VFX, specific to each post-production software. Adobe After Effects, for example, is the most widely used in the small world of motion design.

Animations

With these few notions, you can already create dynamic and exciting films that would have been very difficult to imagine in traditional animation, like this graduation film by JR Canest, a renowned animator I've written about on this blog:

A film made entirely of squares and circles, and yet it's still exciting, dynamic and entertaining!

And to achieve this, the artist used a lot of well-placed keyframes, and that's the difficulty of this kind of animation.

Computer-assisted animation can be deceptively simple, but make no mistake: mastering it is an art!

Conclusion

If we combine the two types of animation mentioned above, the possibilities are infinite, not to mention much faster production times.

You can easily create explainer videos, film or series trailers, corporate videos, educational videos, promotional videos, and much more, in the shortest possible time and with the most beautiful rendering!

Enjoy it 🙂 !