Matteo Bruni for tsParticles

Posted on Apr 24, 2020 • Edited on Aug 13, 2022

tsParticles v1.13.0 released

#news #javascript #typescript #showdev

New tsParticles version released, 1.13.0.

This release is a huge one!

With great changes come great bugs! 🐛

Release Notes

New Features

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. The wiki is already updated here.
absorber introduced. Now you can have one or more areas in the canvas that absorb particles. The wiki is already updated here.
particles.twinkle animation introduced. Now you can have twinkling particles and linked lines. See more here

Bug Fixes

Performance improved with Spatial Hash Map
Div Repulse mode now works fine
Bounce out mode now works fine
Collisions now work fine
Particles stroke option now loads the opacity as expected, it was always 1
Event listeners are now passive, this would improve scrolling website UX

Some Pens of the new features

Polygon Mask with multiple paths

This polygon has 4 paths

Emitters

This login background is made with particles emitters, cool isn't it?

Absorbers

Have you ever wanted a black hole? Here's yours!

Collisions

The collisions in the previous releases, and in Particles.js too, were horrible. Now they're fixed and they look good. Finally!

Twinkle effect

Particles twinkling

Preset repositories

Shape repositories

Custom Shapes and Presets

tsParticles now supports some customizations 🥳.

NOW YOU CAN CREATE YOUR OWN SHAPES OR PRESETS

Creating a custom shape

You can now create a script with your own shape to use in your website or for distributing it to others. All you have to do is a drawing function, give it a name and use it in the config.

Publish your shapes with tsparticles-shape tag on NPM so everyone can find it.

You'll find a sample below.

Spiral sample

spiral.js - The custom shape script, you can distribute it or reuse in all your websites.

// call this method before initializing tsParticles, this shape will be available in all of your tsParticles instances
// parameters: shape name, drawing method
// opacity is for shapes that can't handle the color opacity like images
tsParticles.addShape("spiral", function(context, particle, radius, opacity) {
  const shapeData = particle.shapeData;
  const realWidth = (radius - shapeData.innerRadius) / shapeData.lineSpacing;

  for (let i = 0; i < realWidth * 10; i++) {
    const angle = 0.1 * i;
    const x =
      (shapeData.innerRadius + shapeData.lineSpacing * angle) * Math.cos(angle);
    const y =
      (shapeData.innerRadius + shapeData.lineSpacing * angle) * Math.sin(angle);

    context.lineTo(x, y);
  }
});

If you prefer using classes you can, IShapeDrawer interface can be implemented in your code or at least a class with a method draw(context, particle, radius) in it. You can find a sample below.

class SpiralDrawer {
  draw(context, particle, radius, opacity) {
    const shapeData = particle.shapeData;
    const realWidth = (radius - shapeData.innerRadius) / shapeData.lineSpacing;

    for (let i = 0; i < realWidth * 10; i++) {
      const angle = 0.1 * i;
      const x =
        (shapeData.innerRadius + shapeData.lineSpacing * angle) *
        Math.cos(angle);
      const y =
        (shapeData.innerRadius + shapeData.lineSpacing * angle) *
        Math.sin(angle);

      context.lineTo(x, y);
    }
  }
}

// call this method before initializing tsParticles, this shape will be available in all of your tsParticles instances
// parameters: shape name, drawer class
tsParticles.addShape("spiral", new SpiralDrawer());

config.json - The config section to add to your config or in your plugin readme to teach others on how to use it.

{
  // [... omitted for brevity]
  "particles": {
    // [... omitted for brevity]
    "shape": {
      "type": "spiral", // this must match the name above, the type works as always, you can use an array with your custom shape inside
      "custom": {
        // this must match the name above, these are the values set in particle.shapeData (the first line of the method above)
        // you can use array as value here too, the values will be random picked, like in standard shapes
        "spiral": {
          "innerRadius": 1,
          "lineSpacing": 1,
          "close": false, // this value is used by tsParticles to close the path, if you don't want to close it set this value to false
          "fill": false // this value is used by tsParticles to fill the shape with the particles color, if you want only the stroke set this value to false
        }
      }
      // [... omitted for brevity]
    }
    // [... omitted for brevity]
  }
  // [... omitted for brevity]
}

Creating a custom preset

You can now create a script with your own preset to use in your website or for distributing it to others. All you have to do is give it a name and set all the options you need it to load correctly. Remember to not import all config, properties not needed can be omitted.

Publish your preset with tsparticles-preset tag on NPM so everyone can find it.

You'll find a sample below.

Fire preset sample

fire.preset.js - The custom preset script, you can distribute it or reuse in all your websites.

// call this method before initializing tsParticles, this preset will be available in all of your tsParticles instances
// parameters: preset name, preset partial options
tsParticles.addPreset("fire", {
  fpsLimit: 40,
  particles: {
    number: {
      value: 80,
      density: {
        enable: true,
        value_area: 800
      }
    },
    color: {
      value: ["#fdcf58", "#757676", "#f27d0c", "#800909", "#f07f13"]
    },
    opacity: {
      value: 0.5,
      random: true
    },
    size: {
      value: 3,
      random: true
    },
    move: {
      enable: true,
      speed: 6,
      random: false
    }
  },
  interactivity: {
    events: {
      onclick: {
        enable: true,
        mode: "push"
      },
      resize: true
    }
  },
  background: {
    image: "radial-gradient(#4a0000, #000)"
  }
});

config.json - The config section to add to your config or in your plugin readme to teach others on how to use it.

{
  "preset": "fire" // this should match the name above, it can be used in array values too, it will be loaded in order like everyone else
}

Want to integrate in React.js?

react-particles-js now uses tsParticles as core library.

You can read more informations here: https://github.com/wufe/react-particles-js

Useful links

Checkout the demo here: https://particles.matteobruni.it

Do you want to replace the old, outdated and abandoned particles.js?
You're in the right place!

GitHub repo

https://github.com/matteobruni/tsparticles

npm

https://www.npmjs.com/package/tsparticles

yarn

https://yarnpkg.com/package/tsparticles

jsDelivr

https://www.jsdelivr.com/package/npm/tsparticles

CDNJS

https://cdnjs.com/libraries/tsparticles

Feel free to contribute to the project!

Demos

Here are some demos!

Custom Presets

watch the code for creating custom presets

Custom Shapes

watch the code for creating custom shapes

Characters as particles

FontAwesome characters as particles:

Mouse hover connections

Polygon mask

Background Mask particles

COVID-19 SARS-CoV-2 particles

Don't click! DON'T CLICK! OH NO IT'S SPREADING!!!!

COVID-19 is not funny. It's a serious world problem and we should prevent its spreading. If you are in a risky area please STAY AT HOME