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.

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.

Vector Field

See the Pen Vector Field by Varun Vachhar (@winkerVSbecks) on CodePen.

While going through the Google Material Design handbook the illustration in the Users Initiate Change caught my eye. Around the same time p5js was announced, so I figured it would be fun replicating this with Canvas.

My first attempt was to build a grid of vectors and then rotate them towards the mouse location. The rotation would be scaled down based on the distance from the mouse location, i.e: rotation = angle * scale(0, 1, 0, width-of-the-canvas). This gave an interesting result but, it wasn't quite the same spiral effect.

The next step was to look into how vector fields work. With a bit of help from Paul's Online Math Notes, Wolfram Alpha and math.stackexchange.com I discovered that: f(x,y) = [(y−5)-(x−5), -(x−5)-(y−5)] produces the exact spiralling effect.

Building this with p5js was fairly straightforward. Processing has an awesome drawing API and p5js brings it to the web. If you are interested in getting started with p5js I have built a seed project. There are some great tutorials on the project site and Daniel Shiffman has ported his amazing The Nature of Code Examples to p5js too.

for (var i = locs.length - 1; i >= 0; i--) {
  var h = calcVec( locs[i].x - mouseX, locs[i].y - mouseY);
  line(
    locs[i].x,
    locs[i].y,
    locs[i].x + 15*cos(h.heading()),
    locs[i].y + 15*sin(h.heading())
  );
}

Squiggle

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

I've been obsessed with this illustration for a while now and really want to build an animated/generative version of it. But, as usual I have no idea how to do that.

The aim is to get those paths to flow across the screen with an organic movement. Which probably means using a 2D Perlin noise field. This is just a first step towards animating Jupiter.

Next step is figuring out how to make those tentacle like paths. Probably using spline extrusions.

Built using Joseph Gentle's noisejs library and Two.js for the graphics.