This is a Part 3 of a tutorial post HTML5 Canvas Particles System (Pt. 1). In this tutorial I will cover:

1. Initialising Canvas (covered in Pt. 1)
2. Drawing circles in Canvas (covered in Pt. 2)
3. Simple animation for particle movement using SetInterval() (covered in Pt. 2)
4. Improving the code using RequestAnimationFrame()

Using RequestAnimationFrame() instead of SetInterval()

Instead of using SetInterval() we can animate only when we need to using RequestAnimationFrame(). This helps improve performance as we re-draw only when something has changed. We can define to call spawn(), draw() and update() on load, after which we would have to modify the update() method to trigger the RequestAnimationFrame().

Here is what we are using instead of SetInterval():

1
2
3
4
5
6
7
8

window.requestAnimFrame = window.requestAnimationFrame ||
                          window.webkitRequestAnimationFrame ||
                          window.mozRequestAnimationFrame ||
                          window.oRequestAnimationFrame ||
                          window.msRequestAnimationFrame ||
                          function(e){
                            window.setTimeout(e,1e3)
                          };

And adding an on load function:

1
2
3
4
5
6
7
8

// We should create, draw and start updating on load. 
window.onload = function() {
    c.width = c.width;
    c.height = c.height;
    spawn();
    draw();
    update();
}

We can now modify update() to look like this which now:

1
2
3
4
5
6
7
8
9
10
11
12
13

function update() {
    reset();
    c.width = window.innerWidth;
    c.height = window.innerHeight;
    for(var i=0; i < ps.length; i++) {
        ps[i].y += 1 ;
        ps[i].x += -1 + (Math.random() * 3);
        //ps[i].r = Math.random()*5;
    }
    draw();
    window.setTimeout(requestAnimFrame(update),1e3);

}

And that is it!

🔥 If you enjoyed this post then you can keep up to date with my latests blogs posts & courses by following me on Twitter and checking out my code school for some hands on guided coding practice.