Animating Wearable Visuals

A popular and attractive application of wearable computing are garments with programmable visuals, realized using display technology such as LEDs. Programming such visuals is currently done at a low level, by writing microcontroller programs that control the activation of individual display elements. This approach lacks scalability – programming becomes progressively more unwieldy as the number of display elements increases. It is also ill-suited for implementing complex visual patterns that activate sychronously across multiple garments – when each garment has its own, separately programmed microcontroller, synchronizing visuals on multiple garments is a challenge. Finally, the approach is not particularly intuitive, as there is a disconnect between how display elements are accessed during programming (using pin numbers) and their logical groupings and physical locations on the garment.

I propose adapting some of the tools and workflows traditionally employed in computer animation to the problem of programming wearable visuals. I envision a system that allows authoring of animated visuals on multiple garments in a single place – a graphical animation tool on your PC. The lighting of many display elements across one or more garments could be programmed visually and using a much smaller set of logical parameters. For instance, imagine a shirt with an array of LEDs on the front and the designer wants to light them up in a pulsating heart shape. The designer could define a single animation parameter called “ShirtHeartShape” that maps to the pins of all those LEDs, keyframe its value at different times, and use interpolating curves to achieve a nice, pulsating effect. The designer could also author arbitrarily complex visuals across multiple garments by synchronously animating multiple such parameters. Most of the complexity, both in terms of algorithms and creative effort, would happen in the animation tool. There would be no need to program microcontrollers on individual garments – their only task would be to receive time-indexed animation frames (pin values) from the animation tool and realize the visuals by applying the frame values to appropriate pins.

Controlling display elements on a garment using hand-authored animation curves.
Controlling display elements on a garment using hand-authored animation curves.

As a further extension, I also propose an intuitive method for selecting which display elements should be controlled by a particular animation parameter. The idea is to scan the garment using a camera in order to obtain its image, and perform automatic registration to determine the pin numbers and physical locations of all display elements. The designer could then define the parameter mapping by using a sketch-based method (an equivalent of Photoshop lasso tool) to select a subset of LEDs directy on the image of the garment, and the system would automatically extract their pin numbers and compute the mapping.

Selecting display elements to be controlled by a single parameter using an intuitive lasso-like tool.
Selecting display elements to be controlled by a single parameter using an intuitive lasso-like tool.