Tutorial

How To Create Background Effects with tsParticles

JavaScript

Introduction

Particles.js is a library that allows you to create particle effects. These are shapes and objects that are drawn onto a canvas with the capability of observing some behaviors of physics and interactivity. This can be useful for creating eye-catching backgrounds without the need for illustrations or photography.

Note: Development for the original repo appears to have stalled. A fork named tsParticles has recently been created. The content of this tutorial has been updated to use this new fork.

In this tutorial, you will be briefly introduced to some of the features of this library and loading and modifying sample configurations.

Prerequisites

To complete this tutorial, you will need:

  • A modern web browser.
  • Familiarity with JSON may help with understanding the configuration files. Consult An Introduction to JSON.

Step 1 — Setting Up the Project

For tutorial purposes, this example will focus on a local index.html file and a copy of the tsParticles library hosted by a content delivery network (CDN).

In your terminal window, create a new project directory:

  • mkdir tsparticles-example

Then, navigate into the new project directory:

  • cd tsparticles-example

Next, create an index.html file:

index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>tsParticles</title>
  <style>
  * {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    padding: 0;
  }

  body {
    background-color: #212121;
  }
</style>
</head>

<body>
</body>
</html>

The library will require a div with an id to hook the canvas onto. Add the new <div id="tsparticles"> to the body:

index.html
<body>
 <div id="tsparticles"></div>
</body>

Then, add the CDN-hosted library to the body:

index.html
<body>
  <div id="tsparticles"></div>

  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.1/tsparticles.min.js"
    integrity="sha512-PYHWDEuXOTJ9MZ+/QHqkbgiEYZ+LImQv3i/9NyYOABFvK37e4q4Wg7aQDN1JpoGiEu1TYZh6JMrZluZox2gbDA=="
    crossorigin="anonymous"
  ></script>
</body>

Note: tsparticles.js is also available via npm:

  • npm install tsparticles

Next, initialize tsParticles by specifying the id it should hook into (in this case, tsparticles):

index.html
<body>
  <div id="tsparticles"></div>

  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.1/tsparticles.min.js"
    integrity="sha512-PYHWDEuXOTJ9MZ+/QHqkbgiEYZ+LImQv3i/9NyYOABFvK37e4q4Wg7aQDN1JpoGiEu1TYZh6JMrZluZox2gbDA=="
    crossorigin="anonymous"
  ></script>

  <script>
    tsParticles.load('tsparticles');
  </script>
</body>

When visiting index.html in a web browser, you should observe several particles randomly scattered across the web page. Verify that everything up to this point is working as expected, and you can proceed with adding custom options.

Step 2 — Loading a Configuration

The library documentation lists many of the options that are available. These include background, interactivity, particles, and more.

First, copy default.json and paste it as particles:

index.html
<script>
  const particles = {
    "fpsLimit": 60,
    "particles": {
      "number": {
        "value": 80,
        "density": {
          "enable": true,
          "value_area": 800
        }
      },
      "color": {
        "value": "#ff0000",
        "animation": {
          "enable": true,
          "speed": 20,
          "sync": true
        }
      },
      "shape": {
        "type": "circle",
        "stroke": {
          "width": 0
        },
        "polygon": {
          "nb_sides": 5
        },
      },
      "opacity": {
        "value": 0.5,
        "random": false,
        "anim": {
          "enable": false,
          "speed": 3,
          "opacity_min": 0.1,
          "sync": false
        }
      },
      "size": {
        "value": 3,
        "random": true,
        "anim": {
          "enable": false,
          "speed": 20,
          "size_min": 0.1,
          "sync": false
        }
      },
      "links": {
        "enable": true,
        "distance": 100,
        "color": "#ffffff",
        "opacity": 0.4,
        "width": 1
      },
      "move": {
        "enable": true,
        "speed": 6,
        "direction": "none",
        "random": false,
        "straight": false,
        "out_mode": "out",
        "attract": {
          "enable": false,
          "rotateX": 600,
          "rotateY": 1200
        }
      }
    },
    "interactivity": {
      "detect_on": "canvas",
      "events": {
        "onhover": {
          "enable": true,
          "mode": "repulse"
        },
        "onclick": {
          "enable": true,
          "mode": "push"
        },
        "resize": true
      },
      "modes": {
        "grab": {
          "distance": 400,
          "line_linked": {
            "opacity": 1
          }
        },
        "bubble": {
          "distance": 400,
          "size": 40,
          "duration": 2,
          "opacity": 0.8
        },
        "repulse": {
          "distance": 200
        },
        "push": {
          "particles_nb": 4
        },
        "remove": {
          "particles_nb": 2
        }
      }
    },
    "retina_detect": true,
    "background": {
      "color": "#000000",
      "image": "",
      "position": "50% 50%",
      "repeat": "no-repeat",
      "size": "cover"
    }
  };

  tsParticles.load('tsparticles');
