Posts in Art

This is the third in a trilogy of posts about animation basics by Rex Smeal, animator, and friend to cephalopod and amphibia alike.

Welcome back! If you haven’t read the first and second parts of our animation basics trilogy, you should check it out! This third article is about Spatial Distortion!

Spatial Distortion

Distorting objects to accentuate their motion is something that animators have been playing around with since before they were animators – painters, comicbook artists, even sculptors to a lesser degree have all distorted reality to give a greater impression of motion. Speedlines, blurs, extreme perspective, stretching, various repeating-image techniques. Some of these transfer well to animation, others tend to get in the way.

Blurring

Blurring occurs in the “real world” when something is moving fast through a photograph exposure (or frame of film) and light reflects off of it into the camera through a range of motion, rather than creating a single image. Remember those oldschool cameras where people were asked to sit still for a minute? That was to avoid blurring across a much longer exposure.

Of course, in animation we don’t have to worry so much about this happening by accident, but it can be a useful technique for avoiding obvious afterimages (see Part 1: Spacing) and creating a greater sense of speed. Blurring can be slight, or the entire object can vanish into a dramatic blur until it slows down! The important thing to remember is that blurs will make everything smudgy if used too often, over too great an area, or on objects moving too slowly, and will not blend well with certain graphic styles. They can also be processor expensive if generated procedurally.

Smearing

Smearing is a kind of deliberately symbolised blur, and in many cases looks much cleaner where a blur would be out of place. For example, if there are a lot of high-contrast areas, as in a kid’s cartoon, or on simple interfaces, a blur will be a strange smudge in a world of hard lines and contrasting colours. So the various techniques of smearing help maintain visual style while performing much the same function as a blur would otherwise.

Smearing has become a bit of an art form in itself, decades of economising children’s animation led to all sorts of interesting methods for cheap motion that didn’t require many complex drawings.

Squash/Stretch

This is perhaps the most well-known animation technique, Squash and Stretch, put simply, is the distortion of an object to reflect forces being applied to it (which would normally be invisible/too fast to see). If you imagine a bouncing rubber ball’s motion broken down:

Moving quickly through the air, it’s sides taper against air resistance.
As it hits the floor, all the parts of the ball want to keep moving forward so the sides of the ball distort flat to push themselves up against the surface – this is obviously dependant on the angle of impact.
The elasticity of the ball cause it to snap back into shape as Newton’s third law forces the ball from the floor at near-equal speed to it’s arrival, which means we almost immediately regain the elongated look, though now rising instead of falling.
As the ball rises, gravity reduces its velocity, and the air resistance against it decreases; so the ball returns to it’s natural shape, only to repeat the process as passes the bounce’s apex and falls anew.

Without a slight squash/stretch effect during fast motion, your objects will appear rigid and lifeless (sometimes a desirable effect), but too much squash/stretch and they’ll appear cartoony or overly bouncy. Getting the perfect level of distortion actually makes objects appear to move more realistically!

General Advice

The techniques outlined in our Animation Basics trilogy are really just the very top layer of what is possible when you’re creating motion, particularly in the digital realm. They provide a starting point for many basic effects, but they can and should be combined, modified, used across three dimensions rather than two, even actively ignored or opposed. So long as you’re thinking about what you’re doing, about physics in the real world as they apply to gravity and momentum, and learning from failed experiments, there’s no end to the complexity of motion you can explore.

Finally, I’ll leave you with an old rule amongst artists (and animators in particular) that goes something like:

“If it looks right, it is right, even if it’s wrong.”

And the inverse of that might be:

“If it looks wrong, make it look right, even if you have to break the rules to do it.”

So the trick is not to look for hard and fast rules in animation, instead look at your result, and make judgements on your next step to take based on how it feels to you- because that’s how it’ll feel to your viewers/users.

Miscellaneous

“What framespeed should I use?”

It depends. There are a lot of factors to consider. 24fps is traditional disney animation speed- but that’s for animating complex figures, and is usually performed by teams of full-time animators. With the invention of procedural animation techniques like tweening, you should be able to apply most of these techniques smoothly to even something crazy like 200fps very easily. As a general rule, anything around 30fps will be much smoother and less likely to leave afterimages, but depending on how you’re making your animation, and what sort of device you’re displaying it on, it may not be economical or practical to work at this speed!

“I’m a developer making interfaces, do i really need to take these techniques into account? Will people even notice them?”

