Particles.js: Motion and Interaction

In this tutorial, we will dive into Particles.js and learn how to control particle motion, interaction patterns, and events. In the previous tutorial, we have learned how to create particles of varying shapes and sizes. However, there is a lack of interaction between the particles, and they pass through each other, as if there are no other particles. This tutorial will make up for this shortcoming.

Control particle movement

Not all particles in a particle system move in a random direction. Even for random movement, there are other forces. For example, particles may accelerate when approaching each other, or rebound after a collision. All these options can be controlled by various parameters under the move attribute.

If you do not want the particles to move, you can set enable to false. The velocity of the particles can be specified using the speed parameter. To make each particle move at a random speed, set random to true. On the other hand, to make them move in a random direction, specify direction as none.

Particles will eventually move to the system boundary. out_mode Parameters determine whether the particle rebounds or appears from another direction. When set to out, particles will move out of the canvas; when set to bounce, particles will rebound after hitting the boundary.

It seems unnatural that the particles pass through each other while the speed remains unchanged. To change the particle velocity at each collision, set bounce to true. Interestingly, this setting is only valid when the line_linked or attraction properties are enabled. Each time a particle collides, it reverses its direction, even if it is not a head-on collision.

Finally, let's discuss attractiveness. When attractiveness is enabled, the particle changes its velocity when other particles exist near it. The change may be positive or negative, depending on the value of other parameters. The attraction of each direction is inversely proportional to the values ​​of the respective parameters rotateX and rotateY. The default value is high so that obvious attraction is observed. On the other hand, if these values ​​are set too low, the particles will get very high velocities after a period of time.

The JSON code for the particle motion above is as follows:

"move": {
  "enable": true,
  "speed": 20,
  "random": true,
  "direction": "none",
  "bounce": true,
  "out_mode": "bounce",
  "attract": {
    "enable": true,
    "rotateX": 10,
    "rotateY": 10
  }
}

Remember that when straight is set to true and direction to none at the same time, the particles will not move.

Interactive events and patterns

Can the user interact with particles? The answer is yes. Particles.js can respond to three events: hover, click and resize. By setting the value of the detect_on parameter, events in the canvas or the window itself can be detected. All these events will be triggered when hovering, clicking, or resizing the canvas/window.

When resize is set to true, the particles adjust themselves in the remaining space without deforming. When resize is set to false, the particles change shape to suit any changes in the size of the canvas.

"move": {
  "enable": true,
  "speed": 20,
  "random": true,
  "direction": "none",
  "bounce": true,
  "out_mode": "bounce",
  "attract": {
    "enable": true,
    "rotateX": 10,
    "rotateY": 10
  }
}

mode Parameters define how users interact with particles. The library defines five interaction modes: grab, bubble, repulse, push, remove, and

.

grab

Mode creates a connection line between the point you hover or click and nearby particles within a specific distance. This mode is only applicable to hover events. The JSON code below draws a line with opacity of 1 to connect all particles within 800 pixels.

"detect_on": "canvas",
"events": {
  "onhover": {
    "enable": true,
    "mode": "repulse"
  },
  "onclick": {
    "enable": true,
    "mode": "push"
  },
  "resize": true
}

bubblerepulse Mode changes the size and opacity of all particles within a specific distance, the duration is up to you. hover mode keeps the particles away from the click position. Both modes can be added to click or

. Duration applies only to click events in both cases.

"grab": {
  "distance": 800,
  "line_linked": {
    "opacity": 1
  }
}

You can try changing various parameters to make the demo work better.

pushremove Mode adds a certain number of particles each time the mouse clicks. The particles will be added to the clicked position. Similarly, the

mode removes particles from the canvas. The particles to be removed are randomly selected.

"bubble": {
  "distance": 600,
  "size": 60,
  "duration": 0.1,
  "opacity": 1
},
"repulse": {
  "distance": 500,
  "duration": 0.5
}

Summary

This series of tutorials covers all the features of Particles.js. In order to avoid problems such as particles not rebounding from time to time, I also mentioned some precautions from time to time.

If you need more information on all the parameters we discuss, please refer to the documentation for this library. Additionally, if you have problems using the library, or some features behave abnormally, it is recommended that you read the source code to understand how it works internally.

This article has been updated and includes the contributions of Kingsley Ubah. Kingsley is passionate about creating content that educates and inspires readers. His hobbies include reading, football and cycling.

The above is the detailed content of Particles.js: Motion and Interaction. For more information, please follow other related articles on the PHP Chinese website!