Particles.js: Introduction to the Basics

Lots of tiny particles moving around and interacting with each other, or with you, have a certain attraction to them. If you encounter a situation where you need to work with a large number of particles, Particles.js will serve you well. As you can tell from the name, it is a JavaScript library that helps you create particle systems. Plus, it's lightweight, easy to use, and gives you a lot of control.

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

Installation and use

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

<script src="//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

You will also need to create a DOM element where Particles.js will create the particles. Give it an easily identifiable id for later reference.

<div id="particles-js"></div> 

Now, to create a basic particle system with default settings, you only need one line of JavaScript to initialize the library.

particlesJS();

By default, particles are white. They are also connected to each other by thin white wires. So if you don't see anything right now, just change the background to something else. This is the CSS I use to style the particle div:

#particles-js {
  background: cornflowerblue;
}

Try clicking somewhere in the demo below. After each click, Particles.js will generate four new particles.

Set custom options

Although it only took four lines of code to create the previous demo, the end result may not be what you want. The pellets seemed a bit too large and too dense for me. Maybe you want the particles to have different shapes or have random sizes. Particles.js allows you to set all these properties and more in JSON, which you can reference during initialization. The general syntax for calling this function is as follows:

particlesJS(dom-id, path-json, callback (optional));

Here, dom-id is the id of the element you want the particles to appear on. path-json is the path to the JSON file containing all configuration options, callback is the optional callback function. You can put the JSON code directly into the second parameter instead of the path.

Let’s try using this awesome library to create falling snowflakes. First, our function looks like this:

particlesJS("snowfall", 'assets/snowflakes.json');

I've removed the callback function and changed the DOM Id to something more specific. Snowflakes are mostly spherical in shape. They will fall downwards and be uneven in size. Also, unlike our first demo, they won't be connected by wires.

Moving particles

Initially, our snowflakes.json file will contain the following code:

{
  "particles": {
  
  },
  "interactivity": {
    
  }
}

All configuration options related to physical properties such as shape, size, and motion will be located within articles. All configuration options that determine interactive behavior will be placed in interactivity.

I set the number of particles to 100. This usually depends on available space. As mentioned before, I also set the shape to circle. At this point, your file should look like this:

{
  "particles": {
    "number": {
      "value": 100
    },
    "shape": {
      "type": "circle"
    }
  },
  "interactivity": {
    
  }
}

I used a value of 10 to set the size of the snowflakes. Since the snowflakes vary in size, I set random to true. This way, snowflakes can have any size between zero and the maximum limit we specify. To disable or remove all lines that link these particles together, you can set enable to false for line_linked.

To move particles, you must set the enable property to true. Without any other settings, particles will move randomly, just like in space. You can set the direction of these particles using a string value, such as "bottom". Even though the general motion of the particles is downward, they still need to move slightly randomly to look natural. This is accomplished by setting straight to false. At this point, snowflakes.json will have the following code:

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

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

更改交互行为

如果将鼠标悬停在上面的演示上，您会注意到线条仍然存在，但仅在悬停期间暂时显示。要完全删除它们，您可以将 onhover 事件的 enable 属性设置为 false。尝试在上面的演示中单击，您会注意到每次单击都会生成四个粒子。这是默认行为。您还可以使用 push 下的 articles_nb 属性更改粒子数量。在本例中，我已将此数字设置为 12。

您还可以使用 detect_on 选项确定是否检测窗口或画布上的事件。

以下是 JSON 文件的完整代码：

{
  "particles": {
    "number": {
      "value": 100
    },
    "shape": {
      "type": "circle"
    },
    "size": {
      "value": 10,
      "random": true
    },
    "line_linked": {
      "enable": false
    },
    "move": {
      "enable": true,
      "speed": 2,
      "direction": "bottom",
      "straight": false
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false
      }
    },
    "modes": {
      "push": {
        "particles_nb": 12
      }
    }
  }
}

如您所见，我不必专门启用 onclick 事件。默认情况下它是启用的。同样，我可以删除其他选项，例如 "detect_on": "canvas" under interactivity 和 "straight": false under move。我保留它们是为了让初学者不会对粒子为何不沿直线移动等问题感到困惑。

您可以尝试不同的值来修改上面CodePen中的雪花。只需单击 JS 选项卡即可编辑 JSON。

最终想法

开始使用 Particles.js 很简单。如果您以前从未使用过粒子系统，这个库将帮助您立即入门。本教程只是对该库的基本介绍。在本系列的接下来的两个教程中，我将更详细地介绍该库的所有方面。

如果您对本教程有任何疑问，请在论坛上告诉我。

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