Exploration, Analysis and Application of the Bouncing Ball

Not working? Html version available HERE

The bouncing ball is crucial in animation because it can be used to give weight and life to a character. It is essentially just a trick or formula, but once learnt it can then be applied to a million different things.

I'll be showing in detail how and why it works and what happens when it goes wrong. I’ll then go on to show how it can be applied in animation.

Bouncing Ball


This is almost a textbook perfect bouncing ball. Ideally, the squash shapes wouldn’t be perfect ellipses - there should be more of the ball’s underside in contact with the ground. This would help with the strobing during these frames to. Unfortunately I did this in the program Maya, with limited time and perfect ellipses are what Maya likes to make. But hopefully these animations are good enough to demonstrate what I’m talking about.

You'll notice that this animation is not strictly realistic, it is an exaggeration of what a real ball does. And this is essentially what animation is - a caricature of life. If I wanted to animate a realistic bouncing ball I would still use the following formula, but I wouldn't use this level of exaggeration.

The basics of the bouncing ball are spacing and squash and stretch. We’ll explore what happens when you vary both of these. First, we’ll look at spacing.

Bouncing Ball with Guide


Here's the same animation with a guide following the top of the ball so you can see the spacing more clearly.

If you follow this movie from the start you’ll see that the spacing increases as the ball accelerates under gravity toward the ground. There is then a big gap in the spacing. This gap is a crucial part of the bouncing ball, it gives the animation it's punch and weight. You really want to push this gap as much as possible. The bigger this gap is, the lighter the object, the smaller the gap, the heavier the object. But, even in heavy objects, this gap should be considerable.

After this gap there is the most extreme squash frame followed by another frame that is in contact with the ground. The top of the ball in this drawing is near to, or 'favouring', the previous squash drawing. Having two frames at the bottom is also essential. After this, there is then another gap up, then the spacing decreases until the ball is back to it's original position.

The stretch on the ball is only used when the ball is moving fast. If the stretch is applied when the ball was moving slowly (near the apex) it would destroy the illusion of a solid object and we would get the effect of something far more flexible, such as a water balloon.

Bouncing Ball on ‘2’s


This lecture is designed not to be specific to one type of animation - drawn or 3d computer animation. However there are certain considerations in both. In traditional, drawn animation it would be likely you would first animate the ball on '2's. As we can see, the animation still works on ‘2’s, the problem we have though, is of increased strobing. However, it would be a mistake to create inbetweens over the whole animation so it was on ‘1’s. This could make the whole thing look like it's under-water. And it’s really not necessary over the whole animation as the top part still looks smooth. I would reccomend only inbetweening the lower part of the animation. But keep in mind your spacing. For example, don't put a straight inbetween in the gap before the squash, this would take the punch out of the motion. Much better to keep the gap in mind when you inbetween this, and push the drawing up, favouring the previous frame. A combination of ‘1’s and ‘2’s gives texture to the animation.

Bouncing Ball, Line Test vs Solid


Here we have the bouncing ball on ‘2’s again. And although, this doesn’t show it very clearly, the rule is - animation strobes more in solid form than it does in line test. This is because the solid ball has more contrast and therefore the individual frames are more apparent. So, if your animation is on ‘2’s and parts of it are strobing in line test, then you should inbetween those parts as they will DEFINITELY strobe when they are coloured.

Bouncing Ball, No Squash


Back to looking at spacing, as you can see from this animation, the spacing is so important that we can take the squash out of the animation and the ball still has weight. However, without squash the ball loses life, it looks dead, like a ball bearing. But it definitely has weight. So we can deduce that the squash and stretch adds life and spacing adds weight.

Bouncing Ball, Even Spacing


In this movie I have evened the spacing out, in each drawing the top of the ball is equidistant from the drawings either side of it. As we can see this effects the animation greatly, it suddenly looks very inorganic and machine-like. The animation is helped a little by the squash in it, but it is easy to imagine how completely robotic it would look if we took this out.

It’s very easy to make animation that looks like this - manmade and inorganic, and even spacing is often the culprit. The other offender is even timing, now that the ball spends the same amount of time at the bottom as it does at the top we have a very dull and monotonous motion. The ball looks much better when it spends longer at the top and just 2 frames at the bottom. So, in your animation, always strive to vary your timing and make sure your spacing isn’t even.

