New tsParticles version released, 1.12.1.
Release Notes
Breaking Changes
- removed heart shape, now it has its own repository and package https://github.com/matteobruni/tsparticles-shape-heart
Changes
- added opacity to custom shape method, this should be used only by shapes that needed a different opacity handling like images
Bugfix
- fixed option loading
- fixed opacity on images
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?
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)