New tsParticles version released, 1.12.0.
Release notes
New features
-
background
is now a global section, you can now customize the canvas background, reusing the config for this too - Customizable and redistributable presets, you can now create your own presets and distribute them as a javascript. Checkout the README for more information. (I proposed the tag
tsparticles-preset
onnpm
if someone wants to create one) - Customizable and redistributable shapes, you can now create your own shapes and distribute them as a javascript. Checkout the README for more information. (I proposed the tag
tsparticles-shape
onnpm
if someone wants to create one)
Bug fixes and changes
-
stroke
is now underparticles
section of the config, instead ofparticles.shape
- Fixed unexpected behavior on mobile touches
- Fixed unexpected behavior on polygon mask draw options
- Improved polygon mask draw output, if browser supports
Deletions
- Removed all presets, they are moved to their own repositories and packages. This is a breaking change for those using the presets. If you were one of these include the right script and you're done.
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
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
tsParticles.addCustomShape("spiral", function(context, particle, radius) {
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 prefere 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) {
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.addCustomShape("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.addCustomPreset("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?
I've forked the react-particles-js repository and added the tsParticles support.
You can checkout the fork here: https://github.com/matteobruni/react-particles-js
And the sample demo here: https://github.com/matteobruni/react-particles-js-demo
Hope this will be merged in the main repository.
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)