Lightweight JS Library For Creating Interactive Particles – tsparticles

Category: Animation , Javascript , Recommended | May 21, 2020
Author: matteobruni
Views Total: 219
Official Page: Go to website
Last Update: May 21, 2020
License: MIT

Preview:

Lightweight JS Library For Creating Interactive Particles – tsparticles

Description:

tsparticles is an upgraded and continued version of the Particles.js library to create particles in an elegant way.

Rewritten in TypeScript and comes with a lot of new features:

  • 16 pre-defined presets (JSON).
  • Circle, line, edge, triangle, polygon, star shapes.
  • Or using a custom image.
  • More move out modes: bounce, bounce-vertical, and bounce-horizontal.
  • Bugs fixed.
  • And more customization options.

Install & Download:

# NPM
$ npm install tsparticles --save

How to use it:

1. Load the tsparticles library from a CDN.

<script src="https://cdn.jsdelivr.net/npm/tsparticles/dist/tsparticles.min.js"></script>

2. Create a container where you want to render the particles.

<div id="tsparticles"></div>

3. Initialize the tsparticles and load a preset of your choice as follows:

  • bubble.json
  • chars.json
  • collisions.json
  • connect.json
  • default.json
  • images.json
  • mask.json
  • nasa.json
  • nyancat.json
  • nyancat2.json
  • shadow.json
  • slow.json
  • snow.json
  • star.json
  • test.json
  • virus.json
tsParticles.loadJSON("tsparticles", "presets/bubble.json").then((container) => {
  console.log("callback");
}).catch((error) => {
  console.error(error);
});

4. You can also create custom particles by passing the following options:

tsParticles.load("tsparticles", { 
  "particles": {
    "color": {
      "value": "#ffffff"
    },
    "number": {
      "value": 80,
      "limit": 200,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "shape": {

      /* "circle"
      "line"
      "edge"
      "triangle"
      "polygon"
      "star"
      "image"
      ["circle", "triangle", "image"]
      */
      "type": "circle", 
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 10,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 80,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 300,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 2
    },
    "move": {
      "enable": true,
      "speed": 12,
      /*
        "none"
        "top"
        "top-right"
        "right"
        "bottom-right"
        "bottom"
        "bottom-left"
        "left"
        "top-left"
      */
      "direction": "none",
      "random": false,
      "straight": false,
      /*
        "out"
        "destroy"
        "bounce"
        "bounce-vertical"
        "bounce-horizontal"
      */
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas", // "canvas", "window","parent"
    "events": {
      "onhover": {
        "enable": false,
        /* 
          "grab"
          "bubble"
          "repulse"
          "connect"
          ["grab", "bubble"]
        */
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        /*
          "push"
          "remove"
          "bubble"
          "repulse"
          ["push", "repulse"]
        */
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 800,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 800,
        "size": 80,
        "duration": 2,
        "opacity": 0.8,
        "speed": 3
      },
      "repulse": {
        "distance": 400,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true,
  "fps_limit": 60,
  "polygon": {
    "debug": {
      "enable": true,
      "color": "#000000"
    },
    "type": "inside", // none / inside / outside / inline
    "move": {
      "radius": 10
    },
    "url": "demo/svg/deer.svg"
  }
});

5. Or load particles from an array.

tsParticles.loadFromArray("tsparticles", [{ /* options here */ }, { /* other options here */ }]);

6. Fire an event when all particles are loaded.

tsParticles.setOnClickHandler((e) => { 
  /* custom on click handler */ 
});

7. Control the animations.

const particles = tsParticles.domItem(0);
// play the animations
particles.play();
// pause the animations
particles.pause();

Changelog:

v1.14.3 (05/21/2020)

  • Fixed replaceColor option for SVG images

v1.14.2 (05/16/2020)

  • Fixed a console message in ImageDrawer

v1.14.1 (05/14/2020)

  • Fixed shape customizations

v1.14.0 (05/11/2020)

  • Particles can now be destroyed after a threshold size (bigger or lower it’s your choice)
  • Particles can infect other particles with a new infection option
  • Particles can now vibrate with a new vibrate option
  • Particles can set noise on move options
  • Created a slim file tsparticles.slim.js that doesn’t have PolygonMask, Emitters and Absorbers.
  • Play/Pause behavior now will have a better behavior in startup
  • The particles number limit can be more flexible with area density integration. If you specify a density the limit will be affected by that calculation, this will improve responsiveness.
  • The particles number density will be more customizable, the code has a 1000 factor hard coded, now that value is customizable.

v1.13.9 (05/04/2020)

  • bugs fixed

v1.13.8 (05/03/2020)

  • update

v1.13.2 (04/26/2020)

  • critical bugfix on shape override options

v1.13.0 (04/25/2020)

  • bubble mode on mouse hover and on mouse click has now a color option to change the color when the event occurs
  • shape types options can now override almost all particles options, using the same structure. Omitted options will be taken from the particles options.
  • repulse mode now has a speed option to change the repulse speed. The default value is 1 but this value will be multiplied by 100 in code to not break old settings. If you want a lower speed use decimals.
  • polygon options (Polygon Mask to be clear) have a new position option, this have a { x: 50, y: 50 } default value, to keep the old behavior. x and y values are percentages, not absolute values, calculated on canvas width.
  • polygon now can use a SVG file with multiple paths, all of them will be used.
  • emitter introduced. Now you can have one or more areas in the canvas that spawn particles.
  • absorber introduced. Now you can have one or more areas in the canvas that absorb particles.
  • particles.twinkle animation introduced. Now you can have twinkling particles and linked lines.
  • Bugs fixed

v1.12.10 (04/12/2020)

  • Bugs fixed

v1.12.8 (04/11/2020)

  • Bugs fixed

v1.12.7 (04/07/2020)

  • Bugs fixed

v1.12.0 (04/03/2020)

  • Updated

v1.11.1 (03/29/2020)

  • Updated

v1.11.0 (03/28/2020)

  • Updated

v1.10.4 (03/21/2020)

  • Updated

v1.10.2 (03/16/2020)

  • fixed polygon shape option loading
  • now you can control the animations

v1.9.2 (03/13/2020)

  • hotfix

v1.9.0 (03/12/2020)

  • adjusted background mask settings

You Might Be Interested In:


Leave a Reply