Particle Class V1.0

Demos and Tutorials
#1

Here is a class for Particles that I just implemented. This is useful for animations and games… It is really cool… Give it a try. Feel free to use it in your projects.
ParticleExample9-4-2020_10-33-08PM.wick (77.0 KB)

particlesPic
particlesPic710×474 32.1 KB

Have fun!

3 Likes
#2

i did some testing to see what each code did and here is what they do (kinda):
window.Particle = class{
constructor(clip){
this.clip = clip;
this.tickDivider = 1;
this.opacityS = 0.7; //opacity. higher the number, the quicker it fades.
this.opacityE = 0; // ending opacity. it’s best at 0
this.rotationS = 0; //the rotation of the base (base is the origin of the particles)
this.rotationE = 90.0; //what degree the particle ends at
this.scaleS = 1; // size of the base
this.scaleE = 1; //size of the particles
this.x_posS = this.clip.x;
this.x_posE = this.clip.x;
this.y_posS = this.clip.y;
this.y_posE = this.clip.y-100;
this.setUp();
}

update()
{
    if(!this.clip.isClone)
    {
        if(this.count%this.tickDivider === 0)
        {
            var pc = this.clip.clone();
            pc.x = this.x_posS;
            pc.y = this.y_posS;
        }
    }
    else
    {
        if(this.count<this.duration)
        {
            this.clip.opacity += this.dt_opacity;
            this.clip.rotation += this.dt_rotation;
            this.clip.scaleX += this.dt_scale;
            this.clip.scaleY += this.dt_scale;
            this.clip.x += this.dt_x_posS;
            this.clip.y += this.dt_y_posS;
        }
        else
        {
            this.clip.remove();
        }
    }
    this.count++;
}

setUp()
{
    this.count = 0;
    this.dt_opacity = (this.opacityE - this.opacityS)/this.duration;
    this.dt_rotation = (this.rotationE - this.rotationS)/this.duration;
    this.dt_scale = (this.scaleE - this.scaleS)/this.duration;
    this.dt_x_posS = (this.x_posE - this.x_posS)/this.duration;
    this.dt_y_posS = (this.y_posE - this.y_posS)/this.duration;

    this.clip.opacity = this.opacityS;
    this.clip.rotation = this.rotationS;
    this.clip.scaleX = this.scaleS;
    this.clip.scaleY = this.scaleS;
    this.clip.x = this.x_posS;
    this.clip.y = this.y_posS;
}

setTickDivider(value){
    this.tickDivider = value;
}
setDuration(value){
    this.duration = value;
    this.setUp();
}
setOpacityRange(startV, endV){
    this.opacityS = startV;
    this.opacityE = endV;
    this.setUp();
}
setRotationRange(startV, endV){
    this.rotationS = startV;
    this.rotationE = endV;
    this.setUp();
}
setScaleRange(startV, endV){
    this.scaleS = startV;
    this.scaleE = endV;
    this.setUp();
}
setPositionXRange(startV,endV)
{
    this.x_posS = startV;
    this.x_posE = endV;
    this.setUp();
}
setPositionYRange(startV,endV)
{
    this.y_posS = startV;
    this.y_posE = endV;
    this.setUp();
}

};

1 Like
#3

Did you find it useful?

#4

yes. i like it.

2 Likes
#5

Sorry I didn’t provide any documentation about it:
As you well explained…
In a big picture…

The particle system has:

  • this.duration -> This is the particle lifetime in Ticks (The particle will be remove after this)
  • this.tickDivider -> 1 means: one particle per tick; 2 means: one particle every two ticks (less particles)

The rest of the attributes has the “S” at the end the varName for “Start” and “E” for “End” Example:

  • this.rotationS
  • this.rotationE

During the particle lifetime, it will rotate from this.rotationS to this.rotationE, if you don’t want your particle to rotate, set these 2 to zero. Same with the rest of the attributes.

Keep in mind, these systems are expensives, if you don’t need to much particles at the same time, consider increasing the this.tickDivider so the system would clone less particles. Also, if your animation or game object needs a particle system, and that particle system doesn’t need some of this attribute to change, like the rotation example, just set those to zeroes. There are some methods to set the ranges… Example:

particle.setScaleRange(0.1, 0.8);

The previous method allows you to set the initial value of the particle scale to 0.1 and the end value to 0.8. If you don’t need your particle system to change in scale, just call that method with zeroes, and so on… We have method like that one for all the attributes, so we could easily change their ranges.

At the update() Method:
Every single tick (frame), the clip attributes will be updated a little bit based on the duration… Example:

this.clip.rotation += this.dt_rotation;

That little bit, in this case this.dt_rotation is given by (endValue - startValue)/this.duration as you can see in the setup() method, Example:

this.dt_rotation = (this.rotationE - this.rotationS)/this.duration;

So thats it. This class is easy to copy and paste it in any project that needs particles and it is easy to customize.

1 Like