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) { constdata = particle.shapeData, realWidth = (radius - data.innerRadius) / data.lineSpacing;
If you prefer using classes you can, {@link IShapeDrawer} interface can be implemented in your code or at least a class with four method {@link IShapeDrawer.draw |draw(context, particle, radius, opacity, delta)}, {@link IShapeDrawer.init | init(container)}, {@link IShapeDrawer.afterEffect | afterEffect(context, particle, radius, opacity, delta)}, {@link IShapeDrawer.destroy | destroy(container)} in it. You can find a sample below.
// 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 "options": { // 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, {@link IShapeDrawer} interface can be implemented in your code or at least a class with four method {@link IShapeDrawer.draw |draw(context, particle, radius, opacity, delta)}, {@link IShapeDrawer.init | init(container)}, {@link IShapeDrawer.afterEffect | afterEffect(context, particle, radius, opacity, delta)}, {@link IShapeDrawer.destroy | 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.