Creating Cool Animation Effect Using HTML5 Canvas

HTML5 is new technology that is developed as a replacement for current HTML standard. HTML5 brings so many improvement that not exists in current standard HTML. Canvas is one of the most important element of HTML5. This new element allows us to draw directly and manipulate any pixels on canvas. The canvas has a context that provides us cool high level API to help us when drawing onto canvas.

In this tutorial we’ll try to create a simple animation effect using HTML5 canvas. Although the animation we’ll create is just a simple animation, but it’s pretty cool to see. Here is a screenshot of the final animation. If you want to see it lives, you can see the final animation by clicking Live Preview button above.

Basic Idea

When you see the animation, may be you think it’s difficult to create such animation. As I stated before, this is simple and easy to create the animation like that. The idea is creating invisible particles with random location on the canvas then move every particles randomly. As the particles moved, we check the distance between particles, if the distances is less than, say 230 pixels, we create random color line. Then the logic is repeated.

Define Canvas Object

We’ll work on HTML5 canvas, so we must define it first.

<div style="width:800px;padding-top:20px; margin:0 auto;">
    <canvas id="canvas" width="800" height="500"></canvas>
</div>

The context of the canvas can be gotten by invoking [cci]getContext(‘2d’)[/cci] on canvas object. This will give us the 2d context.
// get canvas element
var canvas = document.getElementById('canvas');
if(!canvas.getContext) {
    alert("Your browser doesn't support html5");
    return;
}

// get drawing context
ctx = canvas.getContext("2d");

Define Particle Object
For simplicity and easy to manage the particles, we create a javascript object which represent a particle. Our particle has the following properties:

Position

Position property define the particle’s location on the canvas. It contains [cci]x[/cci] and [cci]y[/cci] variables which represent the particle’s coordinat on the canvas. The position property will be generated randomly.
Radius

Radius property defines the particle radius. Because we want to create an invisible particle, we’ll put [cci]0[/cci] as radius value.
Speed

Speed property determines how fast a particle can move
Color

Color property determines particle’s color. Because we want to create an invisible particle, this property will be used to color the line that connecting this particle with others. This property will be generated randomly
Steering Angle

Steering angle determines the particle’s movement direction. Steering angle has range from 0 to 360 and will be generated randomly.

Below is the particle object definition on Javascript:
// Particle object
var Particle = function() {
    // particle position
    this.x = Math.random()*width;
    this.y = Math.random()*height;

    // particle radius, 0 means invisible particle
    this.rad = 0;

    // particle speed
    this.speed = 4;

    // generate random particle color
    var r = Math.round(Math.random()*255);
    var g = Math.round(Math.random()*255);
    var b = Math.round(Math.random()*255);
    var a = Math.random();
    this.color = "rgba("+r+","+g+","+b+","+a+")";

    //particle steering angle, 0 to 360
    this.angle = Math.round(Math.random()*Math.PI*2);
};

Variables [cci]width[/cci] and [cci]height[/cci] are respectively represent the canvas width and height. It is defined like this:
width = canvas.width;
height = canvas.height;

After the particle object definition is complete, we can populate a random particles by using this way:
// populate particles
for(var i=0; i< NUM_PARTICLES; i++) {
    particles.push(new Particle());
}

Variable [cci]NUM_PARTICLES[/cci] is global variable that defines the number of particle that will be generated.
Render The Particle
Now, we’ll add the rendering method for a particle. This method responsibles to render the particle that respect to the particle’ properties. This method also responsible to check the distance of the particle from another particles. If the distance is less than 230 pixels, the line will drawn connecting this particle to other.
// particle rendering method
this.render = function() {
    // render the particle
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.rad, 0, 2*Math.PI, false);
    ctx.fillStyle = this.color;
    ctx.fill();

    // count distance from another particle
    // if the distance less than 230px, connect the particles with line
    for(var i=0; i<NUM_PARTICLES; i++) {
        var p2 = particles[i];
        var dx =  p2.x - this.x;
        var dy =  p2.y - this.y;
        // count the distance
        var distance = Math.sqrt(dx*dx + dy*dy);

        // if distance less than 230px, draw a line to connecting between two particles
        if(distance < 230) {
            ctx.beginPath();
            ctx.lineWidth = 1;
            ctx.moveTo(this.x, this.y);
            ctx.lineTo(p2.x, p2.y);
            ctx.strokeStyle = this.color;
            ctx.stroke();
        }
    }
};




