# The Core

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.