Particle Emitters - Part II

August 30, 2022

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));
};

 

Grow your business.
I am focused on helping start-ups in stabilizing and growing through strategy and analysis. Reach out to me today to start growing your business.
Start Now