Animating Multiple Elements Simultaneously
I developed a motion graphics testbed application for a novel interaction method that lets artist use drawing to define procedural functions to create and edit artwork.
See more details on the interaction technique here: Drawing Transforms (d•ts)
Animating Multiple Elements Simultaneously (AMES) lets artists create d•ts. Through manually-drawn input or shape primitives, artists can use input geometry to define procedural transformation functions that create and modify artwork:
I developed AMES with Paper.js, a Javascript vector-graphic scripting library. I wrote animation functionality from scratch to support custom easing and reversing the direction of transformations.
Prototype Demo
I use two d•ts to specify two user-defined procedural transformations that create an animation:
(1) A d•t modifies the hue of target circles using a hand-drawn curve as input
(2) A d•t interpolates motion paths for each target circle using two small, offset circles as input
Example #1 Procedurally Generating Shapes & Animations
In AMES, I create d•t that exert different types of procedural control over artwork to create a twinkling starfield:
(1) A d•t defines a function that transforms regular polygons into star shapes using two hand-drawn lines as input
(2) A d•t generates style variations of a collection of stars using a wavy line as input
(3) A d•t randomly positions the star using the space defined by two input lines
(4) A d•t generates shape animations for each star and another d•t reverses and modifies the easing of those animations.