Bouncing Ball, 4 Frames of Squash


Now let’s consider weight in animation and how to vary it. A mistake often made is thinking that more frames of squash will add more weight to an object. As you can see, this is not the effect that it creates, it is even more apparent in the next animation ...

Bouncing Ball, 6 Frames of Squash


... in which I have 6 frames of squash at the bottom. The affect achieved is not of more weight but instead the ball starts to look like a small jumping creature such as a frog. It is worth noting that this can be an effect you want to achieve, if you were animating a frog. As with all examples I’m showing, there are always exceptions. The trick is to understand the formula so you can break it if and when you need to.

Bouncing Ball, 1 Frame of Squash


As you can see having only one frame of squash is also a mistake. The illusion of weight has been lost as our squash frame just flashes at the bottom of our animation. This is a common mistake, especially when trying to steal some frames to speed up an action, but reducing the time spent at an extreme to only one frame rarely works well.

3 Bouncing Balls, Different Gaps


We’ve seen that varying the number of frames of squash in our ball animation is an unsuccessful way of altering the weight of our ball. The way to achieve this is in the spacing. As you can see, these balls appear to have different weights; the one on the left feels like a ping pong ball, the one in the middle, a tennis ball, and the one on the right feels more like a bowling ball (if it wasn’t squashing as much ... and bouncing).

3 Bouncing Balls, Different Gaps, with Guide


This is the same animation as before, with a guide added, and you can now see all I have done to alter the weight is vary the gap between the last stretch and the squash. The top part of the ball animation is the same in all three, as is the timing. Note that the gap in the heavier ball is still considerable.

3 Bouncing Balls, Different Gaps, Different Sizes


If we were to now apply character design, or in this case scale, to the animation we can see how well the illusion of weight works. We can now start to see these as different weighted characters. If they were cartoon woodland creatures, the one on the left could be a squirrel, the one in the middle, a fox, and the one on the right, a bear.

Bouncing Ball, More Squash


Another common mistake in trying to add more weight is thinking that by adding more squash to your characters they will appear heavier. But, as we can see in this animation, this is not the case. The ball doesn’t look heavier, it just begins to look silly.

Bouncing Ball, Extreme Squash


This is especially apparent when we take it to an extreme as in this case. This is very entertaining, and this level of squash would be acceptable if we are animating a silly character, such as Roger Rabbit. But if this were done to a more sophisticated character, such as Mowgli from the Jungle book, he would not only look stupid but the audience would not have the same emotional connection with him. As the great Chuck Jones said -

“You can have fun with silly putty but nobody will ever love it or care what happens to it.”

Which is to say, it’s a lot of fun to distort characters to great extremes but if you’re animating a character, that you want the audience to care for, you have to be careful not to squash them too much as that will destroy that connection your viewer has with the character.
At the same time, you have to walk a fine line, because you don’t want to be too conservative and make your characters look stiff and lifeless.

Bouncing Ball, Tail Added


A good way of adding extra life to straighter characters, without squashing them, is with drag and follow through. In this animation I’ve added a simple tail and you can see that, with just this, I’m getting a lot more movement and life out of my ball. This is something you can really push in your animation and it will always help to improve it.
Often, your primary animation can be quite subtle but by pushing your drag and follow through you’ll get a lot more for your money. Milt Karl was a master of this, some of his animation when the individual drawings are viewed appears almost excessively floppy, yet it still works brilliantly. So, when animating a character always look for things you can drag and follow through such as hair, clothes, fur, ears, hands, etc. And if you are designing the character yourself, adding appendages or accessories that can be dragged is a good idea.

Bouncing Ball, tail, Hair and Eye


As crude as this is, hopefully you can see that by adding more drag and follow through you start to, firstly create something more entertaining, and also remove it from the boring bouncing ball and create a character.

Bouncing Ball, Richard Williams' Version


