tsParticles v1.16.0 released
Tags: typescript, javascript, showdev, news
Published: 2020-06-15 21:47:00

# tsParticles v1.16.0

## Release Notes

- Added `bubble` mode to `div` events
- Added `type` for `div` events, `circle` or `rectangle` are the values, it represent the div shape
- Renamed `elementId` property in `onDiv` object to `ids`
- `div` events now are more configurable, the `onDiv` property accepts a single object or an array of that object and the `divEvent` object supports `ids` property with single string or an array of strings
- `bubble` and `repulse` modes have a new `divs` property which is a similar object (or an `array` of it), it has `ids` (`string` or `array`) instead of `divs` for configure custom configuration for each div.
- particles `move` has a new property `angle` (degrees value) to configure the width of spread when it's not set to `straight: true` and `random: false`. Defaults to `90` which is the previous behaviour.
- Two new `collisions` modes: `absorb` and `destroy`, the first merges two particles, the second one destroys the smaller one, if equal they will be destroyed both.
- `detectRetina` is now `true` by default
- `noise` is now a simpler object: only `delay` object and `enable` property are kept. Other properties have been removed for external noise management. You can now specify your own noise using the method `setNoise` on particles container.
- All `tsParticles` packages (`react-tsparticles`, `particles.vue`, `ng-particles`, `jquery-particles`, `preact-particles`) are now part of this repository thanks to `Lerna`

---

## Some Pens of the new features

### Euro flags with Divs interaction

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

---

### External Noise Generator

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

---

### External Noise Generator with noise field drawn

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

---

## tsParticles plugins

`tsParticles` supports customizations 🥳.

**YOU CAN CREATE YOUR OWN SHAPES OR PRESETS**

[Read more here...](https://github.com/matteobruni/tsparticles/wiki/Create-a-tsParticles-Plugin)

---

### Related projects

#### jQuery

If you want to use tsParticles with jQuery checkout [this repository](https://github.com/matteobruni/jquery-particles)

#### VueJS

If you want to use tsParticles with VueJS checkout [this repository](https://github.com/matteobruni/particles.vue)

#### ReactJS

If you want to use tsParticles with ReactJS checkout [this repository](https://github.com/matteobruni/react-tsparticles)

##### 3rd Party

A 3rd-party component is available too, read more [here](https://github.com/Wufe/react-particles-js)

#### Preact

If you want to use tsParticles with Preact checkout [this repository](https://github.com/matteobruni/preact-particles)

#### Angular CLI

If you want to use tsParticles with Angular CLI (actually v9) checkout [this repository](https://github.com/matteobruni/ng-particles)

---

## Useful links

Checkout the demos 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 %}

---

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

---

### Noise trails

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

---

### Infection

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

---

### Growing particles

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

---

### Simplified `addParticle` method

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

---

### Links with triangles filled

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

---

### Color animations

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

---

### Warp out mode

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

---

### Click play/pause mode

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

---

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