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).

Fortunately Philippe Maegerman has already put together a Javascript version of Robert Penner’s tweening library. So all I had to do is adapting the code for use with Processing.js.

Here’s what I came up with:

Motion Tweening

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:

  • Tween.backEaseIn
  • Tween.backEaseOut
  • Tween.backEaseInOut
  • Tween.elasticEaseIn
  • Tween.elasticEaseOut
  • Tween.elasticEaseInOut
  • Tween.bounceEaseOut
  • Tween.bounceEaseIn
  • Tween.bounceEaseInOut
  • Tween.strongEaseInOut
  • Tween.regularEaseIn
  • Tween.regularEaseOut
  • Tween.regularEaseInOut
  • Tween.strongEaseIn
  • Tween.strongEaseOut
  • Tween.strongEaseInOut
  • … more to come

Color Tweening

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.

You can find a dedicated demo page at and get the source code from Github.


There’s a dedicated demo for the tweening library as well. And *surprise* you can get the source code at Github. Well, I have to put some more documentation to the example page.

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.

8 Responses to “Motion Tweening for Processing.js”

  1. VINCENT says: Canadian Health&Care.Special Internet Prices.No prescription online pharmacy.Best quality drugs. High quality drugs. Order drugs online

    Buy:Zocor.Wellbutrin SR.Acomplia.Cozaar.Seroquel.Ventolin.Prozac.Benicar.Zetia.Female Pink Viagra.Lasix.Lipothin.Lipitor.SleepWell.Amoxicillin.Female Cialis.Buspar.Advair.Nymphomax.Aricept….

  2. ROSS says: Canadian Health&Care.No prescription online pharmacy.Special Internet Prices.Best quality drugs. Online Pharmacy. Order drugs online

    Buy:Levitra.Cialis Professional.Propecia.VPXL.Cialis Soft Tabs.Soma.Viagra Super Force.Cialis Super Active+.Zithromax.Maxaman.Super Active ED Pack.Viagra Super Active+.Viagra Soft Tabs.Viagra Professional.Tramadol.Viagra.Cialis….

  3. LLOYD says:

    CheapTabletsOnline.Com. Canadian Health&Care.Special Internet Prices.No prescription online pharmacy.Best quality drugs. Low price drugs. Buy pills online

    Buy:Prevacid.Zyban.100% Pure Okinawan Coral Calcium.Petcam (Metacam) Oral Suspension.Valtrex.Nexium.Prednisolone.Zovirax.Mega Hoodia.Retin-A.Arimidex.Accutane.Lumigan.Human Growth Hormone.Actos.Synthroid….

  4. HUGH says: Canadian Health&Care.Best quality drugs.Special Internet Prices.No prescription online pharmacy. Low price pills. Order drugs online

    Buy:Viagra Super Active+.Viagra Super Force.Viagra Soft Tabs.Super Active ED Pack.Cialis.Levitra.VPXL.Propecia.Cialis Soft Tabs.Tramadol.Viagra.Cialis Super Active+.Cialis Professional.Maxaman.Viagra Professional.Zithromax.Soma….

  5. DWAYNE says:

    NEW FASHION store. Original designers collection at low prices!!! 20 % TO 70 % OFF. END OF SEASON SALE!!!