P1PF3: The Flour Sack Section | aka P4

Timing.

The essence of animation. The sculpting of existence. The Big When. The difference between daily intervals, monthly intervals, and posting in March 2016 and again in January 2018.

Spacing.

The stuff above this sentence. Timing and Spacing are the two main principles of animation and had the medium been as ancient as these core ideas then Greek twin deities would have danced through the cosmos in analogy. Timing is knowing that I want this paragraph to end in seven more words, spacing is deciding which.

Defendably. I don’t think many animators would particularly appreciate the above metaphor as the ore of Timing and Spacing is already arguably hard to smelt apart and bringing in textual —and now metallurgical— comparisons is like a hot dog at a sandwich workshop. Much of the ado is that animation’s model of reality is unavoidably built on time and space being entwined; look no further than a reel of film: a spacial object holding a temporal purpose.

So you have the drawings that fill space, and the playback that fills time, and yet there’s no time to elapse without the sequence of spacial drawings, and the drawings don’t describe the space unless played back temporally.

You could reduce to circularly define Timing as the placing of the Spacing and Spacing as the manifestation of the Timing, the circularity accurately pointing towards their codependence.

The rest of the ado, the confusion —viz. mine— comes down to the fact that space-time; the hairy, complex, and quite literal physical concept; is such an existential fact that we intuitively make some practical sense of those words, but animation’s usage of Timing and Spacing is, while related, an art concept and not the scientific one. That is to say you only need to understand Timing and Spacing insofar as a tool with which to animate and not a step towards disserting Einstein’s spacetime. [Even so, I shouldn’t understate the value that learning animation offers to the betterment of understanding other fields, e.g. the skills of perception and patience of execution, meaning dissertations could be a product of learning Timing and Spacing]

Unlike spacetime, animation’s Timing and Spacing is rather obvious. So why this fretful preamble? It often taught bad. Not true; it often taught fine, but sometimes I have trouble thinkngi. I find the concept of Timing and Spacing is regularly taught in a thoroughly valid manner, specifically a way that segues the student from schematizing elemental concepts to pure intuition. This means that the student glides away from Timing and Spacing with a deep reptilian instinct for the principals but not the best forebrain language to explain how they know what they know. Kvetch all I want, animation is clearly being taught successfully without any of my here clarification; it is my own bogglement that spurs this, me, having used these principles for years, trying to make a passing description of Timing and Spacing and being totally stumped by my lack of clarity.

Most every instance I’ve seen of Timing and Spacing being taught is identical, so if there’re any holes in the standard methodology there are no alternatives. Well, here is one. Conventional methods use the terms Timing and Spacing as much as possible, cultivate a sense of intuition in the student, and pleasantly walk on to bigger topics without ever tightening the pipes of what literally the differences are between Timing and Spacing. So instead, I’m going to avoid using the terms Timing and Spacing as much as possible, present the idea in an unintuitive way, but entirely tighten the pipes fit for high pressure thinking. Any, and many, failures included in my approach can be supplemented with the enormous amount of conventional and well-conceived approaches to teaching Timing and Spacing but hopefully this might be able to fill in any thin points left by redundant strategies, like finally wiping the brush vertically after endless horizontal strokes.

If you’re comfortable with animating step out for a Golden Aged smoke break and regroup here. Otherwise, let’s really break this down.

Timing and Spacing are the fully realized conception of a desired movement whether in your head or on film. Close your eyes and picture anything moving; you have conjured a unique instance of Timing and Spacing. To express this movement we have to create either an animation or an unanimated schematic describing the intended animation. Animators often schematize Timing and Spacing into a standardized chart. How do we draw this chart? Start by just thinking of a timeline.

 

 

