When I think of classic cartoons one of the first things to come to mind are the cheesy animation that seem to loop ad nauseam. If only they harnessed the power of prime numbers they could have had beautifully seamless loops with very little effort.

First a primer on primes

An excerpt from the Wikipedia entry on prime numbers:

In mathematics, a prime number (or a prime) is a natural number that has exactly two (distinct) natural number divisors, which are 1 and the prime number itself. There exists an infinitude of prime numbers, as demonstrated by Euclid in about 300 B.C.. The first 30 prime numbers are 2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97, 101, 103, 107, 109, and 113.

Ok, that’s great, but what’s in it for me?

By using prime numbers we can create complex loops composed of layered movieclips that seem to loop without repeat because of varying timeline lengths. Below is a simple demonstration of what varying length timelines look like when composed together.

As you can see using four symbols with timelines of length 3,5,7 and 11
create a loop that repeats only once every 1155 frames!

I see. That’s pretty cool but aren’t the loops repeating?

Yes. Even by using prime numbers there will eventually come a point where the loop starts over. The trick here is to create a reasonably long time before that happens. By increasing the prime numbers we choose for our movieclips we increase the time before the first repeat. If we chose 3,5 and 7 for our three timelines we would begin to repeat on the 386th frame which might be enough for something simple like blinking lights on a computer terminal. However, by changing the timeline lengths to 5,7 and 11 we jump to a whopping 1155 frames before the first repeat! This only grows exponentially as we both increase the number of composed symbols and/or increase the prime numbers we chose.

Example

In the example to the right I use eight separate movieclips (in order of depth starting with the highest z-order):

1. Hand: 17 frames
2. Arm: 13 frames
3. Body: 23 frames
4. Train: 37 frames
5. Reflection: 23 frames
6. Grass: 829 frames
7. Trees: 2633 frames
8. Sky: 1 frame

The movie is set to run at 30 fps. Because I used prime numbers the animation won’t repeat for a very long time even if we didn’t count the very slow moving background image. The varying timeline lengths give the overall animation a more random and continuous effect rather than an obvious looped one.

Couldn’t I have written some ActionScript to do this instead?

Maybe, if you needed to control the animation on say dispatched events I could see an argument. Aside from that, why would you want to? Flash is is foremost an animation suite. Why not take advantage of what it does best — timeline based animation? Sure, you could knock yourself out coding a bunch of procedures to randomly jostle each component but it would take longer to do and only add more lines of code to your project. Any good programmer will tell you that when it comes to programming, less is more. The less code you have, the less time spent on debugging and refactoring.

Let me know what you think and if you see areas where this technique can be improved upon.

Download the source code to this article.

This entry was posted on Sunday, September 3rd, 2006 at 10:37 pm and is filed under Flash. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.