Move The Particle
Our animation will be nonsense if the particles don’t move. We’ll give the particle ability to move by adding a function that handle the movement into particle object. This function uses a simple vector operation to move the particles. The [cci]x[/cci] coordinat property will be increased by the speed multiplied by the cosinus of steering angle. The [cci]y[/cci] coordinat property will be increased by the speed multiplied by the sinus of steering angle. Because the particles is always move, there is a time when the particle reach the canvas border. To avoid the particles moves out of canvas, we’ll move the particles to opposite side when the border is reached.
// particle moving method
this.move = function(){
    this.x += this.speed*Math.cos(this.angle);
    this.y += this.speed*Math.sin(this.angle);

    //avoid particle to move out of canvas
    if(this.x < 0) this.x = width;
    if(this.y < 0) this.y = height;
    if(this.x > width) this.x = 0;
    if(this.y > height) this.y = 0;
};

Render The Canvas
We have our particle ready, now it’s time to render the canvas. Rendering the canvas means rendering all of the particles including the canvas background.
var render = function() {
    // render the background
    ctx.fillStyle = "rgba(0,0,0,0.1)";
    ctx.fillRect(0, 0, width, height);

    // render particles
    for(var i=0; i<NUM_PARTICLES; i++){
        var p = particles[i];
        p.render();
        p.move();
    }
};

Render Scheduling
To make the animation life, we must schedule to call [cci]render[/cci] method. We want to set FPS (Frame Per Second) to be 30, so we must set the interval to be [cci]1000/FPS ms[/cci]
// setup FPS = Frame Per Second
// render function will be called every 1000/FPS = 33 ms
setInterval(render, 1000/FPS);

Final Source Code
This is the final source code. Save it as html file and open it in your favorite browser.
<html>
    <head>
        <title>Cool Animation Effect Using HTML5 Canvas</title>
        <script type="text/javascript">
            // define FPS(Frame Per Second)
            var FPS = 30;
            // define number of particles in the system
            var NUM_PARTICLES = 20;

            // hold the canvas width and height
            var width, height;

            // hold the canvas context
            var ctx;

            // array of particles
            var particles = [];

            // Particle object
            var Particle = function() {
                // particle position
                this.x = Math.random()*width;
                this.y = Math.random()*height;

                // particle radius, 0 means invisible particle
                this.rad = 0;

                // particle speed
                this.speed = 4;

                // generate random particle color
                var r = Math.round(Math.random()*255);
                var g = Math.round(Math.random()*255);
                var b = Math.round(Math.random()*255);
                var a = Math.random();
                this.color = "rgba("+r+","+g+","+b+","+a+")";

                //particle steering angle, 0 to 360
                this.angle = Math.round(Math.random()*Math.PI*2);

                // particle rendering method
                this.render = function() {
                    // render the particle
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.rad, 0, 2*Math.PI, false);
                    ctx.fillStyle = this.color;
                    ctx.fill();

                    // count distance from another particle
                    // if the distance less than 230px, connect the particles with line
                    for(var i=0; i<NUM_PARTICLES; i++) {
                        var p2 = particles[i];
                        var dx =  p2.x - this.x;
                        var dy =  p2.y - this.y;
                        // count the distance
                        var distance = Math.sqrt(dx*dx + dy*dy);

                        // if distance less than 230px, draw a line to connecting between two particles
                        if(distance < 230) {
                            ctx.beginPath();
                            ctx.lineWidth = 1;
                            ctx.moveTo(this.x, this.y);
                            ctx.lineTo(p2.x, p2.y);
                            ctx.strokeStyle = this.color;
                            ctx.stroke();
                        }
                    }
                };

                // particle moving method
                this.move = function(){
                    this.x += this.speed*Math.cos(this.angle);
                    this.y += this.speed*Math.sin(this.angle);

                    //avoid particle to move out of canvas
                    if(this.x < 0) this.x = width;
                    if(this.y < 0) this.y = height;
                    if(this.x > width) this.x = 0;
                    if(this.y > height) this.y = 0;
                };
            };
            var render = function() {
                // render the background
                ctx.fillStyle = "rgba(0,0,0,0.1)";
                ctx.fillRect(0, 0, width, height);

                // render particles
                for(var i=0; i<NUM_PARTICLES; i++){
                    var p = particles[i];
                    p.render();
                    p.move();
                }
            };
            window.onload = function() {
                // get canvas element
                var canvas = document.getElementById('canvas');
                if(!canvas.getContext) {
                    alert("Your browser doesn't support html5");
                    return;
                }

                width = canvas.width;
                height = canvas.height;

                // get drawing context
                ctx = canvas.getContext("2d");

                // populate particles
                for(var i=0; i< NUM_PARTICLES; i++) {
                    particles.push(new Particle());
                }

                // setup FPS = Frame Per Second
                // render function will be called every 1000/FPS = 33 ms
                setInterval(render, 1000/FPS);
            };
        </script>
    </head>
    <body>
        <div style="width:800px;padding-top:20px; margin:0 auto;">
             <canvas id="canvas" width="800" height="500"></canvas>
        </div>
    </body>
</html>