tsParticles v1.13.0 released
Tags: news, javascript, typescript, showdev
Published: 2020-04-24 22:46:00

# New [tsParticles](https://github.com/matteobruni/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](https://github.com/matteobruni/tsparticles/wiki/tsParticles-Options#emitters).
- `absorber` introduced. Now you can have one or more areas in the canvas that absorb particles. The wiki is already updated [here](https://github.com/matteobruni/tsparticles/wiki/tsParticles-Options#absorbers).
- `particles.twinkle` animation introduced. Now you can have twinkling particles and linked lines. See more [here](https://github.com/matteobruni/tsparticles/wiki/tsParticles-Options#particles)

### 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

{% codepen https://codepen.io/matteobruni/pen/MWaePMa %}

### Emitters

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

{% codepen https://codepen.io/matteobruni/pen/VwvPLMe %}

### Absorbers

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

{% codepen https://codepen.io/matteobruni/pen/eYpgxQx %}

### Collisions

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

{% codepen https://codepen.io/matteobruni/pen/YzyZzGZ %}

### Twinkle effect

Particles twinkling

{% codepen https://codepen.io/matteobruni/pen/jObBaqv %}

---

### Preset repositories
- <https://github.com/matteobruni/tsparticles-preset-60fps>
- <https://github.com/matteobruni/tsparticles-preset-backgroundMask>
- <https://github.com/matteobruni/tsparticles-preset-basic>
- <https://github.com/matteobruni/tsparticles-preset-bouncing>
- <https://github.com/matteobruni/tsparticles-preset-fire>
- <https://github.com/matteobruni/tsparticles-preset-fontAwesome>
- <https://github.com/matteobruni/tsparticles-preset-snow>
- <https://github.com/matteobruni/tsparticles-preset-stars>

### Shape repositories
- <https://github.com/matteobruni/tsparticles-shape-spiral>
- <https://github.com/matteobruni/tsparticles-shape-heart>

---

## 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.

```javascript
// 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.

```javascript
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.

```javascript
{
  // [... 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.

```javascript
// 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.

```javascript
{
  "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

{% codepen https://codepen.io/matteobruni/pen/ExjJmXX %}

*watch the code for creating custom presets*

### Custom Shapes

{% codepen https://codepen.io/matteobruni/pen/vYOMmGr %}

*watch the code for creating custom shapes*

### Characters as particles

{% codepen https://codepen.io/matteobruni/pen/xxGdyjd %}

#### FontAwesome characters as particles:

{% codepen https://codepen.io/matteobruni/pen/QWbrLoK %}

---

### Mouse hover connections

{% codepen https://codepen.io/matteobruni/pen/GRJMgBp %}

---

### Polygon mask

{% codepen https://codepen.io/matteobruni/pen/yLNpgKW %}

---

### Background Mask particles

{% codepen https://codepen.io/matteobruni/pen/WNvYKgW %}

---

### COVID-19 SARS-CoV-2 particles

{% codepen https://codepen.io/matteobruni/pen/dyoZbMb %}

**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*