Interactive Particles Animation In Pure JavaScript

Yet another interactive particles system built with JavaScript and Canvas API. These particles will automatically be connected by lines when they are close enough.

How to use it:

Load the necessary JavaScript files in the document.

<script src="libs/vector.js" async></script>
<script src="js/main.js" defer></script>

Apply your own CSS classes to the particle’s container.

.particles-area {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

Config the particles in the main.js.

let particleConfig = {
    r: 8,  // radius
    s: 1.9,  // speed
    acc: 0.65,  // acceleration
    maxS: 7,  // max speed
    sb: 11,  // shadow blur
    colors: [  // list of possible colors
      "#12D800",
      "#B8860B",
      "#9400D3",
      "#008000",
      "#4682B4",
      "#FF6347",
      "#663399"
    ]
};

Changelog:

09/09/2019

• Add a correct speed definition

01/10/2019

• Add controls of settings and optimize drawing