loading...

tsParticles v1.13.0 released

matteobruni profile image Matteo Bruni ・6 min read

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

Posted on Apr 24 by:

matteobruni profile

Matteo Bruni

@matteobruni

Full Stack Developer, mainly working in .NET with web technologies and mobile (Xamarin). WWDC14 Attendee, when Swift was presented, a bit rusty but can work in Swift too.

Discussion

markdown guide