Motion studies: how little is enough?
I attended the Skowhegan School of Painting and Sculpture (opens in a new tab)in 2005 on a fellowship for my drawing and film/video work. After that I got to work at MTV producing the digital side of on-air shows & events, then, a move to McKinsey building editorial, digital, and enterprise products. Through it all I have never stopped drawing and experimenting.
Motion has been a thread through all of the above. As a UX Designer it is not optional, transitions and interactions are how an interface explains itself. That said, I have also kept a separate interest in motion graphics and effects, and a fun habit of learning and testing emerging tools in this space.
While browsing some of my video files recently I noticed a common theme: how little is enough? Can three frames make something feel alive? Can you build a pattern with one calligraphic stroke? Is one dial enough to create variations of an image? Will one bit of color do?
None of these clips were briefed or assigned. They are studies driven by curiosity and made in After Effects, P5.js, and Procreate.
Three frames
Four loops, drawn and animated in Procreate. Each one is only three frames.
How little is needed before a loop reads as movement rather than a flicker?
Two frames reads as an on/off switch, four frames already starts to feel a bit like animation, but three frames sits in a strange place where the eye fills in motion that was seemingly never drawn. Surprising how just three frames can lend a loop a feeling of “being”.
My favorite is the “Solomon's Knot” (aka “Lover's Knot”) in the upper left, this is an ancient image dating back to the Bronze Age with symbolic meanings related to eternity, union of dualities (hence its alias as the Lover's Knot), protection, and wisdom. Also like the idea of a looping loop.
One stroke
This is also made in Procreate with a custom brush. Built entirely from basic calligraphy strokes, repeated and varied until they accumulate into shapes and then fields of texture.
I have drawn systems like this by hand for years. Mazes that never resolve, alphabets for languages that don't exist, grids that drift and morph. Systemic drawings where an established rule is repeated until completion. This is the same idea from the drawings but in motion.
Live, in the browser
Two effects running on the same webcam feed, side by side.
I built these in the browser with p5.js (opens in a new tab)because I wanted to adjust the values while watching live video. The point was to find the settings by feel, then keep the frames worth keeping. It's another example of how you can build your own micro-tools to generate graphic effects, or even interface interactions.
Adjusting the dial, I noticed the misregistration has a number. Zero is aligned, six is broken, everything in between is available. That makes it a state rather than a texture, and a state can carry information. Content that has not loaded could sit at four and settle to zero as it arrives. A stream that is buffering could drift out of alignment and come back when it recovers. The printing error becomes a loading state.
Time as a direction
In an ordinary video every pixel in a frame comes from the same moment. Here the row a pixel sits in decides how far back in time it is read. The top of the frame is now. The bottom is a second ago. Everything between is a distortion.
The technique is old and usually called time displacement or slit-scan. I was primarily interested in adding new layers of abstraction to an already abstract form.
Built in After Effects. The score is mine as well, played on my mountain dulcimer.
From play to product
Finally, here is an example of how the exploratory processes above can translate into shipped assets.
I learned some things on the prior time displacement sketch that came in handy when I made this animated hero banner for a McKinsey cybersecurity piece in After Effects.
It pays to play.