Shapetween is a library for Processing that provides an easy way
of animating elements within a sketch in a variety of ways.
Download & Install
Unzip into the Processing “libraries” folder
Sketch → Import Library → shapetween
The Animation & Shaping library shapetween provides the ability to create
basic time based Tween animations, shape them using many of the built in
shaping functions and modify them on the fly. In addition to this, the
library also opens access to all of the shape functions for other uses,
such as data shaping (ie log scaling).
What is a Tween?
Tween is short for between
, and used to describe an animation that occurs by
interpolating the state of an animation between
two defined states.
This differs from traditional cell animation, where every frame is defined.
Recommended reading on Computational Tweens (based in Actionscript) from
of Robert Penner's book: Programming Macromedia Flash MX. This library is influenced by
his description of code based tween animation.
What is a Shape Function?
A shape function is a mathematical function used to transform or shape
Provided a number between 0 and 1, a shape function will return a number usually between 0 and 1 corresponding
to the shape of that function.
In this image, the SIN_OUT function shapes input numbers along a piece of a sin function,
condensing the data towards the far end of the spectrum, in an animation, this would ease out.
Why Tween and Shaper in the same library?
Tweens can highly benefit from shaper functions in order to create an effect called Easing.
Easing takes a Tween and passes it through a shaper function before applying it to the animation,
which can create much more realistic animations.
Easing is essentially the transition between moving and not moving, allowing for a gradual acceleration
into and out of motion.