The Core

DemoSource

Another p5js/Codepen.io experiment. This time playing around with contours and lerp to get gradient fills inside a polygon.

I’ve been trying to learn a bit more about easing functions. More specifically elastic easing. It is fairly easy to do a single bounce with CSS. Tools such as bounce.js can be used to generate more complex versions. However, I had no idea how to do this with JS or what the underlying equations were …

Despite the commonality of the classic easing equations, largely attributed to Penner, there doesn’t seem to be the in-depth examination of “how it works” that a lot of code is subject to nowadays.

— Explaining Penner’s equations – JavaScript and ActionScript

We start with this basic equation where:

• t is the current time (or position) of the tween. This can be seconds or frames, steps, seconds, ms, whatever – as long as the unit is the same as is used for the total time.
• b is the beginning value of the property.
• c is the change between the beginning and destination value of the property.
• d is the total time of the tween.

function noEasing (t, b, c, d) {
  return c \* t / d + b;
}

And then use polynomial functions to create all kinds of easing effects:

function bounce(t, b, c, d) {
  var ts = (t /= d) * t;
  var tc = ts * t;
  return b + c * (33 * tc * ts + -106 * ts * ts + 126 * tc + -67 * ts + 15 * t);
}

Tim Groleau built this a really cool Easing Function Generator which I used to generate the bounce easing function.