Thursday, January 21, 2016

the bees' ease

Bees & Bombs is Dave Whyte's site where he posts what has become a garden of beautiful hypnotic looping animations.

Once upon a time, he mentioned his secret was this equation:
3x2 - 2x3
This is an easing he frequently relied on.... as x varies from 0 to 1, it also varies from 0 to 1, but at various rates. (One of my first posts on this blog was about various easings, the equations you can add to transitions and animations in order to make less boring and linear and more organic.)

At one point he mentioned he had switched to Paolo Ceric's easing equation which goes like this:
float ease(float p, float g){
  if (p < 0.5) 
    return 0.5 * pow(2*p, g);
    return 1 - 0.5 * pow(2*(1 - p), g);

It's pretty rad because you can change the value of g and get different results: 1 is linear, like you were doing no easing at all, while a value of 8 would be a long windup and slow down and a quick motion in between.

The link above has an animation that shows Paolo's equation in action for various values of g for linear motion... I decided to make a rotation based animation to see it work, and also to compare it to the Bees & Bombs original formula:

That's kind of a long transition, here it is with every other frame skipped:

Here's the Processing program I used to make the animation. I had some problems with the GifMaker library, so I ended up tweaking the final GIF by hand using, a new-to-me useful site for making and manipulating Animated GIFs.

No comments:

Post a Comment