# 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:

`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.

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

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