The particles in the previous recipe originate randomly and then move randomly. In this recipe, with a small change, we can give it a fountain effect. This is achieved by changing the origin of all the particles to a single point. One more change is done in the recipe by drawing a barrel. The output of the recipe is shown here:
The HTML code:
<html> <head> <title>Particle demo</title> <script src="ParticleFountain.js"></script> </head> <body onload="init();"> <center> <canvas id="MyCanvasArea" width="800" height="500" style="border:2px solid blue;" > your browser does not support canvas </canvas> <h1>Particle Demo</h1> </center> </body> </html>
The JavaScript code:
var can;
var ctx;
var particles=[];
var particle;
var part;
var numParticles=100;
var i;
var bounce=-1;
var r,g,b;
var gravity=0.4;
function animate()
{
reqAnimFrame...