Motion Tweening for Processing.js
Creating animations in Processing.js can be a quite hard and repetitive job. Having a simple library for animating graphical objects probably makes the ambitious animator’s life easier.
Due to usability improvements to ASKKEN™ I had to add some animations. However creating animations by hand turned out to be a quite hard and repetitive job. I soon realized that I need some abstraction for managing animations in a smart way.
Since I don’t have much experience in the animation business, I did some research and found a really good introduction to Motion Tweening by Robert Penner.
I also found an existing library for Processing called Shapetween. However, I favoured the approach Robert Penner takes for his ActionScript Motion Tweening Library. Letting a Motion Tween directly manipulate properties on objects totally makes sense to me (at least for Processing.js).
Here’s what I came up with:
This first example shows the application of two different Tweens for manipulating x and y coordinates of the graphical object. Please click on the canvas to start/restart the Tween.
The code for this example is quite simple. Two Tween objects are created and bound to the object (most often “this”) and property that should be manipulated. You also specify start and end values, the desired easing function and the Tween’s duration (in seconds).
An easing function thereby is a mathematical function used to transform data. Provided a number between 0 and 1, an easing function will return a number usually between 0 and 1 corresponding to the nature of that function.
There are a couple of easing functions to choose from:
- … more to come
But Tweening is not restricted to motion. You can use the same approach to change a color over time.
In this example the blue level of a colored object is tweened from 255 downto 0 within two seconds.
In the wild
Additionally here’s the result of my animated donut chart, which will be integrated in the next version of ASKKEN™. It makes heavy use of Tweens.
Please let me know what you think. There’s so much room for ideas and improvements.
I’d be happy to get your feedback. If you’d like to contribute, I’d be even happier.