Lee Byron & Golan Levin

Shapetween is a library for Processing that provides an easy way of animating elements within a sketch in a variety of ways.

Source

Find source, examples, and this documentation on Github.

Download & Install

shapetween.zip
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 Chapter 7 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 data. 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.