Make writing a habit together! This is the fifth day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

Definition of particle

A particle is a seemingly small point in space.

Using particle animation you can create:

1. The effect of snow and rain
2. Effect of the starry sky
3. The special effects

Particle animation principle

With animation principle is consistent, is the use of the refresh frame. Random particle animations are simple, using math.random (). The point is to change the trajectory of the particles regularly.

Common particle effects include particle clustering and particle scattering. This paper makes a simple analysis of particle aggregation effect.

Particle aggregation implementation

Initialize the particle position

To gather particles together, the particles have to disperse first. How do you do that?

    const min = 1;
    const max = 10;
    particle.visible = false;
    const x = Math.random() > 0.5 ? 1 : -1;
    const z = Math.random() > 0.5 ? 1 : -1;
    particle.visible = true;
    particle.position.x = (min + (max - min) * Math.random()) * x;
    particle.position.y = min + (max - min) * Math.random();
    particle.position.z = (min + (max - min) * Math.random()) * z;
Copy the code

The first thing to do is to ensure that the particles are scattered around an object, which requires a minimum and maximum value to limit the range.

Then the values of x,y, and z are randomly generated positive or negative values from 1 to 10, and with the code above we actually generate particles evenly distributed in a three-dimensional coordinate system based on the origin of the object, evenly distributed in eight three-dimensional quadrants.

Particles converge towards the origin of the object

Given the above initial position of the particle, we need to concentrate the particles at the origin of the object. So how do we do that?

    const min = 4;
    const max = 10;
    particle.visible = false;
    const x = Math.random() > 0.5 ? 1 : -1;
    const z = Math.random() > 0.5 ? 1 : -1;
    particle.visible = true;
    particle.position.x = min * Math.random() * x;
    particle.position.y = min * Math.random();
    particle.position.z = min * Math.random() * z;
Copy the code

With the code above, we wirelessly close the particle to the edge of the object. If we set min to 1, the particle will enter the object. Here is the specific you want to see what kind of aggregation effect.

Start particle animation

With the starting and ending positions, all that’s left is to run the animation.

Usually we have a library of wrapped frame-by-frame animations.

    setTimeout(() = > {
      if (!this.gathering) {
        return;
      } else {
        particle.visible = true;
        const duration = 500 + Math.random() * 400;
        console.log("animation");
        customAnimation.to(
          particle.position,
          {
            x: particle.position.x,
            y: particle.position.y,
            z: particle.position.z,
          },
          to,
          null,
          duration,
          (value) = > {
            if (particle.gathering) {
              this._gatherParticle(particle); }}); }},500 * Math.random());
Copy the code

By re-calling the aggregation function at the end of the particle aggregation, we achieve a non-stop aggregation effect.