New! Unlimited audio, video & web asset downloads! Unlimited audio, video & web assets! From \$16.50/m

# Particles.js: Motion and Interaction

Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called An Introduction to Particles.js.
Particles.js: Control Particle Count and Shape

In the last Particles.js tutorial, you learnt how to create particles with shapes and sizes that you desired. While it felt good to see all the particles move around, there is still room for improvement. At present, there is no interaction between various particles whatsoever. They just pass through each other as if the other particles don't exist.

This tutorial will teach you how to move particles around the way you want by controlling their direction, speed, and much more. You will also learn about various interaction modes and events.

## Controlling Particle Motion

Not all particles in every particle system move around in random directions. Even when they do, there are some other forces in action. For instance, they may speed up when approaching each other or bounce back after collisions. All these options can be controlled by various properties available under `move`

If you don't want the particles to move at all, you can do so by setting `enable` to `false`. You can specify the speed of particles using the parameter `speed`. To move each particle with some random speed, set `random` to `true`. On the other hand, to move them in random directions, specify `direction` as `none`

Sooner or later, at least one of the particles will move to the boundary of our system. Whether that particle bounces back or comes out from another direction is decided by the value of the `out_mode` parameter. When it's set to `out`, the particles move out of the canvas. When it's set to `bounce`, the particles bounce back after hitting the boundary.

It seems a bit unnatural when particles pass through each other without any change in velocity. To change particle velocity at each collision, you can set `bounce` to `true`. Interestingly, this will work only if either the `line_linked` or the `attraction` property is enabled. Particles will reverse their direction every time they collide, even if the collision is not head-on.

Finally, I would like to discuss attraction. Once you enable attraction, the particles will change their speed whenever they are in the close vicinity of other particles. The change can be positive or negative depending on the value of other parameters. The attraction in each direction is inversely proportional to the value of the respective parameters, `rotateX` and `rotateY`. The default values are very high to observe some noticeable attraction. On the other hand, if you make their values too low, the particles will gain very high speeds after some time.

The JSON responsible for the motion of the particles above is :

You should keep in mind that when you set `straight` to `true` and `direction` to `none` at the same time, the particles won't move at all.

## Interaction Events and Modes

So far so good, but you might be wondering if the particles can also interact with the user, and if they can, how they would interact.

To answer your first question, the particles can interact with the user. Particles.js can respond to three events: `hover`, `click`, and `resize`. However, first you should know that the events can be detected on the canvas or on the window itself by setting the value of the `detect_on` parameter. Now all these events will be triggered whenever you hover, click, or resize the canvas/window.

When you set `resize` to `true`, the particles adjust themselves in the remaining space without any distortion. When `resize` is set to `false`, the particles will change their shape to accommodate any changes in canvas size.

You are probably wondering what the `mode` parameter does in the code snippet above. This parameter defines how the particles would interact with the user. The library has defined five interaction modes. They are `grab`, `bubble`, `repulse``push`, and `remove`

The `grab` mode creates connecting lines between your point of hover or click and nearby particles within a specific distance that you set yourself. This mode only works with the hover event. The JSON below draws a line with opacity 1 to connect all particles within 800 px.

The `bubble` mode changes the size and opacity of all particles which are inside a specific distance for a duration that you decide. The `repulse` mode makes the particle go away from the location of the click. Both these modes can be added to either `hover` or `click`. The duration is applicable only on the click events in both cases.

You should try to change various parameters to make the demo even better.

The `push` mode adds a certain number of particles on each mouse click. The particles will be added at the location of the click. Similarly, the `remove` mode removes particles from the canvas. The particles to be removed are decided randomly.

## Final Thoughts

The three tutorials in this series covered everything that Particles.js has to offer. I have also mentioned a few things every now and then so that you don't have to scratch your head later over issues like particles not bouncing off each other, etc.

If you need to know more about all the parameters that we discussed, please go over the documentation of this library. Moreover, if you get stuck at some point while using the library or something is not behaving as it should, I would like to suggest that you read the source code to see what's going on under the hood.