Creating a particle and canvas animation

By Renato Formato on February 19, 2014

While waiting to start working on a website for one of our clients back in 2011, we thought that it would be good to publish an unconventional 'coming soon' page, something interactive and entertaining.

We opted for the <canvas> tag that we found on the new HTML5 specifics in order to create particles that interact with a mouse movement on the page.

The Technical Bit

We know what a canvas is and as a matter of fact this tag represents a real canvas which can be used to draw via javascript. Unfortunately, all the versions of Internet Explorer —including IE8, do not support the <canvas> tag, but…here comes Google offering help with a lifesaver project, exCanvas, that is a javascript library  able to emulate a  <canvas> tag by using Internet Explorer’s feature of reading VML code. To get started, we have to add the  <canvas> tag in the HTML code, with the JQuery libraries and exCanvas, in order to enable the effect with IE. Then, we have to write the code managing the canvas in the file effect.js

First of all, we get the the interface allowing us to draw on it, so we write the code to push the canvas fullscreen. We used JQuery for the interactions with HTML elements. If you don’t know this library, then it might be worth it have a look at it…It’s amazing!

Let’s then create a particle object managing its position, repositioning and design on the canvas.

The draw function has the task of designing the particle, it’s pretty easy, it chooses the fill colour, it draws an arch 360° wide and asks for its fill. The update function has the task of calculating the positioning for a particle on each frame. We see two possible motion statuses, a random one around one focus (managed by vibraLinea function) and another one which is triggered when you move the mouse close to a particle (managed by the vibraTutto function). These two functions set the direction where you want to move the particle. For each frame, the update function makes the ball move from its current position to the arrival point which was previously set by the functions vibraLinea or vibraTutto. Let’s proceed with the canvas setup, the creation of the particles and set the loop which will animate everything.

Set the number of particles, the three possible colours and a matrix containing all the particle objects we create.

Create a setup function, 100 particles with colour and position set randomly and proceeds to draw a green background.

We declared the main function in the design loop, which cleans the canvas background and for each particle it uses the update method in order to update the position and draw to paint it. Then, the draw function sets a timer which has to start as soon as possible (the delay 0 is used for this purpose)  and it will use the main loop.

Everything’s done, we will have to setup again and start the main loop with window.setTimeout

On the online version, the script is slightly more complex in terms of managing the emulation for IE and exCanvas. As a matter of fact, the VML technology uses an approach completely different in terms of design and graphic elements which are no longer drawn on a canvas, but they’re real vector elements defined by tags. For this reason, it is much quicker to reposition these vector elements rather than draw them again and again. For those interested the code the production is available at http://www.xlvisual.it