The Ashes

Technology, Science and other news
August 9, 2009

Curve Explorer: Visualize with Ease

Posted by : admin
Filed under : General

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.

Tags :

No Comments

(will not be published) (required)
(opitional) EN ES IT DE PT CZ FR RU
September 2021




There are many online poker site where you can play but at you can play the poker games with all the knowledge you need related to the game with the poker school available in both the English and Chinese language.

Super Casino

Now you can bet on any sports and any sporting events from all the comfort from your home. Bet770 allows you to bet on any events and match with in just 3 clicks. They also offers great odds on football betting for every premier and champions league match. Get £50 free in bets when you register.

Bingo770, offering best online bingo games with £7.70 free no deposit Bonus!