tsParticles v1.15.0 released
Tags: javascript, typescript, showdev, news
Published: 2020-05-31 10:43:00

# tsParticles v1.15.0
## Release notes
### New features
- Interactivity `grab` mode now has a line `color` option
- Particles and link lines have a `warp` option, Particles will maintain the same coordinates in `out` mode and lines will link beyond canvas borders
- Particles `color` now has an `animation` section like the one on `angle`, `opacity` and `size`. It will animate the particles color.
- Added click mode `pause` to play/pause animations when the click event occurs.
- Added `triangles` options to `links` to fill the triangles between lines, `color` and `opacity` customizable
- Added `id` propery to `links` to create links between particles with the same id
- PolygonMask now has a new property `data` to work with, where you can specify a string with the SVG to use (well formatted, namespaces included) or an object with paths (array or single string, just the data, not the tag) and size

### Changes
- Renamed `lineLinked` in `links` in `particles`, `interactivity.modes.connect` and `interactivity.modes.grab`, it's still supported the old syntax
- Container `particles.addParticle` now it's an easier method, it has two parameters: `position` (`{ x: 0, y: 0 }` for example) and `overrideOptions` (the same object specified in `particles` options). This method will add a new particle in that position if not `undefined` and with that options if not `undefined`
- Fixed a bug with `links` color used in override options (emitters, custom particles, etc...)
- Improved bubble mode interoperability with other modes
- Star shape improved with new draw method and another additional option called `inset` to specify the inset length.

---

## Some Pens of the new features

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

---

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

---

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

---

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