Check out the Particle Emitters Series to get the full picture.
There are some basic functions that are needed for to make this work, they are as follows. We won't be modify this much except for the plotParticles function, where we have to change the if statements foreach of our effects. (I know there must be a clever way to do this, but I ran outta time)
function Particle(point, velocity,acceleration,color,size) {
this.position = point || new Vector(0,0);
this.velocity = velocity || new Vector(0,0);
this.acceleration = acceleration || newVector(0, 0);
this.origin = new Vector(0,0);
this.color = color
this.particleSize = size;
this.action = "";
this.life = 0;
this.tether = 0;
this.radius = 25;
}
function plotParticles(boundsX, boundsY)
{
// a new array to holdparticles within our bounds
var currentParticles = [];
for (var i = 0; i <particles.length; i++)
{
varparticle = particles[i];
var pos =particle.position;
if(particle.action == "warpParticle")
{
particle = warpParticle(particle);
particle.move();
}
if(particle.action == "whirlParticle")
{
particle = whirlParticle(particle);
}
if(particle.action == "beamParticle")
{
particle = beamParticle(particle);
}
if(particle != "")
{
// If we're out of bounds, drop this particle and move on tothe next
if (pos.x < 0 || pos.x > boundsX || pos.y < 0 ||pos.y > boundsY) continue;
if (particle.particleSize <= 0) continue;
// Add this particle to the list of current particles
currentParticles.push(particle);
}
}
// Update our globalparticles, clearing room for old particles to be collected
particles = currentParticles;
}
function rand(from,to)
{
returnMath.floor(Math.random()*(to-from+1)+from);
}
function drawParticles()
{
// For each particle
for (var i = 0; i <particles.length; i++)
{
context.fillStyle = particles[i].color;
varposition = particles[i].position;
//context.fillRect(position.x, position.y, particles[i].particleSize,particles[i].particleSize);
context.fillStyle = particles[i].particleColor;
context.beginPath();
context.arc(position.x, position.y, particles[i].particleSize, 0, Math.PI * 2);
context.closePath();
context.fill();
}
}
function addNewParticles()
{
for (var i = 0; i <emitters.length; i++)
{
if(emitters[i].numParticles < emitters[i].maxParticles)
{
for (var j = 0; j < emitters[i].emissionRate; j++)
{
particles.push(emitters[i].emit());
emitters[i].numParticles++;
}
}
}
}
Particle.prototype.move = function () {
// Add our current acceleration to ourcurrent velocity
this.velocity.add(this.acceleration);
// Add our current velocity to ourposition
this.position.add(this.velocity);
};
function Vector(x, y) {
this.x = x || 0;
this.y = y || 0;
}
// Add a vector to another
Vector.prototype.add = function(vector) {
this.x += vector.x;
this.y += vector.y;
}
// Gets the length of the vector
Vector.prototype.getMagnitude = function () {
return Math.sqrt(this.x * this.x + this.y* this.y);
};
// Gets the angle accounting for the quadrantwe're in
Vector.prototype.getAngle = function () {
return Math.atan2(this.y,this.x);
};
// Allows us to get a new vector from angle andmagnitude
Vector.fromAngle = function (angle, magnitude) {
return new Vector(magnitude *Math.cos(angle), magnitude * Math.sin(angle));
};