Tweening in p5.js

p5.js is great when it comes to getting a simple animation up and running in the browser, compared to say d3.js, which requires a fair bit more boilerplate.

But one thing that p5.js does not have is an easy way to manage transitions between states, which d3.js has. We could easily create an easing function from scratch to for transitions between states, or to tween between states, but why do so if there are libraries available out there to do it for us.

GSAP’s (or the GreenSock Animation Platform) TweenLite library is great for this. It’s super simple to use. The only tricky thing is to figure out how to make it play nice with the p5.js library’s draw cycle.

Getting it to work with the setup function is quite simple. You simply have to create a original object, insert the object into the TweenLite.to function, and provide the function with the new values of the object that you want it to tween to. All the steps in between will then be computed by the TweenLite function. The code to move an ellipse across the width of the screen will look something like this.

var pos = {x:0, y:0};

function setup(){
    ...
    ellipse(pos.x,pos.y,40,40);
    TweenLite.to(pos, 5, {x:width});
    ...
}

The function TweenLite takes in 3 parameters. The first is the original object (with the starting values), the second is the duration of the tween, and the third is the values at the end state.

To use it within the draw function is a tad more complicated, as you would want the cycle to be repeated as you update the values that you want to start with and end at. But first, let’s start with the setup what we want to do.

var currentPos = [];
var newPos = [];
var colorsPalette;
var numpoints = 80;

function setup() {

    c = createCanvas(600,600);
    c.parent('p5canvas');
    
    colorsPalette = [color(146, 167, 202,25),
            color(186, 196, 219,50),
            color(118, 135, 172,250),
            color(76, 41, 81,250),
            color(144, 62, 92,50),
            color(178, 93, 119,250),
            color(215, 118, 136,250),
            color(246, 156, 164,250),];
    background(colorsPalette[0]);

    frameRate(30);

    for (var i=0;i<numpoints;i++){        
        currentPos.push({
            x: random(width),
            y: random(height),
            c: colorsPalette[6]
        })    
    }
    for (var i=0;i<numpoints;i++){        
        newPos.push({
            x: random(width)+random(),
            y: random(height)+random(),
            c: colorsPalette[6]
        })    
    }

}

What we have done is to create the arrays currentPos and newPos to store the current and new states, some colors, and initialised the currentPos and newPos arrays.

Next, the meat of this post.

function draw() {
    
    background(colorsPalette[0]);

    if (frameCount%300==0){
        for (var i=0;i<numpoints;i++){      
            newPos[i].x = random(width)+random();
            newPos[i].y = random(height)+random();
        }

    }


    for (var i=0;i<numpoints;i++){
        TweenLite.to(currentPos[i], 10, newPos[i]);
        noStroke();
        fill(currentPos[i].c);
        ellipse(currentPos[i].x,currentPos[i].y,3,3);
        noStroke();
        fill(255,150);
        ellipse(currentPos[i].x+2,currentPos[i].y,1,1); 
        ellipse(currentPos[i].x-2,currentPos[i].y,1,1);   
    }

}

What we have done here is to update the newPos object with new x and y positions. Then we iterate through each and every point to apply the tween and draw the ellipses. There are just two things to note -

There is no need to set the currentPos to newPos separately. This was something that I did initially and it just ruined the whole animation. What’s happening here is that TweenLite is already updating currentPos as it tweens it to newPos
TweenLite can only handle one datapoint at a time. It didn’t work when I passed the entire currentPos and newPos in
It is not critical to sync the timing between the computation of newPos and the duration of the tween, but it does make things smoother. What I have done here is to compute a new newPos every 300 frames. As the frame rate is 30 frames per second, this means we update newPos every 10 sec, which is also the duration that I have set for the tween within TweenLite.

And that’s it. You can find the full code here. And you can see a demo here, stylised fishes swimming around in a pond.

Tweening in p5.js

Articles