Hello fellow Coders :D

Since i did a lot of animations based on moving Particles i figured i could share my way of doing it.

I also wanna take this chance to make this post easy to understand for beginners, to catch up quickly on the art of Particles :D

I usually begin by setting up the Canvas (or loading the setup from a Template) like this:

The w and h variables which will store the canvas/window width and height for us.

Also i use a window resize event to readjust the canvas size and update the w and h Variables.

In the next step i prepare some global variables that i will be using for sure. The particles Array needs to be populated by objects, each object will be representing one Particle. Therefore we need some properties for our Particle, something like X-Position and Y-Position. Because we are making a animation the Particles will be moving by a certain amount of speed. So i am giving them xv and yv Properties which will be X-Velocity and Y-Velocity.

Now we have a function that generates some Particles, but we wont see anything yet on the Canvas. In order to see our Particles we need to create a function that will draw them for us.

When making an animation you need to keep in mind that you are drawing on the canvas 60 times per second (or depending on your custom interval time). I am just gonna use requestAnimationFrame() instead of setInterval(). So before drawing on the canvas, i want to clear the previous image. After that i loop each Particle from the particles Array and draw them with the arc() function.

Yaaay! We finally see some Particles on the canvas but... they are still not moving.

Since the position of the circles is drawn depending on the X and Y position (particle property) we are just gonna increment that position by the Particles Speed.

Good thing we thought about all that when creating the Particle Objects!

I'm going to create a separate function "move" for this.

Last but not least the requestAnimationFrame() comes into play.

I'm going to create a function named "render" and put all other functions which should be executed 60 times per second into it.

In my case i want to move and then draw the Particles in each frame. The function which creates the Particles will only be used once at the beginning.

So i will call the function createParticles() once at the end of the script. Also i put the requestAnimationFrame() into the render() function.

Here is the result of all the above steps :)

By the time you arrive at this chapter the Particles may be out of boundaries (Just click Rerun). Let's create a function which will detect collision with the canvas borders and make the Particles bounce off.

For further explanation check the comments in the JS Code :)

Now to the fun part! You can not call it an real Particle Animation until it looks fancy!

I can make use of the particles speed or current position to determine its color or size.

Let's color the particles depending on their X-Position, the hsl color system will come in handy here.

A little Bonus: Connector Lines!

What if we would like to draw lines which connect the dots if they are close enough to each other?

Well we need:

  • The distance between each Particle
  • Nested Loops

To get the distance between 2 Points we can use this:

var a = x1 - x2;

var b = y1 - y2;

return Math.sqrt(a * a + b * b);

Without further explanation... put the code in a function and pass the function 4 Parameters (x1,x2,y1,y2) when calling it.

Why nested loops??

We will need to check with our distance function for each Particle if any Particle is near it.

Example: If Particle 1 is close enough to Particle 2 connect them. Like this we will connect all Particles which are close enough to Particle 1. But now we need to do this again for Particle 2 and Particle 3 and so on... thats why we will be using two for-loops.

Nested loops, doing math and drawing stuff and all of that 60 times per second!?! Wow our PC must be doing alot of work... But it pays out! Look at our fancy result:

Notice how the lines get less transparent if the Particles are closer together. I have done this by converting the distance to a percentage value and using it for the color opacity (rgba).

Now its time for you to get creative!

If you have any questions let me know in the comments :) Also any Feedback regarding to this Post or Code is appreciated!