The particles should have a collision system, controlled by an option.

The collision can have various modes:

• Merge: The particles colliding should create a larger one
• Bounce: The particles colliding will bounce away
• Destroy: The particles colliding will destroy

Merge Mode: The larger one should be the one remaining and the one that become larger

Destroy Mode: The smaller particles could destroy against a larger one which remain intact or could become smaller. Two same size particles should destroy themself

@mresmaeili I've seen your issue

Can you check if this version has the same problem? I don't understand where's the problem, the link you attached there is fine for me.

I think that some orbit options to make them appear around particles should be cool to see, maybe more than 1 orbit, with different radius and angle (0 to Math.PI to detect the distortion, at Math.PI / 2 it should be a straight line cutting the particle in half and the satellite, if present, should go only up and down, at 0 and Math.PI the orbit is circular)

Now when the project builds creates a docs folder with typedoc.
All classes, interfaces and methods should be commented to populate the docs so contributing should be easier.

I started working on a shadow implementation, but when I tested it the performance was really poor because of the shadow, not only the shadowBlur.
If someone has an idea to improve that it's really welcome.
I'll do more research about, but the issue is open to be shared.

Referencing this issue from the old project.
It's interesting but I need to understand it first.

@SoulDesignerTom if you can explain with more details I try to work on it

The parallax was in development when I forked the source repo, in fact it has some issues keeping the particles aligned.

Add effect of slowing down in a configurable radius around the mouse pointer

Thanks to @calebfergie I've just seen the random stroke option, it's an interesting option. Every stroke should implement it and the random will be a boolean and not a "random" string value.

Referencing issue VincentGarreau/particles.js#414 from old project

Need to refactor some var names and function to make happy codacy

@thomas-demagny are we ok here?

Thanks to @meirroth on SO I found this

/* ---------- pJS functions - modes events ------------ */

pJS.fn.modes.pushParticles = function(nb, pos){

  pJS.tmp.pushing = true;

  var limitNumOfParticles = Math.floor(pJS.canvas.el.width / 20);

  if(pJS.particles.array.length < limitNumOfParticles){

    // console.log("limit: ", limitNumOfParticles);
    // console.log("array: ", pJS.particles.array.length);

    for(var i = 0; i < nb; i++){
      pJS.particles.array.push(
        new pJS.fn.particle(
          pJS.particles.color,
          pJS.particles.opacity.value,
          {
            'x': pos ? pos.pos_x : Math.random() * pJS.canvas.w,
            'y': pos ? pos.pos_y : Math.random() * pJS.canvas.h
          }
        )
      )
      if(i == nb-1){
        if(!pJS.particles.move.enable){
          pJS.fn.particlesDraw();
        }
        pJS.tmp.pushing = false;
      }
    }
  }
};

This feature seems interesting in limiting the particles based on the canvas size but It will be managed by an option.

The library uses babel + webpack to build its output files but they'll be condensed in a single big file.
The output file is currently including pathseg library too and I think this is not a best practice.

If I want to add a webGL library in the future this will be a big issue so this need to be improved.

Referencing issue VincentGarreau/particles.js#405

I am aware of the way of destroying particles as described in #63
After destroying, it is not possible anymore to initialize and start particles because of the error TypeError: Cannot read property 'push' of null

Codesandbox example: https://codesandbox.io/s/quirky-black-yc3fg

How to reproduce:

1. click on start button to start the particles (everything is okay)

2. click on destroy button to destroy the particles (everything is okay)

3. click on start button to start the particles again (not working)

@dekadentno can you try your issue with this library? Does the bug still exist?

Issue VincentGarreau/particles.js#433 from the original project

Good morning! Previously I would like to thank everyone!

My site: http://www.wizardingescaperooms.com/

I am going crazy looking for a solution. If I add the particles to the section, in the long run, they become distorted.

I have added the following code, and they look perfectly, but they do not cover the total of the page, I have touched several values, but it always lengthens and blurs the particles.

PARTICLE CODE