People will notice if they’re missing. Two apps on the subject of pizza restaurants perform the same task with similar graphics, but one moves through it’s frames with the squashing and stretching motion of strands of mozzarella cheese? It’s a distinct advantage.

“I’m a developer, and this was interesting, but I don’t think Disney will be hiring me just yet. What can I do myself/in-house, and what should I hire a dedicated animator for?”

Assuming the programming knowhow is present, with a little practice and experimentation (literally an hour or two of messing around), the techniques in this blog can be effectively applied to simple interface components and very simple objects like falling rocks or bouncing balls at a passable level by anyone. But for characters, handdrawn animation, complex elements like flags, water and fire, explosions, lightning, complex composite objects, depicting weight, emotions, reactions, and for making unique interfaces that move with real flair- and animating all of these well: requires a kind of mental library of natural motion, as well as an experienced animator’s eye for mistakes and improvements. Someone without a few years on the clock won’t be able to make complex animation move well.

“Okay, so I need an animator. What should I look for in my new hire?”

Ideally, as usual for any position, you want to see referrals from previous clients and examples of relevant work, but if you want something weird, that might not always be possible. Most animation students are more interested in character animation than interfaces or other “inanimate” elements- and particularly in terms of developing software, often you may be better off seeking out a graphic designer who dabbles in animation than a “traditional animation” school-trained Animator.

“I’ve decided that I want to be an expert animator, but I’ve no idea where to start. What’s next for me?”

If you’re lucky enough to live near a good animation school (the quality of which you will learn by contacting previous students about the courses there, and remember to ask to see examples of their work)- that’s your next port of call. If not, you’ll be joining me in a never-ending self-taught quest to study and replicate the natural motion of the world. Animators love dissecting each other’s work, and there’s no shortage of amateur critical analysis communities online. If all else fails, let Richard William’s ‘Animator’s Survival Kit’ be your guiding star!

Jargon

Spacing: The placement of frames throughout a set (or open) timeframe, usually between defined keyframes. This can be thought of as animation at the micro level.

Timing: Choosing timeframes for objects, particularly choices in terms of different objects interacting throughout time. This can be thought of as animation planning, defining constraints for spacing.

Easing: Spacing that favours smooth transitions from a keyframe- Usually expressed as slowing into a key, or slowing out of a key.

Frame: A single image or exposure- will be displayed for a predetermined time based on framespeed, which is expressed in the number of frames per second (fps).

Keyframe: An “important” frame usually with a specified time- The start and end positions of an object’s animation might be considered keyframes. Additionally, if an object must move from A to C through B- there might be keyframes at A, B and C, with inbetweens (see below) between them. Defining keyframes first as a Timing element can simplify the inbetweening process.

Inbetween: The frames that sit between keyframes- their placement is known as “Spacing”.

Tweening/A Tween: A software assisted technique for placing inbetweens- will often allow for automation of some basic spacing techniques such as easing in or out.

Cycle: A sequence of animation that repeats the motion of an object seamlessly.

Loop: A sequence of animation that repeats.

Timing

So, if Spacing determines how quickly or slowly something moves, what is there left to call timing? A lot of the time (ha ha), timing is the functional time requirement of your subject. For example, when animating a boxer throwing a punch, you must make the timing quick enough to accurately convey the speed of the punch: too fast and we miss it, too slow and he looks silly. Another example would be interfaces, which need to move quickly into place in order to be practical.

This is something most people know how to do instinctively, or can easily adjust for when a mistake is obviously too slow or too fast. Where timing gets interesting is the way choices in timing can affect multiple elements moving together.

As mentioned in the Spacing article, where Spacing is the placement of instances through time, Timing is the distribution of time across defined instance points, or keyframes.

Techniques

Real World Imitation

All good animators spend a great deal of time looking at real-world reference footage. Animal motion, the motion of objects under gravity: stones, balls, feathers, objects halted by a rope. Using natural timing at least as a starting point will cause objects to appear much more real. The closer the timing of an imaginary object mirrors a counterpart in reality, the more readily a viewer will accept it, irrelevant of how ridiculous the subject itself is. For example, an animated desk lamp that moves with the timing of a real, living creature can be more easily believed by an audience than a hyper-realistic figure which moves sluggishly or haltingly.

Where spacing demonstrates path of motion and slows and starts at a micro level, the wider choices about where objects move at what times is determined at a macro Timing level. These two concepts do blur quite a lot at their borders; I think of timing as requirements and spacing as the flair of a motion.

Timing Contrast

