tsParticles 3.0.2 Changelog

Bug Fixes

• Fixed trails config
• Fixed flat output in @tsparticles/confetti
• Improved sounds plugin
• Fixed position in emitters after respawn

New Features

• Added new EventType particleDestroyed
• Replaced text shape with emoji shape in @tsparticles/confetti
• Reworked @tsparticles/fireworks a bit for better output with the new v3 trails

tsParticles 3.0.1 Changelog

Bug Fixes

• Fixed bug when using particles groups

tsParticles 3.0.0 Changelog

BREAKING CHANGES

• Removed all tsParticles load methods to keep only a single one using a single object parameter
• Removed support for shape deprecated properties like shape.image, shape.polygon, shape.stroke
  • the stroke property can be found in the particles section, not in the shape object
  • the image and polygon properties, like any other shape, are part of the shape.options object
• Stroke now is a single object only like all the other particles properties
• Removed multiline text shape, the text shape now supports that
• Simplified some functions, using objects or removing unused overloads, this is breaking for v2 shapes
• Moved some properties to private since they were public by mistake (this shouldn't affect many, the properties were mainly used in the engine)
• Removed obsolete random properties in options objects
• Removed emitters shapes from the plugin files, every emitters shape now has a dedicated package

Major Changes

• All the components for Front End frameworks were removed from this repository, each one now has its own repository. This is mainly for maintainability. It's easier to support multiple Front End frameworks versions in a dedicated repository instead of a multipurpose monorepository. Vue.js 2.x and 3.x were kept split because they have many differences.
  • Angular (@tsparticles/angular): https://github.com/tsparticles/angular
  • Astro (@tsparticles/astro): https://github.com/tsparticles/astro
  • Ember (@tsparticles/ember): https://github.com/tsparticles/ember
  • Inferno (@tsparticles/inferno): https://github.com/tsparticles/inferno
  • jQuery (@tsparticles/jquery): https://github.com/tsparticles/jquery
  • Lit (@tsparticles/lit): https://github.com/tsparticles/lit (WIP)
  • Preact (@tsparticles/preact): https://github.com/tsparticles/preact
  • React (@tsparticles/react): https://github.com/tsparticles/react
  • Riot (@tsparticles/riot): https://github.com/tsparticles/riot
  • Solid (@tsparticles/solid): https://github.com/tsparticles/solid
  • Svelte (@tsparticles/svelte): https://github.com/tsparticles/
  • Vue.js 2.x (@tsparticles/vue2): https://github.com/tsparticles/vue2
  • Vue.js 3.x (@tsparticles/vue3): https://github.com/tsparticles/vue3
  • Web Components (@tsparticles/webcomponents): https://github.com/tsparticles/webcomponents
  • WordPress (@tsparticles/wordpress): https://github.com/tsparticles/wordpress
• Removed all presets from this repository for a single one (https://github.com/tsparticles/presets) in the @tsparticles organization, this will make easier to contribute to specific presets or create new ones. (Renaming them to @tsparticles/preset-<name> #3977)
• All the previous packages will be deprecated when v3 will come out. Using only the new naming system is the main focus of v3. All the official packages will have @tsparticles/ organization in the package name, replacing tsparticles- prefix, except for tsparticles package which will remain the same.
• Moved editor to its own repository: https://github.com/tsparticles/editor
• Pjs package now supports all the legacy pjs options only. This will make this package a wrapper for old pjs users. You can't use tsParticles options in pjs calls.
• Pjs package is no longer part of @tsparticles/slim bundle, only included in @tsparticles/all.
• Text shape is no longer part of @tsparticles/slim bundle, included in tsparticles.
• Emoji shape is now part of @tsparticles/slim bundle.

New Features

• Added event on config added to the engine
• Added flat options to tsparticles-confetti options
• Creating support for effects, like bubble that wasn't a real shape
• Added linear easing
• Created new emitters shapes: Canvas, Path and Polygon
• Created trail effect plugin, this one is a real trail drawn in the canvas, it works also in transparent backgrounds. It requires more resources since it's drawn calculating last N positions and not redrawing a semi-transparent canvas on itself, supports also fade.
• Added pop click interaction
• Added limit mode (breaking changes on limit options)
• Added possibility to replace color and opacity for emitters shapes
• Added more options for customizing noises values (only Simplex and Perlin paths)
• Added curl noise path plugin
• Created Simplex and Perlin noise packages from their path plugins, they can be used in multiple packages without duplication (Curl Noise path for example)
• Added new emoji shape, better performance than text shape
• Added clear flag to the root object, enabled by default, if disabled, the canvas won't be cleared

Bug Fixes

• Improved resize event and density formula

tsParticles 2.8.0

New Features

• Reworked move.trail options, created an object with color and image, closes #4882

Bug Fixes

• Fixed polygon mask position issues
• Fixed polygon mask scaling issues

tsParticles 2.5.1 Changelog

Bug Fixes

• Fixed issue with ES modules, closes #4799

tsParticles 2.4.0 Changelog

New Features

• Added reset method to updaters, this method will be called after a particle loses a life.
• Created the motion plugin for handling motion sickness, I moved this feature from the engine to a plugin since I prefer to have it more customizable. Everyone now can create their own motion sickness plugin, instead of having a standard behavior for everyone
• Added mutation observer to avoid style changes to the canvas when the fullScreen option is enabled (default behavior)
• Moved all easing functions to plugin packages, slim now depends on easing-quad since it's the default value used in repulse and attract
• Added support for multiline text in canvas mask text options, separator and spacing are customizable values
• Added aria-hidden="true" to canvas element, fixes #4785
• Removed all canvas context save/restore calls, this should be a huge improvement to general performances
• Added the particles pool for reusing destroyed particles, every tsParticles instance will have its own pool
• Changed collision absorb code, added absorb.speed option to collisions section
• Added delay to root options, fixes #4766

Bug Fixes

• Fixed infection plugin
• Fixed issue with polygon mask when particles bounce on the polygon edges
• Fixed issue with rgb(), hsl() and hsv() values in color option values

Other Changes

• Refactored plugins to avoid passing options in init functions since it's no more necessary
• Removed initAsync function from plugins, standard init is now async for all plugins
• Removed polygon mask plugin from the tsparticles package, this is a breaking change only for those that are using it. Since it's a heavy plugin and not so much used, I have preferred removing it from the tsparticles package.
• Changed tsconfig target from es6 to es2019 (less transpilation to a reasonable target). The compatibility is still very high, reducing the bundle size.

tsParticles 2.3.1 Changelog

New Features

• Added bounds to particles.destroy options, if the particle is outside one of the bounds the particle will be destroyed
• Added smooth to the options, it uses the fpsLimit field as a reference value trying to create a smoother animation on the provided fps value.
• Added canvasMask plugin, it uses a canvas, an image or a text for positioning particles in the canvas, closes #4492

Other Changes

• Moved out all the external interactors from the engine
• Removed support for very old browsers that don't support requestAnimationFrame

Bug Fixes

• Fixed editor, using the v2 of Object GUI
• Fixed issue with stroke options loading

A note on the new smooth option

With the new smooth option enabled the animation will be affected by the fps on the user's PC, so be careful. Higher fps, higher speed, lower fps, lower speed ⚠️.
Some examples:
- with a fpsLimit of 60 the animation will be twice faster on 120 fps devices
- with a fpsLimit of 120 the animation will be twice slower on 60 fps devices
The animation will be always smooth, but the behavior could be affected by the user screen refresh rate.
It's recommended to keep this disabled, be careful enabling this.

tsParticles v2.2.2 Changelog

Bug Fixes

• Fixed double mouse events on mobile using pointer events, closes #4622

Social links

• Discord
• Slack
• Telegram
• Reddit

tsParticles 2.2.1 Changelog

Bug Fixes

• Fixed editor for v2.2

Other Changes

• Exposed options objects for interactions

tsParticles 2.2.0 Changelog

New Features

• Container now can have more than one path generator, each particle will keep its own
• Added new getRandom and setRandom functions for customizing all the random behaviors, it's recommended to use the getRandom function instead of Math.random when writing plugins, so the randomness can be customized as expected
• Image Shape now supports multiple colors in SVG replace color, random value too, fixes #4532
• Improved Fireworks preset, now more realistic
• Improved snow preset, added a small wobble effect

Bug Fixes

• Moved out more properties from the engine, making the engine lighter and plugins more autonomous.
• Improving some functions, could improve performance a bit
• Fixed some 404 links in readme files, thanks to @munyoudoum
• Fixed responsive screen size calculation

Other Changes

• EventDispatcher is now private on the engine, it won't be possible to access it without using the given methods
• Changed some exports, exported types instead of the entire classes, since it wasn't intended to use them outside the library
• Created a builder CLI for building many packages, this makes it easier to maintain the build process
• Removed active from slow interactivity mode object, it was obsolete, small breaking change but the engine will be a bit smaller

tsParticles 2.1.4 Changelog

Bug Fixes

• Fixed issue with destroyed containers, fixes #4385, fixes #4413, fixes #4534
• Fixed issue with opacity and svg color replaced images, fixes #4532

tsParticles 2.1.3

Bug Fixes

• Fixed svelte typings, closes #4131
• Moved some specific code to the relative project, removing it from the generic engine
• Improving container destruction
• Improved fireworks preset
• Fixed connect links options
• Fixed issue with non-generated canvas elements, closes #4228
• Fixed class attributes on solid component
• Fixed issue with destroyed containers kept alive by plugins, closes #4151

New Features

• Added decay to all animations
• Added interactivity options overrides in particles options, closes #4120
• Added a new speed object for the wobble effect
• Added range colors to all color fields
• Added new multiple particles feature and improved particle destroy method

Other changes

• Changed build from rollup-plugin-vue to vite, no breaking changes, only for vue3 projects
• Moved some updaters related code from engine to the relative updater
• Removed dynamic import of the pathseg polyfill, used the standard one in the polygon mask plugin

tsParticles 2.0.6 Changelog

Breaking Changes

Starting from version 2.0.0, tsparticles won't be a single package anymore. Its growth makes me think a lot about splitting the project in more packages.

The new structure will be a common engine and lot of packages with single features that can be installed and loaded, so everyone can install only the features they need, and for the lazy ones there are bundles and presets ready to be used.

For example, if you want to stick with the tsparticles library you can still install it, and use the bundle file with the CDN. You can easily set it up when using import or require, since you have to add few lines of code to the v1 configuration.

import { tsParticles } from "tsparticles-engine"; // this is the new common package
import { loadFull } from "tsparticles"; // this function loads all the features contained in v1 package

(async () => {
    await loadFull(tsParticles); // this is needed to load all the features and can be done everywhere before using tsParticles.load

    await tsParticles.load("tsparticles", { /* options */ }); // this must be done after loadFull
})();

PRO

• Smaller output, you can import only the features you need without a lot of unused code.
• Better performance, since a lot of features are not imported, they are not running reducing general performance. More features, more calculations needed.

CONS

• All features needs to be installed, which result in a long package.json file, that's why presets will be more important now.
• Previous code won't work anymore without importing the right packages, this is a needed breaking change.

New Features

• Added outside and inside values to particles move direction options
• Added outside and inside values to particles move out modes options

How to migrate from v1 to v2?

Version 1.x is still the latest tag on npm, but the next version has a 2.0.0 version, which is something I need to release to the public to find issues, and receive some feedbacks.

Migration Steps

Vanilla JS / HTML usage

Just change the tsparticles file from tsparticles.min.js to tsparticles.bundle.min.js, if the slim version is used, there's a bundle also there but it's a different package, now called tsparticles-slim.

Modules

1. Install the package "tsparticles-engine" using the next tag like this: npm install tsparticles-engine@next
2. Replace all your "tsparticles" imports to "tsparticles-engine"
3. Add import { loadFull } from "tsparticles"; in the imports, or its RequireJS version. This requires the new 2.0.x version, you can install it using npm install tsparticles@next
4. Call loadFull

• If using a React/Vue/Angular/Svelte or other kind of component: in particlesInit/init property, passing the same parameter coming from the init function to loadFull
• If not just call loadFull(tsParticles) before any tsParticles usage

Alternative

Using the bundled version of the tsparticles package is not optimal, it's easier to implement but it could load a lot of unnecessary stuff.

I want to take the following code as an example (it's the core of tsparticles-slim package)

import type { Engine } from "tsparticles-engine";
import { loadAngleUpdater } from "tsparticles-updater-angle";
import { loadBaseMover } from "tsparticles-move-base";
import { loadCircleShape } from "tsparticles-shape-circle";
import { loadColorUpdater } from "tsparticles-updater-color";
import { loadExternalAttractInteraction } from "tsparticles-interaction-external-attract";
import { loadExternalBounceInteraction } from "tsparticles-interaction-external-bounce";
import { loadExternalBubbleInteraction } from "tsparticles-interaction-external-bubble";
import { loadExternalConnectInteraction } from "tsparticles-interaction-external-connect";
import { loadExternalGrabInteraction } from "tsparticles-interaction-external-grab";
import { loadExternalPauseInteraction } from "tsparticles-interaction-external-pause";
import { loadExternalPushInteraction } from "tsparticles-interaction-external-push";
import { loadExternalRemoveInteraction } from "tsparticles-interaction-external-remove";
import { loadExternalRepulseInteraction } from "tsparticles-interaction-external-repulse";
import { loadImageShape } from "tsparticles-shape-image";
import { loadLifeUpdater } from "tsparticles-updater-life";
import { loadLineShape } from "tsparticles-shape-line";
import { loadOpacityUpdater } from "tsparticles-updater-opacity";
import { loadOutModesUpdater } from "tsparticles-updater-out-modes";
import { loadParallaxMover } from "tsparticles-move-parallax";
import { loadParticlesAttractInteraction } from "tsparticles-interaction-particles-attract";
import { loadParticlesCollisionsInteraction } from "tsparticles-interaction-particles-collisions";
import { loadParticlesLinksInteraction } from "tsparticles-interaction-particles-links";
import { loadPolygonShape } from "tsparticles-shape-polygon";
import { loadSizeUpdater } from "tsparticles-updater-size";
import { loadSquareShape } from "tsparticles-shape-square";
import { loadStarShape } from "tsparticles-shape-star";
import { loadStrokeColorUpdater } from "tsparticles-updater-stroke-color";
import { loadTextShape } from "tsparticles-shape-text";

export async function loadSlim(engine: Engine): Promise<void> {
    await loadBaseMover(engine);
    await loadParallaxMover(engine);

    await loadExternalAttractInteraction(engine);
    await loadExternalBounceInteraction(engine);
    await loadExternalBubbleInteraction(engine);
    await loadExternalConnectInteraction(engine);
    await loadExternalGrabInteraction(engine);
    await loadExternalPauseInteraction(engine);
    await loadExternalPushInteraction(engine);
    await loadExternalRemoveInteraction(engine);
    await loadExternalRepulseInteraction(engine);

    await loadParticlesAttractInteraction(engine);
    await loadParticlesCollisionsInteraction(engine);
    await loadParticlesLinksInteraction(engine);

    await loadCircleShape(engine);
    await loadImageShape(engine);
    await loadLineShape(engine);
    await loadPolygonShape(engine);
    await loadSquareShape(engine);
    await loadStarShape(engine);
    await loadTextShape(engine);

    await loadLifeUpdater(engine);
    await loadOpacityUpdater(engine);
    await loadSizeUpdater(engine);
    await loadAngleUpdater(engine);
    await loadColorUpdater(engine);
    await loadStrokeColorUpdater(engine);
    await loadOutModesUpdater(engine);
}

Vanilla JS / HTML Usage

Splitting things can be a long activity using <script> tags, but nothing impossible.

From the example above, every package needs its own <script> tag, and every load function needs to be called using tsParticles as a parameter, then use the tsParticles object as always.

The tsparticles-engine must be always present, if there are no bundles (tsparticles-slim, tsparticles or any bundled preset). Every other package is required only if you want to use that feature.

Let's see an example:

https://codepen.io/matteobruni/pen/zYPEbjx

As you can see, in the JS options there are the needed scripts, and before using tsParticles.load their functions are called to load everything correctly. Every load function is async, so it's a Promise that can be awaited, it's not always necessary (like in this case), but it's recommended.

Modules

In this case importing modules is easier, since every module can be installed easily using npm, yarn or pnpm.

Once installed the required packages, import them and the code used for "Vanilla JS / HTML Usage" works also here.

The module sample can be found here:

https://codesandbox.io/s/immutable-cookies-n2lm9p

Components (React, Vue, Angular, Svelte, ...)

Every component has a init or particlesInit (checkout the documentation until everything has the same attribute), that is the place to load all the components, that function has an engine attribute, which is the tsParticles instance used by the component.

React Sample

https://codesandbox.io/s/optimistic-http-mxz8bg

Vue.js 2.x Sample

https://codesandbox.io/s/eager-wildflower-co03th>

Vue.js 3.x Sample

https://codesandbox.io/s/angry-hellman-xv6ifv

Angular Sample

https://codesandbox.io/s/crazy-villani-nc0nfj>

tsParticles 1.43.0 Changelog

Architecture changes

• Removed all inner index files from the engine, the exported types are unchanged
• Added CLI project

Bug Fixes

• Improved big circles preset, the effect is now better
• Improved particles check when drawing
• Some refactoring for smaller output size

Compatibility changes

• Updated build configurations for plugins, shapes, presets, and other pluggable projects, imports are now more compatible with CommonJS and ESM
• Updated all plugins to use the new build system, improves imports compatibility
• Updated external interaction managers, added click mode handling
• Added more external interaction managers, like v2

tsParticles 1.42.4 Changelog

Bug Fixes

• Moving canvas.clear closer to draw breaks grab links, and maybe other interactions

tsParticles 1.42.2

Bug Fixes

• Angular: do not load particles on the Node.js side and make its loading cancellable
• Fixed flashing issue with background mask, closes #3514

tsParticles 1.42.3

Bug Fixes

• Removed a forgotten console.log, closes #3551
• Fixed flashing issue with resize method, closes #3523 and #3074
• Fixed sea anemone preset, removed a useless option
• Canvas now is cleared just before new drawings

tsParticles 1.42.0 Changelog

Options Updates

New numeric values are now randomizable, using the { min, max } object instead of the numeric value. The list of the new randomizable options are:

• particles.move.attract.distance
• particles.move.angle.offset
• particles.move.angle.value
• particles.orbit.opacity
• particles.orbit.radius
• particles.orbit.width
• particles.repulse.distance
• particles.repulse.duration
• particles.repulse.factor
• particles.repulse.speed
• particles.roll.darken.value
• particles.roll.enlighten.value
• particles.rotate.animation.speed
• particles.tilt.animation.speed
• particles.twinkle.lines.opacity
• particles.twinkle.particles.opacity

These are the core options, also every animation object now can have randomizable count and speed properties.

Absorbers and Emitters plugin options now have randomizable coordinates, the { min, max } can be set to their position.x and position.y values instead of a single numeric.

tsParticles 1.42.1 Changelog

Bug Fixes

• Fixes issue with 0 values on x and y properties of emitters position options

tsParticles 1.41.6

Bug Fixes

• Fixed issue with canvas resize

tsParticles 1.41.5

Bug Fixes

• Fixed emitters issues, some presets were broken

tsParticles 1.41.4

Bug Fixes

• Removed useless console.log (debug purposes)

tsParticles 1.41.1 Changelog

Updates

• Async Interactors
• Updated some readme files

tsParticles 1.41.2 Changelog

Bug Fixes

• Fixed svelte component, it was having issues with TypeScript syntax inside
• Fixed tilt back and front colors

tsParticles 1.41.3 Changelog

Bug Fixes

• Fixed issue with size and opacity updaters

tsParticles 1.41.0 Changelog

Bugfixes

• Fixed type on particles.vue3 particlesLoaded property
• Fixed issue with path generators
• Fixed polygon path generator
• Fixed polygon path options

New Features

• Refactored path plugins to be more compatible with the new instance hierarchy
• Added more options to path plugins
• Updated ng-particles to Angular 13