centre for animation & interactive media

Animation Notes #8
Cyclic Animation
[ Contents ] [ Prev ] [ Next ]

 

THE DELIGHT OF VISUAL RHYTHMS
Human beings find aural and visual rhythms immensely satisfying. In fact we are pattern seekers and take great pleasure in notions of 'return' and the familiar. Animators have taken advantage of this human disposition.

CYCLES - CUTTING DOWN THE WORK
There are lots of tricks that animators constantly use to cut down the amount of work to be done. Cycles of repeating action are just one of these ways - and whenever animators find an opportunity to include a cycle in a sequence, you can bet they will seize upon it.

Some of the very early cartoons were almost entirely based on cyclic actions, especially when it was discovered that animation could echo the rhythmic patterns found in music. Walt Disney’s 1928 ‘Steamboat Willie’ was the first sound cartoon to amaze audiences of the day with its close synchronism between image and sound. This relationship was exploited to the hilt, (giving rise to the term 'Mickey Mousing' - a sound track which follows exactly what the image is doing) as was the use of cyclic animation which took its cues from the repeated phases and beats of the musical score.

TYPES OF CYCLIC ACTION
Cycles can be cyclic in nature, that is, the artwork is used in order 1,2,3,4 followed by exact repeats of that order again 1,2,3,4 etc. This type of cycle is useful for representing things like a wheel spinning. Cycles may also oscillate. That is the artwork is used in order 1,2,3,4 but then the artwork is used in reverse order 4,3,2,1 to return to the start position again etc - like the motion of a clock pendulum. Or indeed cycles can be random, 1,4,3,1,2,4,3,1,2, etc - to mimic a flag fluttering wildly in a stiff breeze. Using the technique of cycle animation, it is possible for the animator to reuse such a sequence of drawings over and over again to build up screen time without any additional effort. Some cycles may consist of only two drawings, while others may be involve several tens of complex actions.
Above: an oscillating cycle. Fairings at each end of the above movement, give the illusion of acceleration and deceleration, resulting in a smooth change of direction.
Above: a cyclic cycle. Again, fairings are used to make the blob dwell slightly at the top of its rotation. In other words, the inbetweens are closer together here and are spaced further apart at the bottom of the rotation. Above: a random cycle. A set of drawings and images are shot in any order at the whim of the camera operator.

SOME EXAMPLES


Roll over the man on the bike to the right to make him ride. There are two cycles here. A 'resting' pant cycle consisting of only 2 drawings with asymmetrical timing, the breath-in pose being held slightly longer, and the riding cycle consisting of 5 drawings.

