Particles.js: Control Particle Count and Shape

The previous Particles.js tutorial briefly covered the various features provided by the library and how to get started with it. This tutorial will provide a detailed introduction to all aspects related to the physical appearance of particles in Particles.js.

Particle number, color and opacity

First, we will deal with the number and density of particles. Density determines the number of particles that gather together in a given region. It is enabled by default, and value_area is set to 800. The following JSON code allows you to control the number of particles:

<code>"number": {<br>  "value": 50, <br>  "density": {<br>    "enable": true,<br>    "value_area": 500<br>  }<br>}<br></code>

If you set enable at density to false, the number of particles displayed will be exactly 50. Double the value of value_area will reduce the number of particles by about half.

There are three ways to set the color of the particles. You can set the color using hexadecimal format, RGB format, or HSL format. Due to an error in the library, the RGB and HSL formats are only valid when the default color value is removed from the library.

If you want to set the particle color randomly, you can use the value "random". Finally, to set the color randomly from the color list, you must provide the color in hexadecimal format as an array. The following is the JSON code for setting the particle color:

<code>"color": {<br>  "value": "#fff" //使用十六进制设置白色 (我们使用此版本)<br>  "value": {r:255, g:255, b:255} //使用RGB设置白色<br>  "value": {h:0, s:100%, l:100%} //使用HSL设置白色<br>  "value": ["#f00", "#0f0", "#00f"] //随机设置红色、绿色和蓝色<br>  "value": "random" //随机设置颜色<br>}<br></code>

Opacity attribute gives you a lot of control. You can set it to an exact value or use a random value by setting "random" to true. Not only that, you can also set the opacity of particles. Here is the JSON code for opacity properties:

<code>"opacity": {<br>  "value": 1,<br>  "random": true, // 在我们的例子中设置为false<br>  "anim": {<br>    "enable": true,<br>    "speed": 8,<br>    "opacity_min": 0.4,<br>    "sync": false<br>  }<br>}<br></code>

Setting "sync" to true will set opacity animations for all particles at the same time. Use a value of 0.4 as "opacity_min" to ensure that the opacity of any particles does not fall below 0.4 during the animation process. This is a demonstration of stars moving through space. Try changing the number, color, or opacity of particles to see how they work.

Shape and size

Particles.js has five different values ​​to create basic shapes. A simple shape like circle will produce a circular particle, triangle will produce a triangle particle, and edge will produce a square. You can use the value polygon to create a polygon with nb_sides edge, you need to provide a value of nb_sides. To create an actual star, you can set the shape type to star. The stroke parameter adds an outline of the given color and width around all particles. The following JSON code will create the hexagon.

<code>"number": {<br>  "value": 50, <br>  "density": {<br>    "enable": true,<br>    "value_area": 500<br>  }<br>}<br></code>

can also display images instead of basic shapes. First, you must specify the shape type as image. After that, you can set the image source and its desired height and width. It is worth remembering that width and height do not determine the size of the image particles, but their aspect ratio. Here are some JSON codes that use football images to create particles:

<code>"color": {<br>  "value": "#fff" //使用十六进制设置白色 (我们使用此版本)<br>  "value": {r:255, g:255, b:255} //使用RGB设置白色<br>  "value": {h:0, s:100%, l:100%} //使用HSL设置白色<br>  "value": ["#f00", "#0f0", "#00f"] //随机设置红色、绿色和蓝色<br>  "value": "random" //随机设置颜色<br>}<br></code>

This library also allows you to mix multiple shapes. For example, you can decide to create circles, squares, and hexagons at the same time. In this case, you just pass an array containing all of these shapes.

<code>"opacity": {<br>  "value": 1,<br>  "random": true, // 在我们的例子中设置为false<br>  "anim": {<br>    "enable": true,<br>    "speed": 8,<br>    "opacity_min": 0.4,<br>    "sync": false<br>  }<br>}<br></code>

The

size property has all options for the opacity property. You can set the size randomly as well as set the animation size of a single particle. Check out the following JSON code carefully.

<code>"shape": {<br>  "type": "polygon",<br>  "stroke": {<br>     "width": 4,<br>     "color": "#fff"<br>  },<br>  "polygon": {<br>     "nb_sides": 6<br>  }<br>}<br></code>

If you set random to false, all particles will have a size of 25. When random is set to true, size acts as the maximum size limit for the particle. Setting sync to true in the animation will change the size of all elements at the same time. You should open the demo and try different values ​​for the number of polygon edges, animations, and other properties to see how they affect the final result.

Connected particles

When particles are close enough, you can draw the connection lines between them by enabling the line_linked property.

This property has four added values. The distance property specifies the maximum distance at which the line will be drawn. You can also set color to a hexadecimal string. The opacity of the lines varies according to the distance between the particles. The value you specify as opacity is the opacity of the line when the particle is very close. Finally, width determines the width of the line. The following is a JSON code snippet for the accompanying demonstration.

<code>"shape": {<br>  "type": "image",<br>  "image": {<br>     "src": "img/football.png", // 设置图像路径。<br>     "width": 1,   // 宽度和高度不决定大小。<br>     "height": 1   // 它们只决定纵横比。<br>  }<br>}<br></code>

You can see that once the distance between particles exceeds 200 pixels, the lines disappear.

Summary

I have tried my best to cover everything you need to know about changing the shape, size, color of particles, and almost every other physical property. The examples in this tutorial clearly illustrate how easy it is to use this library. If you need a basic particle library, you should definitely try Particles.js.

The next tutorial will teach you how to control the movement of particles and their interactions with each other and your interactions.

This article has been updated and contains contributions from Kingsley Ubah. Kingsley is passionate about creating content that educates and inspires readers. Hobbies include reading, football and cycling.

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