Drawing Transforms (d•ts)
A Unifying Interaction Method to Procedurally Manipulate Graphics Across Style, Space, and Time
D•ts are a technique that let artists use drawing to specify expressive user-defined procedural functions.
Through d•ts, artists can procedurally create and edit individual or collections of artwork stylistically, spatially and across time:
Example A Modifying a property distribution - changing the position of a collection of graphic elements.
The artist uses a d•t to position each petal evenly along a hand-drawn curve.
Example B Modifying a property distribution - changing the hue of a collection of graphical elements.
The artist uses a d•t to sample values from a hand-drawn curve to modify the hue of a collection of triangles.
Example C Modifying a target property over time - creating an animation.
Here the artist uses d•t to interpret a hand-drawn path as a motion path.
Example D Modifying a target property over time - animating vertex geometry.
The artist uses a d•t to interpret lines drawn in different directions to translate vertices in alternating directions.
Example D Modifying a distribution of target properties - controlling procedural instantiation across a collection of target artwork.
The artist uses a d•t to control the rate of duplication of a collection of artwork. Note: the middle two rates are interpolated.
Example D Modifying a target property over time - controlling playback over time to reverse and modify the easing of an animation.
The artist uses a d•t to modify the rate and direction of playback of another d•t that defines an animation.
I built a motion graphics testbed application to apply d•ts in practice. D•ts can apply to any visual creative domain.
To see the system in action and more examples demonstrating d•ts applied to illustration and motion graphics, see Animating Multiple Elements Simultaneously
More details on how d•ts support using drawing to enact different types of control: