18th August, 2014

The Core

See the Pen The Core by Varun Vachhar (@winkerVSbecks) on CodePen.

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:

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.

Questions, Comments or Suggestions? Open an Issue