If one were listening to a drum which kept steady 4:4 time it would become very boring very fast. But with a second instrument playing a melody, or a second drum playing a different beat, interesting new combinations arise and we’re enjoying contrasts in timing. In terms of animation, this means that monotonous or homogenous motion across multiple objects is going to look bland, and a dynamic and heterogeneous cascade of objects moving at different speeds and in different styles, whilst requiring a little more effort on the part of the animator, will look much more interesting!

This isn’t always desirable, as often an audience is required to concentrate on something that isn’t moving, and in those situations a panoply of motion cues isn’t going to be advantageous.

Secondary Animation

Imagine a car driving around a corner (and our spacing is evenly distributed around the corner as we’re recklessly not slowing down), I guess you could say that this would be our Primary animation (an object appearing to move on it’s own initiative/by it’s own power). If the car has a trailer though we might call the motion of the trailer Secondary animation (an object’s motion that is separate from, but mostly determined by a primary object).

The other forces acting on the trailer might be gravity, it’s own momentum, the elasticity of the tether to the car, and if it were a lighter object, such as a flag, wind might be another factor. A flag on a stick, long hair on someone’s head, the tail of a kite, an injured arm hanging loosely from someone’s shoulder, even your clothes on your body are all examples of a secondary action linked to, caused by, but not identical to, a strong primary motion force.

This linked or tethered motion often provides a nice timing contrast, and good use of secondary animation both accentuates and deepens a motion and makes it much more interesting and attractive to a viewer. In fact, the emergent action of an object under forces is often more interesting than the primary motion. In touchscreen interface motion, the primary motion could be considered to be the gestures of the user and the interfaces move as secondary action.

Staggering

Some people like to call this overlap, and the definitions get very messy when you’re talking about it in terms of secondary animation or two parts of one object, but what it really means is two parts of the same object moving in a similar (or even identical) way at different times. This helps to separate the objects, and adds a lot of interest to the motion. Inversely, regular timing can unite otherwise separate objects.

These two groups are composed of identical frame instances, just presented out of synch by one and two frames for the staggering effect.

Cycles

Cycles are a really interesting technique, particularly as an economy measure. An animation cycle is where a sequence or motion may be looped and reused more than once. The difference between a ‘Cycle’ and a ‘Loop’ is that a cycle may only apply to one component, whereas a loop generally applies to everything that is displayed.

One of the most well-known uses for this technique is the “run cycle” where a character’s two steps loop seamlessly to create the illusion of an ongoing running action, when in reality the animator has obviously only been required to animate two steps.

The main difficulty in making viable cycles is preventing your audience from really seeing too much of the “seam” where the cycle repeats. In many cases there won’t be a seam: a spinning object, for example, could be said to loop from any point in it’s rotation. But more complex motions, like a character jumping, or running, often lend themselves to a logical starting point.

Keeping away from dead stops and overly regular spacing will help, obviously repeating frames will sit as a kind of afterimage in the viewer’s mind as the animation cycles. Where cycle economy becomes really powerful (infinite, really) is when there are several cycles working together, all with different lengths. Take this simple example.

Okay now brace yourself for some maths: Two cycles (with different timing) are playing in the next example, and the total length of the animation is double the longest of the two cycles. Despite doubling the on-screen time of the animation, technically we’ve only really stolen twelve frames for free here (24+36=60). But this is with two relatively compatible cycles.

If I had added another really short cycle with an uneven number of just five frames, the animation as a whole would not have truly looped until unique frame number 360, stealing us 295 frames for free and making the largest and most terrible gif ever to be displayed on the Internet.

This is great for long animations of spinning logos, but also useful for things like water ripples, cloud motion, shifting colours across an object. Extending cycle lifetime is the strongest way to avoid obvious repetition, and joining cycles like this is the cheapest way to extend overall cycle lifetime.

With the use of procedural animation, we can control these cycles just as we control loops in code: randomised frame segment orders, dynamic particle generators, and so on. Using these techniques, we can extend these cycle times dramatically, or infinitely, for no extra ‘drawings’ and close to zero extra effort. Eased rests, cycles and code-assisted animation are where an intelligent animator will be able to save the most time/money.

We hope you’ve enjoyed part two! Chat to us on Twitter and Facebook, or email us or if you have any questions!

Join us next time for the final episode in this animation basics series: Spatial Distortion!

Art, Stuff, TrainingSecret Lab15 January 2014

You Deserve a Holiday

Art, StuffSecret Lab31 October 2013art, holiday, you

Animation Basics: Part 1

This is the first in a series of posts about animation by Rex Smeal, animator, and friend to cephalopod and amphibia alike.

