The previous Particles.js tutorial briefly discussed various features that the library offers and how to get started with the library. In this tutorial I will cover in detail all the aspects of Particles.js that deal with the physical appearance of particles.

Number, Color, and Opacity

The first thing that we will deal with is the number and density of particles. Density determines the number of particles that will be packed together in a given area. It is enabled by default with the value_area set to 800. Here is the JSON that lets you control the number of particles:

"number": {
  "value": 50, 
  "density": {
    "enable": true,
    "value_area": 500
  }
}

If you set enable under density to false then the number of particles displayed will be exactly 50. Doubling the value of value_area will reduce the number of particles approximately by half.

There are three ways to set the colors of particles. You can set colors in HEX format, RGB format, or HSL format. Due to a bug in the library, RGB and HSL format work only when you remove the default color value from the library.

If you want to randomly set the particle color, you can do so with the value "random". Finally, to set color randomly from a list of colors, you will have to provide the colors in HEX format as an array. Here is the JSON to set colors for particles:

"color": {
  "value": "#fff" //set white in HEX (We are using this version)
  "value": {r:255, g:255, b:255} //set white in RGB
  "value": {h:0, s:100%, l:100%} //set white in HSL
  "value": ["#f00", "#0f0", "#00f"] //set red, green and blue randomly
  "value": "random" //set colors randomly
}

The opacity property gives you a lot of control. You can set it to an exact value or use random values by setting "random" to true. Not only that but you can also animate the opacity of particles. Here is the JSON code for the opacity property:

"opacity": {
  "value": 1,
  "random": true, // Set to false in our case
  "anim": {
    "enable": true,
    "speed": 8,
    "opacity_min": 0.4,
    "sync": false
  }
}

Setting "sync" to true will animate the opacity of all particles at the same time. Using a value of 0.4 for "opacity_min" makes sure that the opacity never goes below 0.4 for any particle during animation. Here is a demo with stars moving across space. Try changing the number, color, or opacity of particles to see their effect.

Shape and Size

Particles.js has five different values to create basic shapes. A simple shape like circle generates a circular particle, triangle generates triangular particles, and edge generates squares. You can use the value polygon to create a nb_sides sided polygon, where you provide the value nb_sides. To create actual star shapes, you can set the shape type to star.  The stroke parameter adds an outline of a given color and width around all particles. The JSON code below will create hexagons.

"shape": {
  "type": "polygon",
  "stroke": {
     "width": 4,
     "color": "#fff"
  },
  "polygon": {
     "nb_sides": 6
  }
}

It is also possible to display images instead of basic shapes. First, you will have to specify the shape type as image. After that, you can set the image source and its desired height and width. It is worth keeping in mind that width and height will not determine the size of image particles but their aspect ratio. Here is some JSON to create particles with asteroid images:

"shape": {
  "type": "image",
  "image": {
     "src": "img/football.png", // Set image path.
     "width": 1,   // Width and height don't decide size.
     "height": 1   // They just decide aspect ratio.
  }
}

The library also allows you to mix multiple shapes together. For instance, you may decide to create circles, squares, and hexagons simultaneously. In that case, all you have to do is pass an array with all these shapes.

"type": ["circle","edge","polygon"]

The size property has all the options of the opacity property. You can set the size at random as well as animate the size of individual particles. Take a close look at the following JSON code.

"size": {
  "value": 25, 
  "random": true,
  "anim": {
    "enable": true,
    "speed": 20,
    "size_min": 10,
    "sync": false
  }
}

If you set random to false, all particles will be of size 25. When random is set to true, size serves as the maximum size limit for particles. Setting sync to true inside animation will change the size of all elements simultaneously. You should open the demo and try out different values for the number of polygon sides, animation and other properties to see how they affect the final result. 

Linking Particles Together

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

This property has four additional values. The distance property specifies the maximum distance up to which lines will be drawn. You can also set the color as a HEX string. The opacity of lines varies based on the distance between particles. The value that you specify as opacity is the opacity of lines when particles are really close together. Finally, width determines how wide your lines are going to be. Here is the JSON snippet for the accompanying demo.

"line_linked": {
  "enable": true,
  "distance": 200,
  "color": "#fff",
  "opacity": 1,
  "width": 4
}

You can see that the lines disappear as soon as the distance between particles becomes more than 200 px.

Final Thoughts 

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

The next tutorial will teach you how to control the motion of particles and their interaction among themselves as well as with you. If you have any questions related to this tutorial, please leave a comment.