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.
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 just for shapes that needs a differenc opacity handling like images tsParticles.addShape("spiral", function (context, particle, radius, opacity) { constshapeData = particle.shapeData; constrealWidth = (radius - shapeData.innerRadius) / shapeData.lineSpacing;
// 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", newSpiralDrawer());
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] }
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.
Plugins/Customizations
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 onNPM
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.
If you prefer using classes you can, IShapeDrawer interface can be implemented in your code or at least a class with four method draw(context, particle, radius, opacity, delta), init(container), afterEffect(context, particle, radius, opacity, delta), destroy(container) in it. You can find a sample below.
Bubble Sample (with after effect)
bubble.js - The custom shape script
Config
config.json - The config section to add to your config or in your plugin readme to teach others on how to use it.
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 onNPM
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.
config.json - The config section to add to your config or in your plugin readme to teach others on how to use it.