Here our timeline is divided into months. Months and years relentlessly wash over us like frames through a projector, so these will be used to represent frames of film. Frames are the unique substrate where Timing and Spacing coexist. Though derived from the physical boundaries of physical film played back physically at a set speed, frames are simply the consistent units of spacetime that comprise an animation — the distinction from physical film because digital art and virtual reality are redefining what parameters are necessary. The entirety of any animation will only use frames of one size and one duration. Frame size dictates whether the boundaries of the animation will be an Instagram square, theatrical widescreen, 4K, or any other geometric shape. Frame duration; or frame rate, frames per second, or fps; dictates how long each frame stays on screen before changing, usually a fraction of a second, and historically being 24 frames per second — 24 fps in both live action and animation perpetuates a classical playback impression but consider YouTube uses 30 fps, sports broadcasts and video games like 60 fps, Peter Jackson is a fan of 48 fps. For animation, I’ve always found 13 fps to be the most comfortable, a prime example of a preference digital art facilitates.

 

 

So we have right now a theoretic sequence of frames to pass through in succession like the timeline passes through months; the arrow of time moves only one direction. Separating animation from live action film is the fact that each frame is always a conscious choice. And the most elemental choice in animation is whether will we just reuse the previous frame: new frame or same frame. If you wanted to simply reuse a single frame for the entirety of that timeline that is completely possible, but it’s important to understand that it will no longer be 1 frame, but 48 frames that all look identical: the arrow of time keeps moving, even if you don’t change anything.

 

 

Now even Ken Burns doesn’t want to dwell static on a perpetuated single frame, so most likely you want the frames to change. Instead of 1 frame held for all 48 frames you’ll need to replace some or all of those frames with something different. But changing frames is the hard part of animation because that’s where you decide the rate of change both in time and through space. So how do you change frames? Since the animator has to consider every single individual frame, and the animator also has a finite life span, the animator needs to acknowledge that certain frames are more important than others. What frames are more important? Frames with important changes. So instead of looking at the entirety of 2015-2018, let’s triage.

 

 

Choosing significance from this timeline let’s highlight months I posted to this blog. That gives us 4 changes to the blog’s timeline. We can see a concentration of changes at the beginning with the spaces getting exponentially larger. Using this as a framework, what would a chart like this mean for animation?

 

 

Here we have 4 frames and we can see a concentration of frames on one end with the spaces getting exponentially larger. So what does this chart mean? Most basically, it could be used to refer to this motion.

We have a ball easing out as it rolls with the arrow of time, meaning it starts off slow and speeds up.

Consider the opposite. The same amount of frames easing in, where the movement starts off fast then slows down. This does not express the rate I’ve been posting on this blog.

Because there are so many potential frames and the animator most regularly thinks only of “frames with important changes” the animator makes those important frames first. But if you wanted frames to last longer, or just want the motion to appear smoother you can add more frames between the important ones.

Now the ball’s movement is much smoother, though it’s built entirely on the original 4 frames. This is the basic chart in action and this above example alone is essentially the distilled conventional lesson of Timing and Spacing: you probably adequately get the premise that depending on the concentration of frames movement is conveyed differently but you’re maybe not entirely sure how to apply this. So let’s start picking at this. Let’s get itchy.

If you look at our timeline source material you’ll see that the above chart doesn’t actually reflect the original timeline’s lines. When we added more frames to make the motion smoother we just placed them in between each of the original frames, but that doesn’t reflect where they appear here.

 

 

While the timeline’s important changes do reflect this chart below

 

 

when you add the rest of the lines between the important changes you would get this instead.

 

 

This is a chart based on the timeline. There are the same 4 important frames, but we’ve added all the other lines. To compare with the smoothed ball animation, this chart labels 26 frames while the other labels only 7, and this chart, like the timeline, doesn’t have an additional frame between important frame 1 and important frame 2. So what would this chart mean?

First of all, identical to the timeline, all the lines here are spaced evenly. This is different than our ball easing out or in where there was a concentration of lines on one side of the chart. So if the lines are spaced evenly, then the ball will move evenly.

