Particles.js: Introduction

There are a large number of tiny particles moving around and interacting with each other—or interacting with you—with a unique attraction. Particles.js will be very useful if you need to deal with large amounts of particles. As the name implies, it is a JavaScript library that helps you create particle systems. Plus, it's lightweight, easy to use, and gives you plenty of control.

This tutorial will cover all the features of this library and help you get started. This tutorial is the first part of this series and covers only the basics.

Installation and use

First, you need to host the library. You can upload it to your own server or use jsdeliver CDN like I did.

<code><br></code>

You also need to create a DOM element where Particles.js will create particles. Give it a circle that is easy to identify. At this point, your file should look like this:

<code>{<br>  "particles": {<br>    "number": {<br>      "value": 100<br>    },<br>    "shape": {<br>      "type": "circle"<br>    }<br>  },<br>  "interactivity": {<br><br>  }<br>}<br></code>

I use a value of 10 to set the size of the snowflake. Since the snowflakes vary in size, I set random to true. This way, the size of the snowflake can vary between the zero and maximum limits we specify. To disable or delete all lines connecting these particles, you can set line_linked's enable to false.

To move particles, you must set the enable attribute to true. Without any other settings, the particles will move in a mess, just like they are in space. You can set the orientation of these particles using string values ​​(such as "bottom"). Even if the overall motion of particles is downward, they still need to move slightly randomly to look natural. This can be done by setting straight to false . At this point, snowflakes.json will contain the following code:

<code>{<br>  "particles": {<br>    "number": {<br>      "value": 100<br>    },<br>    "shape": {<br>      "type": "circle"<br>    },<br>    "size": {<br>      "value": 10,<br>      "random": true<br>    },<br>    "line_linked": {<br>      "enable": false<br>    },<br>    "move": {<br>      "enable": true,<br>      "speed": 2,<br>      "direction": "bottom",<br>      "straight": false<br>    }<br>  },<br>  "interactivity": {<br><br>  }<br>}<br></code>

Use the above JSON code, you will get the following results:

Change interactive behavior

If you hover over the demo above, you will notice that the lines still exist, but only temporarily display during the hover. To delete them completely, you can set the onhover property of the enable event to false. Try clicking on the demo above and you will notice that each click generates four particles. This is the default behavior. You can also change the number of particles using the push attribute under particles_nb. In this case, I have set this number to 12.

You can also use the detect_on option to determine whether to detect events on a window or on a canvas.

The following is the complete code of the JSON file:

<code><br></code>

As you can see, I don't have to enable the onclick event specifically. It is enabled by default. Similarly, I can delete other options such as interactivity and "detect_on": "canvas" under move. I keep them so that beginners won't be confused about questions like why particles don't move in a straight line. "straight": false"

You can try different values ​​to modify the snowflakes in the CodePen above. Just click the

JS tab to edit JSON.

Final Thoughts

Particles.js is easy to get started. If you have never used a particle system before, this library will help you get started right away. This tutorial is just a basic introduction to the library. In the next two tutorials in this series, I will cover all aspects of the library in more detail.

If you have any questions about this tutorial, please let me know in the forum.

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