Before we go on to look at this idea further, I want to quickly look at another way of doing the bouncing ball. There are many different, and equally valid ways of doing a bouncing ball, this is the way suggested in The Animator's Survival Kit by Richard Williams.
The way it differs from the previous, Frank Thomas, bouncing ball is quite subtle. The two drawings at the bottom are reversed so after the gap, we go to a stretched drawing that is in contact with the ground, then to our squashed drawing. This, according to the book, helps us sense the change of shape in the ball.
This is true, we can now feel the ball changing shape as it contacts the ground, but this is in detriment to the weight of the ball. We now have the ball effectively cushioning in to the ground which has less impact than going from one extreme to another. Also, the ball now pings up off the ground instead of the subtle feeling of acceleration we had before.
I'm not going to say Richard William's ball is wrong but it's not perfect, by changing these frames you do gain something but at the loss of something else. However, knowing these variations is always useful in case we want to achieve this different effect.

Walking Legs


Let's now see how the bouncing ball applies to an animated character. Here are some legs I’ve animated walking, but at the moment they look very mechanical. They're also severely lacking life, and are completely devoid of weight.

Walk with Bouncing Ball Applied


In this animation I’ve added the vertical animation from our bouncing ball (I’ve put the ball beside the hips so you can see it). The weightless and lifeless feeling we had before has now gone.

Also notice I’ve put the lowest point of the hips 2 frames after the foot contacts the ground. And similarly the highest point of the hips is not exactly at the crossover but rather 2 frames after. The number of frames after the foot contacts the ground until the hip's lowest point will vary, but this is important to give the illusion of momentum. After all, the hips are falling at the point the foot makes contact with the ground and it takes a moment for the leg to catch the weight of the body.

Walk with Another Bouncing Ball


In this animation I've copied the vertical animation (ie. the bouncing ball) of the hips onto another ball and offset it by 1 frame which will hopefully make more sense in the next movie when ...

Walk with 2 Bouncing Balls


... I add another ball above this one, with the same animation again, but offset by another frame.

Now, hopefully you can see the effect created, the three balls represent the three body masses of a typical biped character - hips, ribcage and brain-case. The bouncing balls start to work in concert together and we get a very fluid follow through effecting the whole body yet the motion still has a sense of weight.

This is really the whole point, by applying the bouncing ball to body parts we can be confident they will appear weighty and by offsetting them we can achieve a fluid action.

We could apply this theory to many actions, for example, a vigorous point - the hips could drop down first, then the elbow, then the hand, and finally the finger. All of these maintaining the bouncing ball spacing we’ve learnt, but offset. And we can be sure of getting a very fluid, powerful and weighty action.

What we can’t squash is just as important as what we can. As I’ve already mentioned, the balls represent the three body masses, the hips, ribcage and brain-case. These masses can, to a degree, often be separated and given their own weight and movement. These parts are also the solid parts of the body and, if your trying to achieve a sense of realism, should not visibly distort (ordinarily). Squash and stretch should be added to the parts of the body that can distort – hair, ears, tails, muscle, fat, and the spine. And this mixture of stiff and flexible parts of the character will give us a sense of contrast within the character.

Although, we have to be careful about how much we squash and stretch the spine. It can help achieve a greater sense of squash and stretch in the spine by bending it. Although this character currently doesn't have a spine, it’s easy to sense that when the hips initially drop and the chest is left behind we would have the spine stretched out into a straight line, then a few frames later when the chest is at it’s lowest point the spine would be at a ‘squash’, shorter and curved over. And this shape change - going from a straight to a curve is always desirable in animation – you can see we already have it in the legs.

Walk with Nose


Now, as before, it helps to add some drag and follow through to your bouncing balls. You can see that just adding this small touch really helps to add life and weight to the animation.

Dragon Walk


To show how useful this theory is I’ve selected a couple of examples of my work where I’ve incorporated what we’ve just looked at. I’m not suggesting theses examples are brilliantly animated but they do show how this can be applied.

As you can see this dragon walk cycle uses the three body masses offset in a similar way to our bouncing balls. The chest is offset from the hips by about 6 frames, and I’ve put drag and follow through on the wings and tail. You'll notice that, unlike our walk, the head rotation leads the vertical movement instead of overlapping it. This is to give the impression of the creature putting more effort into the walk.

