Tropical Particles Rain Animation with Three.js

People always want more. More of everything. And there is nothing better in the world to fulfil that need than particle systems. Because you can have thousands of particles easily. And that’s what I did for this demo.

Creating a particle system

You start with just one particle. I like to use classes for that, because that perfectly describes the behaviour of particles. It usually it looks like this:

class Particle{
	// just setting initial position and speed
	constructor(){}
	// updating velocity according to position and physics
	updateVelocity(){}
	// finally update particle position, 
	// sometimes these last two could be merged
	updatePosition(){}
}

And after all of that, you could render them. Sounds easy, right? It is!

Physics

So the particles need to move. For that we need to establish some rules for their movement. The easiest one is: gravity. Implemented in the particle it would look like this:

updateVelocity(){
	this.speed.y = gravity; // some constant
}

updatePosition{
	// this could have been just one line, but imagine there are some other factors for speed, not just gravity.
	this.position.y += this.speed.y;

	// also some code to bring particle back to screen, once it is outside
}

With that you will get this simple rain. I also randomized gravity for each particle. Why? Because I can!

But just rain didn’t seem enough, and I decided to add a little bit of physics to change the speed of the particles. To slow them down or speed them up, depending on the… image. Yup, I took the physics for the particles from the image. My friend @EncharmDre proposed to use some oscillations for the particles, and I also added some colors palettes here. It looked amazing! Like a real tropical rain.

Still, the physics part is the computational bottleneck for this animation. It is possible to animate millions of particles by using GPGPU techniques, and the GPU to calculate the positions. But 10000 particles seemed enough for my demo, and I got away with CPU calculations this time. 10s of thousands also were possible because I saved some performance on rendering.

Rendering

There are a lot of ways to render particles: HTML, Canvas2D, WebGL, SVG, you name it. But so far the fastest one is of course WebGL. It is even faster than Canvas2D rendering. I mean, of course Canvas2D works perfectly fine for particles. But with WebGL you could have MORE OF THEM! Which is the point of this whole adventure =).

So, WebGL narrowed down the search for rendering to a couple of frameworks. PIXI.js is actually very nice for rendering 2D particle systems, but because I love three.js, and because its always nice to have another dimension as a backup (the more dimensions the better, remember?), I chose three.js for this job.

There is already an object specifically for this job: THREE.Points. I also decided to use shaders (because it’s cool) but you could actually easily avoid that for this demo.

The simplified code looks somewhat like this:

// initialization
for (let i = 0; i < numberOfParticles; i++) {
  // because we are animating them in 2D, z=0
  positions.set([x, y, 0], i * 3);
  this.particles.push(
    new Particle({
      x,
      y
    })
  );
}
geometry.setAttribute(
  "position",
  new THREE.BufferAttribute(positions, 3)
);

// animation loop
particles.forEach(particle => {
  particle.updateSpeedAndPosition();
});

To make it even cooler, I decided to create trails for the particles. For that I just used the previous rendering frame, and faded it a little bit. And here is what I got:

Now combining everything, we could achieve this final look:

Final words

I beg you to try this yourself, and experiment with different parameters for particles, or write your own logic for their behavior. It is a lot of fun. And you could be the ruler of thousands or even millions of… particles!