Animation techniques are usually discussed in terms of human figures. However, character animation is a very complex field, harnessing knowledge of physics, natural animal motion, conscious and unconscious physical decision-making of humans, body language, drawing and rendering styles as well as various acting styles - and that’s all before we’ve even set the figure in motion.

This introduction into animation will attempt to cut through all of that obfuscating, jargon-strangled mess, and get to the real nitty-gritty of animation: animation as it applies to ANYTHING that moves, be it a figure, a rocket ship, a bouncing ball or an interface component. Animation is both the art of bringing the lifeless to life, and the science of constructed motion, and neither of those things require a human figure or drawing skills of any kind!

Disney lists 12 principles of animation. In no particular order, they are:

Squash and stretch
Anticipation, Staging
Straight ahead action and pose to pose
Follow through and overlapping action
Slow in and slow out
Arcs
Secondary action
Timing
Exaggeration
Solid drawing, and
Appeal.

ALL of this is interesting, but MOST of this is related to drawing. I’m going to whittle and compress these down to three headings, and three separate articles: Spacing, Timing, and Spatial Distortion.

In this article, we’re going to look at the first of these: Spacing.

Spacing

Spacing and Timing are very closely linked concepts, and it can be a little tricky to mentally extricate them. Richard Williams (in The Animator's Survival Kit) describes Timing as the time between the bounces of a dropped coin, and Spacing as the movement of the coin between bounces.

What this means is that if we have only one second to move an object from A->B, spacing is how we choose to move it within that timeframe. For example, if an object moves for one second, at 24 frames per second, that means I have 24 instances of the object to place across that timeline.

Sometimes, that timeframe will be open-ended, but our choices on where/how to move objects from frame to frame will still matter. Unless you’re working with some sort of amazing analogue animation device, you will be distributing objects across discrete projected frames, so your choice in how to place them should be deliberate.

Here are a few of the myriad techniques.

Eased motion. Easing is the most commonly used form of spacing, and most animation software packages have some sort of in-built easing function that allows both easing IN and easing OUT. When easing is performed automatically by software rather than defined manually, we call it “tweening” rather than “inbetweening”.

Easing means distributing spacing so that one or both ends of a timeline are compressed, meaning that an object will move smoothly out of an old position or smoothly into a new position. You can use both at the same time to give a sense of the effects natural momentum. The important thing to remember about easing is that it exists independent of timing. The number of frames does not change, just their spacing!

Anticipation/Follow-through About the only thing that moves in a straight line on regular spacing is robotic components. Even then, they’re more interesting if there’s an ‘accent’ to the way they start and finish their motion- anticipation before the motion and some sort of follow-through at the end. All human motion involves anticipation to a certain degree, we move backwards before we move forwards, left before right, etc. It’s only a slight motion, but it’s always present.

So before we move an object anywhere, it can make sense to prepare, or to spin our wheels a little first, and once we reach our destination, maybe there’ll be a little overshoot and compensation! You can take it further away from the keys - that is, the start and end points of the movement - for a ‘heavier’ effect, or make the motions faster for a springy light motion.

Arcs Technically, this is a separate issue to spacing, but it bears mentioning anyway, and here’s as good a place as any. In the real world, most things move, to a lesser or greater degree, in arcs. Even if you move along a straight line with your hand, it’s because your arm makes an arc, and your elbow and wrist make more arcs to compensate. Thrown stones, leaping tigers, ocean waves, arrows and even bullets will all arc with gravity.

Afterimages. When spacing gets distant and the moving object is very distinct from it’s background, we sometimes see afterimages. One or more frames of the animation stand out, and leaves a kind of remembered image on your eye. This isn’t usually much of an issue if the animation is only seen once, but in a cycling animation it can make your afterimage-causing frames obvious: it reminds the viewer that they’re looking at a device that can only display images one at a time, rather than a smooth transition that can trick them into thinking that they’re looking at analogue motion.

Anyway, there are a few things we can do to beat this. Using a faster framerate (may not be practical depending on device rate/intensive rendering technique) We can play out our spacing so that there’s no such abrupt frames; if something’s moving really fast, it can sometimes be advantageous to skip these ‘afterimage’ frames. The other thing that we can do is to employ blurs, smears and distortions to negate the jarring visual contrast between object and background, which we’ll cover in later posts in this series!

Join us next time, as we take a look at how timing influences how we see animation!

Art, Stuff, TrainingSecret Lab15 July 2013animation, art, cool, pictures, rambling, rex