However, the ball rolling evenly with the arrow of time misses the significance of animators focusing on important frames: why are those 4 frames circled if those 4 frames have nothing special about them? The frames animators focus on, the frames with important changes, are called extremes with all the frames in between them fittingly called inbetweens [forever preventing me from remembering that “in between” is two words or hyphenated]. You could further designate key frames as extremes with storytelling significance and breakdowns as the frame directly between extremes with inbetweens filling in where needed to maintain the Timing. Animation genius Richard Williams famously emphasizes how the hierarchy is solely their scale of movement because all these units are actually of equal importance. For our purposes we only need to think of extremes and inbetweens.

This animation doesn’t relate to the chart because there are not 4 extremes.

Now there’d be a really simple way to cheat significance by, say, giving each extreme a different color.

This is an entirely accurate usage. Each extreme is notably different and we can easily see the harsh effect of going directly from extreme to extreme vs the smoothness of having more inbetweens as we transition.

But here’s where we get itchier. Ball examples only get us so far. Balls rolling are like the platonic ideal in animation: so perfect and so simple that it almost (almost) doesn’t give us enough to confidently progress from. Consider, so far we’ve been able to create believable movement that follows naturalistically left to right on the chart just like the arrow of time on the timeline. Can the chart work right to left? Balls are so perfectly obvious that when conceptualizing movement beyond them you start to realize you don’t quite get it.

Until balls become the exclusive subject of animation we need to be more dynamic in our understanding.

But let’s begin sensitively; let’s just mix a few letters and animate a blob for a second. So instead of each of the 4 extremes being an arbitrary ball in a timeframe, now the timeline’s 4 blog posts will show where blob goest.

Here are our 4 extremes. We can see that each frame is given a unique expression — each frame shows an important change. We can also see frame 2 is held for 2 frames and frame 4 is held for 22 frames, this is because frames 3 and 5-25 don’t communicate something as extreme as these positions and will be inbetweened after. So what would that look like?

A few things to point out here. One, the pace of the blob appears roughly as even as the chart lines. Two, the smaller actions of the inbetweens from frame 4 to 26 are clearly of as equal importance to the unique expression of movement as the extremes are. Three, the blob leans left in the beginning (against the timeline’s arrow of time) and goes right beyond the chart before glomping back (against time); the chart is schematic, it doesn’t have to be read linearly: the chart lines show the proximity of the frames to each other, not necessarily the direction of movement.

Now let’s scratch harder. Let’s look at the same chart describing something wholly not following the linearity of the timeline.

Our worm here has 4 unique poses each necessary for conveying the desired motion — so all 4 are extremes. Looking at the lines’ Spacing, line 1 is closer to line 2 than 2 is to 4, so likewise extreme 1 is closer to extreme 2 than 2 is to 4, and extreme 4 and 26 are decidedly different.

But the even Spacing of the inbetweens (frames 3 and 5-25) indicate that those poses will be even increments between the extremes, like so.

As an aside, you may be thinking that these displaced movements aren’t conveying anything more relatable than a ball rolling. Reflect, then, on your own expressions were you a worm finding itself next to a sketchy individual.

As per my preference this is 13 fps (a gif speciality).

So now that we are understanding the relationship between motion and these charts, what of Timing and Spacing?

 

 

Spacing is the distances between the lines on the chart.

Timing is the amount of lines on the chart.

Which when translated visually means:

Spacing is how different the frames are.

Timing is how many frames there are.

And have the interplay of:

Large differences in Spacing equal fast change. Small differences in Spacing equal slow change.

Large amount of frames equal slow Timing. Small amount of frames equal fast Timing.

So to return to our examples, these have the same number of lines but different distance relationships. These have the same Timing but different Spacing.

These distances have the same relationships, but have a different number of lines. These have the same Spacing but different Timing.

These have different distance relationships between their lines and have a different number of lines. These have different Timing and different Spacing.