</script>

Use this new variable in your tsParticles.load() call:

<script>
  // ...

  tsParticles.load('tsparticles', particles);
</script>

When visiting index.html in a web browser, you should observe small circles connected with lines and traversing across the screen.

Step 3 — Customizing a Configuration

The options available to tsParticles interact and affect each other. You should experiment with adjusting values and see how they affect the particles.

Taking the particles that were defined earlier, you can modify the values of the configuration like so:

index.html
<script>
  const particles = {
    "fpsLimit": 60,
    "particles": {
      "number": {
        "value": 40,
        "density": {
          "enable": true,
          "value_area": 800
        }
      },
      "color": {
        "value": "#ff9800",
        "animation": {
          "enable": false,
          "speed": 20,
          "sync": true
        }
      },
      "shape": {
        "type": "polygon",
        "stroke": {
          "width": 2
        },
        "polygon": {
          "nb_sides": 6
        },
      },
      "opacity": {
        "value": 0.5,
        "random": false,
        "anim": {
          "enable": false,
          "speed": 3,
          "opacity_min": 0.1,
          "sync": false
        }
      },
      "size": {
        "value": <^>20<>,
        "random": true,
        "anim": {
          "enable": false,
          "speed": 20,
          "size_min": 0.1,
          "sync": false
        }
      },
      "links": {
        "enable": false,
        "distance": 100,
        "color": "#ffffff",
        "opacity": 0.4,
        "width": 1
      },
      "move": {
        "enable": true,
        "speed": 6,
        "direction": "down",
        "random": false,
        "straight": false,
        "out_mode": "out",
        "attract": {
          "enable": false,
          "rotateX": 600,
          "rotateY": 1200
        }
      }
    },
    "interactivity": {
      "detect_on": "canvas",
      "events": {
        "onhover": {
          "enable": true,
          "mode": "repulse"
        },
        "onclick": {
          "enable": true,
          "mode": "push"
        },
        "resize": true
      },
      "modes": {
        "grab": {
          "distance": 400,
          "line_linked": {
            "opacity": 1
          }
        },
        "bubble": {
          "distance": 400,
          "size": 40,
          "duration": 2,
          "opacity": 0.8
        },
        "repulse": {
          "distance": 200
        },
        "push": {
          "particles_nb": 4
        },
        "remove": {
          "particles_nb": 2
        }
      }
    },
    "retina_detect": true,
    "background": {
      "color": "#ffffff",
      "image": "",
      "position": "50% 50%",
      "repeat": "no-repeat",
      "size": "cover"
    }
  };

  tsParticles.load('tsparticles', particles);
</script>

This code change will make the background color switch to white. It also changes the shape of the particles from circles to hexagons (six-sided polygons). The number and size of the polygons have been changed. The linked lines were removed. The direction was changed from none to bottom.

When visiting index.html in a web browser, you should observe golden hexagons cascading down the page.

Experimenting with Configurations

To get a broader sense of the potential the library offers, you can look at the various Samples available on the tsParticles site.

Use the dropdown to select an interesting sample. You can use the editor on this page to modify values. Then click Reload to see the changes.

If you would like to export the changes, click More and then click Export Config. This will display the configuration in JSON format.

Note: Some of these demonstrations may require additional dependencies. For example, the Font Awesome sample requires the Font Awesome library.

Spend some time assigning these new configurations to the particle variable from earlier in your index.html and refreshing the page in your web browser.

Conclusion

In this tutorial, you learned how to use the tsParticles library (formerly Particles.js) locally.

tsParticles can be used for eye-catching backgrounds. However, you may need to weigh considerations for browser support, load times on slow networks, and performance on slower computers.

If you’d like to learn more about JavaScript, check out our JavaScript topic page for exercises and programming projects.

Creative Commons License