Beautiful Pixel

Canvarticles makes including particle effects in your canvases easy as pie. Take any canvas, and simply create an instance of the Emitter object in javascript to use the system. This group of object classes is what drive Canvarticles.com.

This example shows you how to create this:

First Download canvarticles.js

Then include the .js file in the HEAD section of your HTML:

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="canvarticles.js"></script>

Then put a script tag inside the body of your document:

<script type="text/javascript">
var emitter;
var ctx = $('canvas').getContext('2d');

emitter = new Emitter({
  pos:new Vector(150, 270),
  randomColors:0,
  qty:25, 
  lifespan:20,
  maxSpeed:15, 
  minSpeed:10,
  angle:[270, 30],
  gravity:0.5,
  colors:[ new Color({r:255,g:0,b:0}), new Color({r:255,g:255,b:0}) ],
});

function draw() {
  ctx.clearRect(0,0,300,300);
  emitter.update();
  emitter.draw(ctx);
}

setInterval('draw()', 50);
</script>

There are 3 main pieces to the above code:

1. new Emitter(params): This creates the particle emitter. You can pass in a hash of properties to set the parameters on creation of the object. This is done in this format emitter = new Emitter({qty:50, minRadius:5, maxRadius:25})
2. emitter.update(): This processes 1 frame of the particles. It moves each particle along its velocity and aplies forces such as gravity. This should be called during the preparation of each frame of the animation.
3. emitter.draw(ctx): This draws the particles to the canvas. Pass in the canvas context so the particles know where to draw themselves to.

The latest version of the library can always be found here: Download canvarticles.js

That should be all you need to know for now. Enjoy your canvarticles!