These have the same distances and same number of lines. These have the same Timing and same Spacing.

What I always found so confusing to verbalize is

• Timing is often described as the tempo or rhythm of a motion, which is fundamentally true, true in the same intangible way that good comedy also depends on the tempo or rhythm of delivery. What was less clear is how rhythm becomes a quantifiable entity like the differences of Spacing, and while accurate examples are given they are often couched in language of “when” things are supposed to happen and not literally add or remove frames to make it feel right. So under this lens Timing is something you tap out with your pencil, eyes closed.
• Timing is often misleadingly described as synonymous with the extreme frames, i.e. the important frames are your Timing frames. What makes this confusing is that the extreme frames are extreme because of Spacing differences, Timing is dictating when those extremes are seen. So under this lens there’s a fractal-like model with Timing being the parameters set by any two frames and Spacing being the span between them; select any 2 frames within that span of Spacing and now those are the Timing with a new theoretical set of Spacing frames between those.
• Timing and Spacing are often simply presented as Timingandspacing with the animation principles illustrated accurately but just never differentiated from each other. So under this lens you would need a third theoretical principle, Posing, which becomes the thing to contrast with Timingandspacing. Posing is then the “language” Timing and Spacing use to talk to each other.

None of these ways are a horrible approach to animating, in fact focusing on one of those bullet points could be more advantageous for some learners. The problem is the specific words Timing and Spacing appear every single place animation is explained so any deviation from those literal principles really deserves a whole new set of terminology. I’m not redefining the Timing and Spacing, I’m attempted to standardize how they’re related.

And then at this point you might be interested to know that this all comes together to give the impression that 2D drawings of a half-filled sack of flour look like something that might really exist.

 

The post title, “P1PF3: The Flour Sack Section | aka P4,” is, I probably should clarify, referring to this being blog post 1‘s 3rd postface, addressing the flour sack from post 1, and being the 4th post in total. It should also be noted that this is the conclusion to the post 1 appendices that these [1, 2, &] 3 postfaces have comprised, meaning that from here onward welcome to “the blog unclogged.” The choice of postface, if you’ve wondered, being the less popular night shift coworker of daytime preface, instead of the more familiar postscript, is because of the postscript’s identity as afterthought and the pre/postface’s identity as divulgence of developmental history, my intended purpose. “Post 1 Postface” is also just such a disruptingly macro-assonant phrase the likes of which I’m always hopelessly charmed by.

[Call & Response Segment]

HOST (V.O.)

So what does this actually have to do with Post 1?

AUDIENCE (O.S.)

Not much!

The premise of these postfaces has simply been to unload the leftover media I generated for Post 1; with Melvil Dewey famously allocating section 741.58 for not just the flour sack exercise but animation theory in toto it seemed fair to dally in broad animation pedagogy before regrouping back around the sack. Yes, we’ve progressed from the discussion of balls.

I had originally displayed only an outlined sketch of this animation as the context was that of an unfinished product, but with the unfinished product being my finished product I started to apply what would be an inappropriate amount of attention were this to remain the unfinished product the flour sack is intended to be. First, you can’t help but think about color. Then you get curious how much more informed the shapes would feel if given the dimension of shading. Then you want to see that dimensionality within an equally dimensional space. Then you think, screw it, let’s get a camera in here and simulate an actual film; compare the above gif with the static view below (perfect for CinemaScope if you hate HD).

