Tuesday, August 4th, 2009

Curve Explorer: Visualize with Ease

Category: Showcase, Utility

Chris Vanrensburg has created a curve explorer that gives you a nice visualization of curve functions which are used for animations (easing and the like).

Chris has more:

I looked at the work of Robert Penner, since it seems to have become the gold standard for motion curves. Nice stuff, and it inspired me. I wanted to see if I could take things a step further – ratchet it up a notch. What I ended up with is something I’m quite pleased with for a first pass at approaching this problem.

My work deviated from Robert Penner’s in a number of respects:

  1. It became clear to me quite early on that I didn’t want to implemented the resolved ease-out and ease-in-out versions of the easing equations for all the different types of curves, so that got me going down the path of creating curve function modifiers, in this case to take an ease-in curve function and spit back out the ease-out and ease-in-out variations.
  2. While I was at it, I decided, what the hay, let’s make an alternate version of the ease-in-out – I call it the ease-in-the-middle variation, because it swaps the ease-in and ease-out phases around so that the easing is in the middle of the curve. It was cheap, and the ease-in-the-middle curves may be compelling in some use case.
  3. And then, what the hay, why should you only get quadratic, cubic, quartic, and quintic easing – why not have arbitrary power curves. So I did it! Say hi to easeInPow, easeOutPow, easeInOutPow, and powRightInTheKisser (ok, the last one’s a joke for Family Guy fans – you know who you are).
  4. It became clear that I didn’t want curve functions to be value interpolators – merely 0-to-1 value remappers. You can do a lot with values in the range of 0 to 1, in terms of using them as blend ratios, or scaling factors. This alleviated the burden from every curve function to have to do the interpolation calculations. More importantly, though, it improves performance when you’re using multiple curve functions together to compose new curve functions (we’ll get to that in a moment), since they aren’t all redundantly re-performing the same interpolation many times over.
  5. I wanted to be able to use curve functions as units, to be easily recombined to form new curve functions – treating them almost like simple values and involving them in operations with function operator methods. So, I introduced the concept of curve function modifiers. This got my juices flowing, and I was soon conjuring up interesting things you could do when you can operate on curve functions – like mixing two of them together in equal amounts, or bending them horizontally or vertically, or repeating them, or quantizing them, or redrawing them, or multiplying them, or just generally doing unspeakable things to them.
  6. I liked a lot of what Robert Penner did, but I wasn’t thrilled with his bounce curve. I wanted more bounce. And more bounces. And crazy sh*t, like controlling the shape of individual bounces (because I can get downright insane when JavaScript inspires me). So, I started with a fresh slate and implemented a parameterized bounce curve function generator, where you can control number of bounces, bounce peak curve, bounce width ratio, and bounce curve. Needless to say, I needed plenty of coffee to stimulate my math gland.

So, back to the Curve Explorer tool. As it turns out, it’s fun to play with curves – especially if you can see them plotted as you tweak parameters, or see how they affect motion with an animation, or what they look like as a color gradient. From the tool you’ll see what I mean as you peruse the list of preset curve expressions that I threw in there. My particular favorites are some of the bounce curves, like “third time’s a charm”, “super bouncy”, “fast thud”, “jumping bean”, and then some of the complex curves that use curve modifiers, like “wobbly easeInOutPow”, “pull and release elastic”, “coin settle effect”, “bounce down the stairs”, and “shutters slamming”. But they’re all fun, really.

Posted by Dion Almaer at 6:43 am

4.4 rating from 22 votes


Comments feed TrackBack URI

I like the viz very much. Most of the design/implementation choices mentioned about easing and transition functions were made by the MooTools framework team a long time ago though.

Comment by philogb — August 4, 2009

Very cool. The scripty2 docs have a similar thing going on: http://scripty2.com/doc/scripty2%20fx/s2/fx/transitions.html

Comment by smith — August 4, 2009

I did something similar with jQuery easing a while ago: http://james.padolsey.com/demos/jquery/easing/

Comment by JimmyP22 — August 4, 2009

Family Guy is inpired by the 60’s TV show The Honeymooners where Ralph likes to say “One of these days…one of these days…POW, right in the kisser!”. In American Dad, Stan uses the “Pow! Right in the kisser!” line to threaten his wife, only with a gunshot to the ceiling replacing the word “pow”.

Anyways, some of these easings visulisations are over the top. The user would rather get on with using the web app, rather than wait for the animation to finish.

Comment by GordonStanton — August 4, 2009


Great minds think alike?

Comment by uize — August 4, 2009


I agree with your statement. Not all the curves shown are suitable or appropriate for motion – some could be good for generating gradients, or other types of transitions.

I really just wanted to demonstrate the versatility of the curve modifiers and present a taste of the extremes. When you implement a versatile system, you don’t know all what people will conceive of – it’s really up to other creative minds to find a viable application for the principles you make available. A music synthesizer – for example – can make some pretty crazy sounds, but it’s the right combination of sounds that makes compellilng music. But the synthesizer creator doesn’t make too many limiting decisions in their design, because what’s noise for one could be music for another.

Oh, and the powRightInTheKisser comment was about a very specific episode of Family Guy…

Comment by uize — August 4, 2009


Nice work. Looking at the curves supported, it doesn’t look like jquery takes it any further than where Robert Penner left it. I wanted to build on Robert’s work, not merely copy / transcode it.

Neat touch with showing the previous two curves in a ghosted manner.

Comment by uize — August 4, 2009


Very nice work. I love it.

Comment by uize — August 4, 2009

Sorry, @smith, I was referring to your work with scripty2 (copied the wrong name). Very nice, indeed.

Comment by uize — August 4, 2009


Or, maybe it’s not your work… big assumption. Is it?

Comment by uize — August 4, 2009

Reminds me of a ‘sinus editor’ I made on the c64 about 20 years ago.

Comment by leptons — August 5, 2009

Leave a comment

You must be logged in to post a comment.