Note the way the bicycle wheels are treated. Lots of fussy spoke detail simply would not work (heavens! the wheels might even appear to go backwards as cart wheels always do in the Westerns - but that's another story). There is however a distinct smudgy blur which helps the eye follow the rotational movement of each wheel.

An Endless Road -
Roll over this road with your mouse to travel down it endlessly.
 
This simple 4 drawing cycle can fill the screen with rich motion. It only needs a small number of drawings because of the patternistic repeating elements in its design. One telephone pole, tree, or road line only has to animate into its immediate neighbour, not be animated all the way from infinity. We need to obey the laws of perspective, however. As the elements recede into the distance, not only do they get smaller, but the apparent distance between them also gets progressively smaller. All we need is a foreground element of a truck wobbling about, and the illusion is very strong even though the solution is so simple.

Parts of this machine cycle also work for the same reason as the road example. Each tooth on the large gear animates into the tooth of the next. Because there are many teeth on the big gear, it appears to move slower than the smaller gear.

Besides these rotational movements, there are also translational motions as well distortions involving squash and stretch. Some parts move smoothly, while others like the rocker thingo at the back, which has an oscillating arc movements, has a thump
to it courtesy of the arrangement of its fairings. An amazing richness and variety of motion is coming from just 6 drawings.
Roll over this machine to activate it.

A minimum of 3 drawings are needed to establish a direction of rotation as in the fan example (right) and will keep it spinning forever. Two drawings create a back and forth oscillating motion which can be ambiguous when used for rotation.
 
4 drawings keep this lady's hair blow'n in the wind of the fan. The tips of her hair is a collection of wild shapes, while the decorative line work starting at her forehead has ripples running through them to give the wind a sense of direction.




OFFSET CYCLES
Grass bobbing in the wind, waves lapping on the shore, repetitive human or animal actions and the workings of machines are just some examples of motion which can be convincingly represented by a repeating series of drawings. These complex movements can be represented through forms of abstraction. Rhythmic visual patterns are also very meditative to look at.



There are also two cycles involved in the movement of these reeds in the wind (left). One cycle picks up the reed as the wind blows stronger, while a second cycle sustains the action as though fluttering in a constant breeze. Exactly the same animation is used for the 5 reeds, but each is out of phase by a couple of frames not only to make the animation far richer to look at, but to suggest that the wind blows from the left and affects each reed at a slightly different moment in time - the Mexican wave effect. The sparkle on the moonlit lake is also a cycle - an effect which was created automatically by pulling one piece of artwork across some randomly placed holes in another. By the way, there are only 8 colours in this scene.


A 3D version of a rich patternistic cycle (right). The apparent complexity of motion within this sequence comes largely through the cloning of one red frond and one green stem and the way the staggered timing of these elements move across each other. This test was made in 1985 during research into 3D computer animation.
 

THE WALK
Of course, walking is also a rhythmic cyclic action which can be described using a handful of drawings which can be repeated over and over again. For more about walk cycles, <click here>

"Hey! I'm nothing more
than a set of repeated drawings" ...says dino dejectedly. "I think I'll just walk to the edge of
that cliff"

Mickey Mouse features in Walt Disney’s 1928 ‘Steamboat Willie’, purportedly the first sound cartoon film. A rhythmic musical sound track provides the cues for various synchronised visual rhythms.

Mickey Mouse at it once more proving time and time again that when he hits a pot or a pan, there is a corresponding sound.

Special bonds connect film images to film sound. The animated film, in particular, has always enjoyed an intimate co-relationship with its soundtrack. The visual elements and the audio track seem to share a more creative partnership.

The animated film-making process itself encourages a higher degree of synchronisation than is practical within other forms of moviemaking. The animation film’s images are designed and executed frame by frame. So it is with the accompanying sound track, which can also be studied and measured with frame-by-frame precision. Hence, the inherent nature of the technology encourages a closeness between picture and sound.

Animated images and sounds also appear to share many common elements of structure. A musical tune, for example, is often characterised by a simplicity that is a lot like the graphic simplicity and the familiar gestures we recognise in cartoon characters. In many animated films, there exist close counterparts for certain musical elements. Repetition in music is like repeating a set of drawings or camera movements; tempo is related to visual beat; dynamics in musical performances correspond to narrative and graphic exaggeration; orchestration relates to the overall colouring and structure of an animated sequence.

In fact, animators used to work with bar charts, sheet of paper with columns indicating each second of film. They would then graphically chart up the various action accents necessary for each shot. The end result was sheets of paper with notations which looked somewhat similar to a musical score.


This 9 frame GIF animation (below) was designed to suitable for a web page icon. Felix Hude created this animation of Mr Pumpy as a give-away link animation to attract people to his 'Cycling Through Asia" web site. The bike operates on a 3 drawing cycle, while the background elements pass through on a 9 frame cycle (a multiple of 3). Its a real funky site, so just click on the animation to go there.


The above animation occurs within a 48 x 48 pixel matrix. At this scale, some pixels are just popping on and off. For a research project which investigates the issues of designing animation and interface icons at such small resolution see "Developing Pixel Based Graphic Images in a Data Restricted Environment" by AIM research graduate, Joohyun Lee. Joohyun's work included the collaborative development of 6 mobile phone "Lifestyle" games in association with Korean companies.






Nothing new under the sun...
A Phenakistiscope disc from the 1830s. Could this perhaps be one of the world's first animated horror special effects? Working on a similar principle to that of the machine (above), one rat animates into the next - repeating elements. Although it is only a 16 drawing cycle, 39 rats fit on the surface of this disc - enough to give one nightmares if you suffer from Musophobia. The clever way the rats scamper across the disc and seem to disappear out of sight behind it, where the operator's hand is holding the device, is added cause for concern. For a complete list of Phobias <click here>




SOURCES AND OTHER REFERENCES:





[ Contents ] [ Prev ] [ Next ]