tsParticles 2.7.0 Changelog

Bug Fixes

• Fixed issue with animation random size, multiplying again the pixel ratio
• Added missing exportEventType
• Fixed Engine package exports

New Features

• Added shape options to circle, added range (min/max object) values to polygon and star shape options
• Changed default file for slim and full bundles, using the bundled file
• Added support for multiple shape drawers declared at once instead of adding a shape drawer multiple times
• Added ranged values in stroke width and opacity properties
• Added loops count to color animations
• Improved density values, now is 1:1 with number on 1080p resolution with pixel ratio of 1 (this is not a breaking change since nothing breaks, but it changes the behavior of existing values)
• Density values now has width/height values instead of area/factor, for compatibility reasonwidthis mapped toareaandheighttofactor.
• Created sounds plugin, with mute/unmute icons
• Added explosion sounds to fireworks preset

Circle Options

Inparticle.shapenow it's possible to set another option to thecircleshape,angle.The new property accepts anumberor a{ min: number; max: number }object, when onlynumberit's going to be{ min: 0, max: <value> }.

This creates partial circles starting frommintomax,both values must be specified in degrees. If this value is ignored the default value is:{ min: 0, max: 360 }(the full circle).

Examples

...
shape: {
type: "circle",
options: {
circle: {
angle: 180
}
}
}
...

This examples creates horizontal half circles

...
shape: {
type: "circle",
options: {
circle: {
angle: { min: 90, max: 270 }
}
}
}
...

This examples creates vertical half circles

Density options

The density options are changed a bit, instead ofarea/factorvalues, thewidth/heightvalues are introduced and mapped respectively. The default values are changed towidth1920andheight1080,so on a FullHD resolution on device pixel ratio1the particles number is the one specified in the options. Sincewidthandheightare multiplied together, they can be swapped and nothing changes.

The formula for the density is:

canvasWidth*canvasHeight \over densityWidth*densityHeight*devicePixelRatio^2

Notes on existing configurations

Since many configs had adensity.areavalue of800,you'll see less particles, just a few less. If you have also afactorvalue, you won't notice any difference. When onlyareais set, if you want to keep the previous configuration, setfactorto1000.Since the defaultfactor(height) value is1080now, the difference should be barely noticeable.

--

Social links

• Discord
• Slack
• WhatsApp
• Telegram
• Reddit