particlesJS('fondo_particulas1', { "particles": { "number": { "value": 600, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#ffffff" }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000" }, "polygon": { "nb_sides": 8 }, "image": { "src": "img/github.svg", "width": 100, "height": 100 } }, "opacity": { "value": 1, "random": false, "anim": { "enable": true, "speed": 2.7610625218245732, "opacity_min": 0, "sync": false } }, "size": { "value": 1, "random": true, "anim": { "enable": true, "speed": 0, "size_min": 97.44926547616141, "sync": true } }, "line_linked": { "enable": false, "distance": 0, "color": "#ffffff", "opacity": 0.4, "width": 1 }, "move": { "enable": true, "speed": 0, "direction": "none", "random": true, "straight": false, "out_mode": "bounce", "bounce": false, "attract": { "enable": false, "rotateX": 100, "rotateY": 100 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": false, "mode": "bubble" }, "onclick": { "enable": false, "mode": "repulse" }, "resize": true }, "modes": { "grab": { "distance": 97.44926547616143, "line_linked": { "opacity": 0.7239044775137166 } }, "bubble": { "distance": 250, "size": 0, "duration": 2, "opacity": 0, "speed": 3 }, "repulse": { "distance": 400, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true } );

ADDITIONAL CSS CODE

/*Fondo estrellado alto total sin pixelar*/.particles-js-canvas-el { height: 100vmax !important; z-index: 0; }
Do you know any solution?
Thank you!

This issue was reported in the original project by @EdgarGR

This is the config beautified

{
  "particles": {
    "number": {
      "value": 600,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 8
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 1,
      "random": false,
      "anim": {
        "enable": true,
        "speed": 2.7610625218245732,
        "opacity_min": 0,
        "sync": false
      }
    },
    "size": {
      "value": 1,
      "random": true,
      "anim": {
        "enable": true,
        "speed": 0,
        "size_min": 97.44926547616141,
        "sync": true
      }
    },
    "line_linked": {
      "enable": false,
      "distance": 0,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 0,
      "direction": "none",
      "random": true,
      "straight": false,
      "out_mode": "bounce",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 100,
        "rotateY": 100
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false,
        "mode": "bubble"
      },
      "onclick": {
        "enable": false,
        "mode": "repulse"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 97.44926547616143,
        "line_linked": {
          "opacity": 0.7239044775137166
        }
      },
      "bubble": {
        "distance": 250,
        "size": 0,
        "duration": 2,
        "opacity": 0,
        "speed": 3
      },
      "repulse": {
        "distance": 400,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}

The original project is abandoned and you won't find any help, try with this project and if it's affected by the same bug we can find a solution

Configs are always painful, a lot of options and often we don't know what they'll change.
A set of presets should implemented and adding them to the config should be clearer and our config can be slimmer and concentrate more on particles number or just a bunch of settings we can change.

{
    particles: { number: { value: 100 } },
    preset: 'snow'
}

or

{
    particles: { number: { value: 100 } },
    preset: ['basic', 'bouncing']
}

and we're set.

This will be a great feature for who wants to use the library

The demo in the dev branch is now fixed with an existing svg image but it doesn't show the svg.

Setting up a polygon shape always use 5 sides instead of the number specified in config

With mobile devices if you move with your finger around at the release particles will be pushed if push is enabled on click.
This behavior must be fixed, if you’re moving you don’t want pushes

Having a problem with loading a different SVG than the standard one.
Tried with a singleline one:
https://bladenatestsite.weebly.com/files/theme/images/PolyWindTurbine2.svg
and a one which replicated the standard one as close as possible
https://bladenatestsite.weebly.com/files/theme/images/test.svg

Hi Vincent, just one simple question, I need to set up demo version with particle.json. The demo version works like a charm on my localhost, so I modified the js/app.js and uncommented the

particlesJS.load('particles-js', 'particles.json', function() {
console.log('particles.js loaded - callback');
});
and commented the "/* Otherwise just put the config content (json):

particlesJS('particles-js',

{..."
the demo index doesn't give me any particles. I guess this is just a matter of urls for particles-js and particles.json but can't find the right path.

The files are out of the box.
Thanks.

Original project issue VincentGarreau/particles.js#425 thanks to @fabvincent

The original project is abandoned, if need help to configure a particles instance you can ask me, your config still works with this project

Referencing VincentGarreau/particles.js#415 from the original project.

I in need of Is there a way to create multiple particle configurations and let the library choose randomly based on a proportion between them?

I need to animate two separate groups of particles, each with different velocities and appearances. I may be able to implement that, but I have no idea how the config file should look like 😅

@ioxua You need more one Particles instance randomly chosen from an array, or a similar object, to render in a single object, right?

I was able to draw multiple images.
But I don't know how to rotate each one.
Please help me.

https://codepen.io/freakale/pen/YzXxZEK

Original Project issue VincentGarreau/particles.js#427 by @freakale

The original project is abandoned, this feature seems really interesting, I'll have a look on it

Hello I have tried and tried to work out if this is possible using particle.js

I want an image as a background and a white layer over this that when you hover over the particle layer the bubbles show image underneath a bit like this.

https://revolution.themepunch.com/particle-effect-for-wordpress/

any help would help me keep little hair I have left lol

Kind regards

Mike

Original project issue VincentGarreau/particles.js#428 thanks to @Mickperks

The original project is abandoned, I'll have a look on it, it seems really cool

A new vibrate options for let the particles vibrate

Issue from the original project VincentGarreau/particles.js#413

Trying to figure out how to add different shapes than the few that's already in the drop down. Looking for like hearts, and other basic shapes. Changing images also isn't working. I can only pick pre-installed shapes.

by @tommytekkno

This feature seems interesting, do you have some shape recommendations? This library has more shapes than the original project. If you are missing something feel free to ask it

The stroke option is misplaced, the particle (fill) color is in particles section while the stroke is in particles.shape but it makes no sense.

This should be moved to particles but keeping compatibility (for the moment).

The particles speed sometimes can be faster than the original project. The issue is related to the introduction of fps_limit and delta.
The delta is the difference between the last timestamp of animation and the current timestamp so it depends on fps_limit and its framerate blocks. The idea it's fine but comparing the original project they're faster and can be messy with the old configs.

I've seen the polygon mask on this repository (it's a fork) and I loved it.
I wanted to implement it in this repo too.

Polygon Mask in mobile devices, probably all retina enabled devices, has some issues.
The existing sample https://particles.matteobruni.it/#mask will display correctly on desktop browser, on my mobile device it's showing the particles and the mask in top-left corner.

The default values are ugly as hell. Some nicer are needed to init library with a good default effect.
Less options enabled is the best solution, so they don't create conflicts.

To change the default values only the classes under Options folder needs changes.

Touches on mobile has some precision issues, the finger is not always well followed

Referencing issue VincentGarreau/particles.js#393 from source project

Hey guys,

Changing opacity of the default particles onhover definitely works.
But when I try to change the opacity of the imported svg image, the opacity doesn't seem to change.

Here's my option

particles: {
      number: {
        value: 5,
        density: {
          enable: true,
          value_area: 200,
        },
      },
      line_linked: {
        enable: false,
      },
      color: {
        value: '#2f3236',
      },
      move: {
        enable: true,
        random: true,
        speed: 2,
        bounce: false,
        direction: 'top',
        out_mode: 'out',
        attract: {
          enable: true,
          rotateX: 100,
        },
      },
      size: {
        value: 10,
        random: false,
        anim: {
          enable: true,
          speed: 1,
          size_min: 8,
        },
      },
      opacity: {
        value: 0,
        random: false,
        anim: {
          enable: false,
        },
      },
      shape: {
        type: ['images'],
        polygon: {
          nb_sides: 4,
        },
        images: [
          { src: importedSVG, height: 24, width: 24 },
        ],
      },
    },
    interactivity: {
      detect_on: 'canvas',
      events: {
        onhover: {
          enable: true,
          mode: 'bubble',
        },
        onclick: {
          enable: true,
          mode: 'push',
        },
      },
      modes: {
        push: {
          particles_nb: 4,
        },
        bubble: {
          distance: 300,
          size: 10,
          duration: 2,
          opacity: 1,
          speed: 3,
        },
      },
    },
    retina_detect: true,

@chris542 Can you try it here? Is it still buggy?

Issue probably solved reported in PR VincentGarreau/particles.js#429

Thanks to @namanmodani

Can you check if it's ok here? The other project is abandoned.

Hi, thank you for this, I've just tried switching to this from the original version and I can say so far so good.

However I can't seem to find a way to change the config options on the fly. In the original I can do like this:

const pJS = global.pJSDom[0].pJS;

pJS.particles.color.value = currentTheme.color;
pJS.particles.line_linked.color = currentTheme.color;
pJS.particles.shape.stroke.color = currentTheme.bgColor;
pJS.fn.particlesRefresh();

How can I achieve the same thing with this?

In Snow demo you can reproduce the bug, if you click in the canvas the animations stops and restarts after the event. In the original repository this is not happening.

New feature about places that emits new particles

tsParticles should have a background section in config to set canvas background settings.

This will be an awesome feature to have with presets (custom and standard).

The Problem
How does (a novice react developer) use this library with a TypeScript react app? (Created with create-react-app's typescript version)

Solution
Steps to reproduce the behavior:

1. Install yarn add tsparticles
2. Add import tsParticles from 'tsparticles'; to the top of the file that you want to have tsParticles (tsParticles should not have type any)
3. Call tsParticles from react component body to attach it to a jsx-rendered div component

Some documentation for use web apps would be greatly appreciated!

Additional context
My development environment is NextJS/React/TypeScript, would greatly appreciate using this to add an extra "glow" to the UI. NextJS isn't a single-page web app, so globally importing the JS as mentioned in the UI is expensive for an effect in use on only a few pages.

Another dependency I used had a similar TypeScript-lacking-types issue. That plugin, however, also featured documentation for using with React.

Additional context
Add any other context or screenshots about the feature request here.

A Redditor suggested me to use a spatial hash map or a k-d tree to improve general performance. One of these methods should replace at least the main loop, and probably some others if I'm right.

The comment is this:
https://www.reddit.com/r/javascript/comments/fmdn6e/tsparticles_what_particlesjs_could_be_if_it_wasnt/flfrqk2?utm_source=share&utm_medium=web2x

There's some articles and code to check.

tsParticles should have an entry point for plugin shapes, something fully customizable.

A developer could want a new shape that is not included here, he should be able to create it's own shape and make it work in no time.

The color properties in the options are not aligned, they should instead use the same properties and values possibilities.

Thanks to @calebfergie it's interesting to have a more customizable opacity. This could be integrated in the color options instead of being separated.

The random color/opacity options should be a boolean option and not a "random" string. LineLinked have a valid "mid" value that creates a gradient from p1 to p2 based on radius difference, this should be a boolean instead of a string "mid"

The polygon shape option atm is a single object, it should become an array allowing multiples polygons

A cool feature could be a color infection, a particles that mutates color infecting all the others to its color.
The colors could be configured, the new color appearance could be delayed by a config value, could be random or could appear when all the others has the same color.

Images could be handled too, but it can be hard.

The idea came after seeing this: https://petarkaran.it/2020/03/16/simulazione-sullespansione-del-contagio-da-coronavirus-covid-19/ thanks to @petarkaran

The new preset feature should be more customizable giving the opportunity to everyone to create custom presets ready to use that can be easily shared.

A migration to WebGL instead of the canvas 2d context will be a great performance improvement.
This migration will require a lot of rework, so it will be implemented in a not so near future, hope as soon as possible as always.
If someone wants to contribute is really welcome

PolygonMask for now supports only ONE svg path.
A good improvement is to support all svg paths the mask file contains.

Referencing issue VincentGarreau/particles.js#391

@N-Asadnajafi

As I surfed the internet and couldn't find a clear solution, I decided to share the solution that I finally discovered :D
Here is my solution:

1. import particles.js to your html file

2. open particles.js and search for the word 'canvas' , you'll find this line of code :
   "var canvas_el = document.createElement('canvas');"

3. look at the next lines, you can simply modify the width and height.
   As an example:
   canvas_el.style.width = "1920" + "px";
   canvas_el.style.height = "1080" + "px";

I'd be appreciate any other solutions

@reginpv

Hi @N-Asadnajafi ,

My solution is to use the callback function like so:

particlesJS.load('particles-js', '/vendors/particles.js-master/particles.json', function() {
      console.log('callback - particles.js config loaded');
      let el = document.querySelector(".particles-js-canvas-el"); 
      el.setAttribute("height", "300px");
});

Let me know how it worked for you.

I'll add a customizable container size option as soon as possible, can you check if your workarounds works here too?

Checking out some source project samples I've found this:

https://codepen.io/alligatorio/pen/oreqwP

but changing particlesJS to tsParticles I've seen an unexpected behavior, the on hover effect is not the same.

You can check out here:

https://codepen.io/matteobruni/pen/mdJBdov

Something in the project reorganize has broken the mouse events. The only version affected is the 1.5.0.