GFX9.COM share Generating a particle system with javascript, you can download now.

If you've ever seen a fireworks effect, created in Flash, I'll show you how to reproduce the effect using pure JavaScript! Why let the Flash developers have all the fun?

Setting Up your Workspace

Requirements

Knowledge of Javascript Object Notation. If you could use some training in this area, no problem, Leigh Kaszick has an in depth tutorial on The Basics of Object-Oriented JavaScript.

Basic knowledge of Raphael.js. Once again, if you're new to it, then you might want to check An Introduction to the Raphael JS Library by Damian Dawber.

What is a Particle System?

A particle system, in terms of computer graphics, relates to replicating the behavior of a natural particle systems in a 3D model such as explosions, fire, clouds, and a plethora of other phenomena which are really difficult to implement using conventional programming techniques.

A Basic particle system consists of -

An Emitter - The point in the space where the particles originated.

The Stage - The place which holds the Particle System.

Forces - These are external forces which influence the movement of the particles. In our tutorial, it will be gravity.

Step 1

We will begin by creating our particle image.

Open Photoshop and create a 25px by 25px canvas.

Create a new layer.

Select a 23px round brush with hardness 100%. In this tutorial we are using the white color, but you can choose any brush shape or color as you like.

Now we must hide the background layer, and then, using the save for web and devices option, save it as "particle_img" in png-24 format.

Step 2

Now, let's get started with the coding. To begin, paste in the following code.

Simple Particle System

This is a simple snippet of HTML code which consists of:

Importing raphael.js and sps.js, in which we will work with the JavaScript code of our Particle System.

Then, in the body, there is a div with an ID of pane - it will be our stage.

The body tag also consists of a startSystem() function which will be called on the onload event. We'll define it later in our JavaScript file.

Step 3

Next, we are going to create our sps.js, in which we will type the actual code for our Particle System.

Step 4

Since we are working with a 2D model, in order to avoid a bunch of x,y variables in the script, we will create a Vector class that will take care of the coordinates for us.

function Vector()
{
this.x =0;
this.y =0;
//this.z =0;
}

Note: We won't be using Z coordinates since we are not concerned with the particle distance from the camera view(eyes), Z coordinate mainly deals with scale and opacity attributes.

Step 5

We'll be needing functions for setting the values of the variables and adding them, so we will declare the following functions in our Vector class.

Here we have wrapped the code inside the with(this) which refers to the current particle object.

particle.rotate() is used to rotate the object randomly between 0 to 360 degrees. In this case, it does not matter since we are using a round object, however, with other objects, such as stars, it does matter, since it looks odd that all the particles have same geometrical angles.

We will set the initial acceleration to 0,0.5, because we want to illustrate how the particles are bound to gravity; that's why we have initialized the y coordinate. As we increase the value of the acceleration, the faster particles' speed increases.

Here, vel refers to the spread of the particles on the stage - that is Math.random() * 4 -2 will generated numbers in the range -2 to 2.

loc takes the initial values of the particle.

A few points should be noted:

Condition for Acceleration

Positive values increase acceleration.

For a gravity free stage, acceleration = 0.

For inverse gravity, negative values should be used.

Conditions for vel

For increasing the spread, we will use a greater value of the range generated from Math.random().

For emitting particles in a particular side, we can achieve it either by multiplying by the maximum positive or a negative number.

Step 10

We will now create a function to update the particle's values to its new position.

Here, whenever the update function is called, acceleration is added to the vel, and that is added to the location. Lastly, the particle is updated to its new location. When constant acceleration is added, we'll give the impression that the particle is under some force, since it has to cover more distant per unit time. Also, whenever update is called, its lifespan is decreased by 1.

Step 11

Finally, for the particle class, we are going to create a function to check whether a particle's lifespan has ended or not.

Here our code is wrapped up inside the with(this) block, which refers to the current particle system object. Now since our particles need to be constantly updated to the next location, we call the particle's update() function inside a setInterval() function which executes the function in a defined interval of time. We update all the particles positioning by iterating through the particles array.

Now we also want to check if the particle is dead or not. We accomplish this task by calling the particle's dead() function. If a particle is dead, then we do the following:

Remove it from our array.

shift elements back by one, starting from the position after the dead particle's index.

Push a new particle to the end of the array.

var p = particles[i];
for(var j=i;j

The above code is the optimal solution, but when we implement that in the JavasSript world, the emission is so spontaneous that the engines hangs out. That's why we have used the alternate code to increase the complexity and render a smoother animation. You can try it out yourself ;).

Since the time period is in order of milliseconds, that's why in-spite of using a more complex algorythm, we get a spontaneous emission.

We initialize our raphael object with stage ID, width and height. Then, we create our particle system object and create a vector object with the origin coordinates. Then we are initializing our particle system by calling init, which in turn, initializes the particles. We also provide 20 as the number of particles in the parameters.

The number of particles must be between 20 to 30 for a smooth animation effect. Supplying a higher number will crash the browser or hang it!

Finally, we are done. This little project is compatible across all browsers, even in Internet Explorer, though IE6 does have some transparency issues. This particle system can be used practically anywhere you like, including backgrounds, explosion effects, logo and header intros, etc. I have produced three demos, which are modified versions of the code above. One of them implements different particle systems, such as smoke,dust and the bokeh particle system. Enjoy, and thanks for reading!