Particle explosion
Show me some particles
Code
<canvas id="canvas" height="200" width="400"></canvas> <script type="text/javascript"> var c = new cajal('canvas', { globalCompositeOperation: 'lighter', globalAlpha: 0.8 }); var emitter = function (f,t) { //add new Particles if (f < t/10) { for (var count=1; count<=60; count++) { this.add(new cajal.Circle(0,0,Math.round(Math.random()*7)).move(c.canvas.width/2,c.canvas.height/2).options({ fill: 'rgba('+Math.round(Math.random()*255)+','+Math.round(Math.random()*50)+','+Math.round(Math.random()*255)+',' + Math.random() + ')', speed: { dx: ((Math.random()*2) - 1)*Math.random()*10, dy: ((Math.random()*2) - 1)*Math.random()*10 }, livecycle: 0 })); } } //animate Particles if (this.items.length > 0) { for (i in this.items) { //move particle this.items[i].item.moveBy(this.items[i].item.drawOptions.speed.dx, this.items[i].item.drawOptions.speed.dy); //raise livecycle this.items[i].item.drawOptions.livecycle++; //reduce speed on x-axis this.items[i].item.drawOptions.speed.dx *= 0.99; //gravity on y axis this.items[i].item.drawOptions.speed.dy += 0.1; //animate opcity in the last 3/4 of animation if (this.items[i].item.drawOptions.livecycle > t/4) { this.items[i].item.drawOptions.fill = this.items[i].item.drawOptions.fill.replace(/,([0-9\.]+)\)$/g,',' + Math.random() + ')'); } //remove particles after 9/10 of animation if (this.items[i].item.drawOptions.livecycle >= (t-t/10)) { this.items.splice(i,1); } } } else { this.stop(emitter); } } </script><br/> <a href="#" onclick="c.startAnimation(emitter,100);return false;">Show me some particles</a>