Squirrel Run


Here’s a squirrel run animation I’ve done, this movie shows the cycle from a ¾ perspective and, above, the same animation travelling along the ground.

Squirrel Run Profile


You can see when we look at the profile view of this animation how the ball motion has been incorporated in this cycle. This time the head leads with a one frame offset on the chest, then a 2 frame offset on the hips. The gaps in the falling balls have been pushed as much as possible, especially in the hips. And the tail has been used for drag and follow through.

I chose these two example as they make an interesting comparison. The Dragon is obviously an imaginary creature, and there is nothing alive today that we could use as reference for it, bipeds of this size died out millions of years ago. But, facing this problem, it's possible to rely on what we've learnt from the bouncing ball to get some thing that looks convincingly heavy and moves fluidly.

The squirrel, on the other hand, is a real animal. But to simply rotoscope live action footage of a squirrel would be a mistake. Whenever live-action is simply copied, the weight and fluidity of the action is lost. You should always strive to exaggerate or caricature motion, even when you’re trying to create realistic animation. And you can use the bouncing ball principles to inject life, weight and fluidity back into reallife motion.

So, even though the two creatures are totally different the bouncing ball can still be applied to both.

5 Frame Bouncing Ball


That squirrel run cycle was created in animation development for Charlie and the Chocolate Factory. We had to create a library of cycles, some running slower, some faster, walking cycles, burrowing etc. I decided to try to use this bouncing ball theory to create the fastest run I could.
If we go back to our bouncing ball, I've created the fastest bouncing ball possible. It still has 2 frames at the bottom but only 3 at the top. If we were to try and go faster and have just 2 frames at the top we would lose the difference in timing and the animation would look like a sewing machine.

5 Frame Squirrel Run


Here we can see that I’ve now applied the vertical motion of this bouncing ball to the squirrel. I have to admit that this cycle on the spot isn’t very easy on the eye, I’ve had to use some rather ugly poses to maintain our bouncing balls ...

5 Frame Squirrel Run from Afar


... but once we see the cycle as it will ordinarily be viewed, moving along the ground in a long shot. It works and we have achieved the fluidity and weight we were after.
It is worth noting that this is not the fastest cycle we could create, in animation books, like Richard William’s, he shows tricks to creating even faster cycles, but this is the fastest you can go using the bouncing ball.

Walk with Jaw


Here’s our walk cycle again, and now I’ve added a jaw, with the bouncing ball spacing, it's offset further and follows on from the rotation of the head. It’s not normally advisable to have the jaw opening this much during a walk cycle. I've done this to explain a technique of animating dialogue while the character is walking.
The trick comes from the old Disney animators and is this - choose the accents you want to hit in the dialogue, find the frames where the mouth will be at it's widest and work backward through the animation so that the movement of the jaw follows on from a footstep in the walk. So, the foot hits the ground, then the body drops, then the head, then the head rotates down, then the mouth opens at the point of the accent in the dialogue.
It's a technique that some of the old Disney animators used their whole careers and it still always works well. In fact it will look wrong if you don’t do it this way, if the mouth opens as the head is in movement, instead of waiting for the downward movement to finish, the mouth will look as if it's fighting against the action of the head.

Walk with Eye


I’ve now added an eye blink to one of the steps. Even this small touch adds an extra level of weight and life.
The eyelid also follows the same principles as the bouncing ball, and often should. This is not as important in long shots, but in close-ups, if you follow the bouncing ball spacing - starting with the eye open, cushion out to a big gap, then hold it closed for 2 frames, then a jump back up and a cushion in – you’ll get a very powerful blink.

Walk with Arm


Unfortunately I didn't have the time to animate this arm as well as I'd like, the idea I'm trying to show here is that bouncing balls are not always vertical. Here the ball moves on a curved horizontal path.
Hopefully you can see that you can continue to add more body parts that are bouncing balls and are further offset. As well as adding more drag and follow through, and you'll maintain the feeling of weight while giving your animation more life and fluidity. And hopefully I've shown that by using the simple bouncing ball as a building block you can create something more complex but still maintains the weight and life of the bouncing ball.