Interactive Particles Animation In Pure JavaScript

Preview:

Description:

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