While something like shading is often exclusively an element of glitz in animation there are times when it can inform movement as much as the base movements of the subjects receiving the shading. By glitz I mean an effect or technique that looks appealing to the eye but does not require any real consideration of animation principles — a lot of CG animation is victim to more effort being placed on glitz than other elements. Glitz can be a significant layer to the overall presentation of quality and shading specifically can be that feature: Who Framed Roger Rabbit is maybe the best example of shading serving a significant purpose to the animation. Since there’s obviously skill involved what I mean by “not requiring any real consideration of animation principles” is that something like shading, usually, could be done to the frames entirely out of order without terribly affecting the overall appearance of the animation being shaded; this is because (1) a light source is usually static and a good artist could look at a shape and its light source and make convincing shadows, and this would be true of every frame regardless of how it was moving, and (2) shadows will follow their own pace anyway — literally the speed of light, which usually isn’t the speed your animated subject is moving. What that 2nd point means is that despite the inclination to animate a shadow closely following along with the subjects’ movements, it is totally natural and okay for a shadow’s movements to be far more erratic as long as it’s true to the light source — e.g. how “blinky” the roof of a car would appear if traveling under the dappled light of tree cover; however, as always with animation, if you don’t like how it looks you can literally make it behave however you like. Anyhoo, there is occasionally an opportunity for shading to greater inform the subject’s movement as in this moment with the flour sack. Here the sack is flopping towards the viewer with some extreme foreshortening, meaning that while the sack is covering a lot of ground in-film, the drawings don’t cover much ground on-screen; when simply an outline, this movement is implied well enough (the motion is fluid and pleasing) but the shading actually gets a more extreme unique movement compared to the sack itself due to light blocked by the sack’s flop. Here the shading makes it much clearer that the sack’s movement is flopping over instead of maybe rolling or smooshing over. Truthfully, that moment is only in the animation because I got to the end of a natural sequence of motion and the flour sack still wasn’t back in its starting position — so the shading was welcome refinement of the shoehorned movement.

When making the additional effort of carving a little more Z-axis into this animation it suddenly struck me that I wasn’t entirely sure whether or not this physical consumer good was being returned to it’s upright position after mishandling itself. So to keep track of its orientation I stitched some red thread to its top seam and printed a logo on its front.

Sure enough, while the little bugger always returned facing outward it takes ’em 2 laps to return to ‘er upright position [I’m realizing in an unexpected transcultural castling that Southern truncation makes uniquely modest gender-neutral pronouns]. There’s something deeply compelling to me that the same drawn lines used to express an entity moving about the screen could accurately describe the shape being both upside down and right-side up; now well a still frame for which you could attribute the same property isn’t particularly notable, that this full animated loop contains both this property and the rotation between the two orientations is; as in the original animation (without the red stitches) is still flipping the flour sack every lap regardless of whether you notice it and more importantly without any additional frames: 104 frames of drawings creating 208 frames of on-screen reality. It’s a rare occurrence in animation for work to multiply content instead of simply subtract from your lifespan; sure a standard animated loop, say, someone running, uses a few frames to make a character run for an endless amount of time, but there you’re simply repeating an identical action; here, the flour sack does a “handstand” and repeats the action differently on its “head” without requiring additional drawings. To put it another way, if you were to recreate this loop with stop-motion animation (and eschewed optical short cuts) the animator would have to film all 208 frames (two laps) before the animation would technically loop. All conceptual, of course, because it only works since you can’t really tell the difference.

And is it any surprise that we’d naturally have some difficulty keeping track of such nuance when our eyes are convinced that this flat plane of tiny changing glowing blocks is a flour sack dancing? To illude there is life, what an endeavor. And we do so making the same 2-dimensional lines cavemen used, interpreting the light hitting our eyes to explore time and space. Read that back in the voice of Werner Herzog and you’ll like it more. Read this in his voice too, “and while the ancient figures left on cave walls stand as the only remaining voice of their distant existence, we can reach them as our own facsimiles, alchemizing the unalterable gap of time with the unyielding presence of space, and join them in the dance of the flour sack.”

Alright. I’m glad I’m finally done with this one. It feels like a sack of flour has just been lifted off my shoulders. See you next time for Post 5 which will finally have nothing to do with Post 1: “Post 5 | The Preface to the Real Post 2 (Which Will Be Released As My 6th Post).”

jk

Punctually yours.