In partnership with Genuine’s front end development team, The Age of Intelligent Things was designed as a bold brand anthem that advances at the user’s pace. Careful looping of each scene driven by some cool Javascript wizardry helps make the experience far more immersive than a standard video asset.

Loop theory

Looping is one of my secret loves. The Age of Intelligent Things was all about moving forward, so we had to visually sell an infinitely continuous world to make sure the user's interactions with the experience never missed a beat. To pull that off, I had to be precise with every keyframe and the placement of every texture.

A perfect loop depends on two constants—an amount of time (the period or interval) and an amount of space (position or volume). If everything in the scene travels a set distance over a consistent period of time, the loop will flow seamlessly.

An amount of time

To maximize performance and minimize users’ download times, each loop period had to be as short as possible. Because the art direction of the early scenes was fairly sparse—little more than a “hero” object placed on a lightly textured white plane—keeping things short wasn’t much of a problem. The Ford Model T, for example, clocked in at only 48 frames. The exception was the assembly line scene. Our story demanded that the assembly line be all about bustling complexity, and selling that complexity without an exhaustingly obvious loop point meant negotiating that scene’s period up to a massive 192 frames.

I couldn’t always settle for the shortest viable period, though. In the locomotive scene, for example, the engine’s drive wheel could complete a full rotation at a reasonable pace in exactly 36 frames. But with its more complex rocky field underneath, a mere 1.5 seconds didn’t allow the train to cover enough ground without the viewer noticing the seams in the terrain. The solution was to double the period to 72 frames, which effectively doubled the amount of space that the rest of the scene had available to do its thing, before resolving again at its initial position.
 

An amount of space

The amount of time in the locomotive scene was defined by the rotation speed of the drive wheel, so it followed that my amount of space would also come from that wheel. In order to loop seamlessly, the ground at frame 72 would need to look identical to frame 0. Since the wheel completed two full rotations over the loop period, that meant the slice of ground I created—everything from the rocky texture to the number of railroad ties—had to be exactly twice as long as the circumference of that wheel, before seamlessly tiling. As long as I did my arithmetic right, all the scene’s elements would invisibly meet up at frame 72 and the loop would perform perfectly.

Adding variety and hiding your work

If handled carefully, a consistent amount of space over a consistent amount of time will create a perfect loop. But if you stop there, all the elements of that perfect loop will converge on that first frame, making it easy to spot the loop point, and breaking the illusion of continuous motion. This was especially apparent in early working drafts of the assembly line scene; the mechanical movements of the arms syncing up together meant the action fully stopped and started at the loop point.

Back at the drawing board, I started by simply shifting half of the arms backward in time, so that their actual first frame occurred before frame zero. It didn’t matter how many frames these actions were offset by, only that they still repeated after the scene’s specified amount of time. After some edits to the animation to better choreograph the movement between the two sets of arms, the loop point of the scene became invisible and the result gained much more complexity.

All 3D execution (excluding select stock models, licensed as static meshes), compositing, and sound design by Jared Flynn.
Agency: Genuine
Client: PTC