tsParticles 1.13.1
Release Notes
New Features
- Added
size.density
toabsorber
, this value will affect the attraction of particles, it will be multiplied tosize.value
. Default value is5
. - Added
opacity
toabsorber
. This will be used with color when drawing the absorber.
Bug Fixes
-
absorbers
property won't work withobject
but only with array. This behavior is now fixed. -
images
shape type added for issues withreact-particles-js
- fixed an issue with overridable
particles
options in emitters and in shapes - removed a
console.log
that was forgotten 😅
Some Pens of the new features
Polygon Mask with multiple paths
This polygon has 4 paths
Emitters
This login background is made with particles emitters, cool isn't it?
Absorbers
Have you ever wanted a black hole? Here's yours!
Collisions
The collisions in the previous releases, and in Particles.js too, were horrible. Now they're fixed and they look good. Finally!
Twinkle effect
Particles twinkling
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.
// 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.
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.
{
// [... 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.
// 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.
{
"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
watch the code for creating custom presets
Custom Shapes
watch the code for creating custom shapes
Characters as particles
FontAwesome characters as particles:
Mouse hover connections
Polygon mask
Background Mask particles
COVID-19 SARS-CoV-2 particles
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
Top comments (0)