Hello,

Firstly let me apologise - I don't have any experience using Canvas and am still getting to grips with it so sorry if this is a very obvious question.

I'm trying to use the particle animation within a div that is part of the sidebar to my website however it seems when doing so the mouse interaction is not as accurate. I've narrowed down the issue and found it's due to the fact that there is a div on top of the div containing particle-js - if I remove the top div the mouse interaction is accurate but it seems with it still in the canvas is offsetting the interaction animation by the height of the top div.

Site URL - http://www.nrly.co

I was hoping you might be able to give me some guidance on this issue?

Many, many thanks in advance!

Absolutely love, love, love this plugin. One feature request would be to add an option to control the opacity of the interactive lines. I've knocked back the opacity on everything else, so the interactive lines are way to bright whenever I move my mouse.

Great work and thank you.

I tested your demo on the latest Firefox and the mouse interactivity doesn't seem to work, but it works on Chrome.

It's not responsive. What are the options to make it responsive?

I received an error in IE9: "invalid character".
The library currently loads the JSON file as follows:

var params = JSON.parse(data.currentTarget.response); 

IE9 doesn't have this property on the currentTarget object.
I fixed the problem using responseText instead, which solved the problem for IE9:

var params = JSON.parse(data.currentTarget.responseText); 

In IE, it will continue to call raf even after the DOM destroyed. Is there any way to manually destroy a pJS object?

Hi,
Is there any chance to stop the animation using javascript, after it started running?
I tried to find the Code inside your Examples GUI, but was unable to find how you disable the animation afterwards..

I was wondering if the array can accept more than one image source?

Hello!
in chrome it works well, but ofcourse it lags in FireFox, very slow, and lags.

Hey!

Everything is working perfectly, and it's a very nice job. Thank you!

But I have an issue, I can't add no bg image... I can change the bg collor, but every image I add, it simply won't load, keeping the bg collor only.

Probably I'm doing something wrong...

Can you guys help me, please?

Thank you again!

It would be better for developers who wants to contribute if the script was modularized, just a suggestion :)

Maybe it could be added?
this is the options that I would provide:

• increase/decrease (size)
  • active / inactive
  • for each particle differently
  • for all particles the same:
    • increase
    • decrease
    • random (increase || decrease)
  • duration
• change of color:
  • array of colors
    for example [#fee, #fcc, #a00, #fee]
  • the easeIn || easeInOut option
  • speed

And one more thing, ... automate the min version with grunt...

element.remove is used in this line, however it is not supported in a relatively new vesion of IE, IE 9. It would be great if you could just use another method to remove elements.

I'm trying to run particle.js behind my d3 SVG canvas, and you can see the lines/particles but the animations stop when the canvas isnt on the first layer

Anyone know how to get rid of this nasty black bar? Thanks!

Hello Vincent, I was trying to use your library like it can be seen here: http://flc.muriandre.com/ which is changing shapes and colors after several drawing rounds in order to show more effects by one single script.

That example is using your library with my modifications that you can get from here: https://github.com/fernandocanizo/particles.js

My first attempt was to just create another animation loop, problem was machine became sluggish as each new frame I created leaved your requested animations running (but not being shown), so at some point there were just too many animations running for the machine to cope with.

So I decided to export the id returned by requestAnimFrame() and clear the previous call when needed.

Then I needed a way to change configuration parameters and I tried several things until I decided to export your config object too.

Then I needed a way to tap into your animation cycle, so I exported a couple of variables that allow to pass it a callback which I use to update config.

Then I needed to recalculate colors, since they are only calculated on particle creation.

...

Long story short: I did a lot of changes to your library structure, but I think they would be good to be included in your library, but now I've gone to far and it seems you've been updating it too, so I'm wondering: supposing you like my changes, how would you like we to proceed to incorporate them? Should I just make a pull request? Should I update first and then try to trace your changes and include them in my version?

Please tell me what you think of my changes and if you like them, how we can proceed.

If you view the GitHub demo using either an Android tablet or mobile and then rotate the device from portrait to landscape the animation doesn't fill the entire screen

Hello, i installed particles.js with npm and created a variable in app.js but right after this i have a crash:

/media/d/Develop/potter/potter.com.ua/node_modules/particles.js/particles.js:1429
window.requestAnimFrame = (function(){
^
ReferenceError: window is not defined
    at Object.<anonymous> (/media/d/Develop/potter/potter.com.ua/node_modules/particles.js/particles.js:1429:1)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/media/d/Develop/potter/potter.com.ua/app.js:10:19)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)

Could you help me?

I followed all the steps but it's not displaying the particles neither the lines, there's no error output...

Is there a way to add an outer-glow or shadow to particles? Could be a nice effect for star fields and such.

Just spent 15 minutes really angry that nothing was working...

Would be great if we could use a class of particles-js instead of an ID as some DIV's may already have IDs

Any chance this could be addressed?

Hi, Vincent.

Thanks very much for this great project.

Is there any way to specify particles to fade in one by one or in step ones, or fade in by opacity.

Hi,
I'm trying to apply your plugin on multiple IDs, works fine for drawing it, but only the last created canvas is interactive/animated. Do you have any solution?

Thanks :)

Hello @VincentGarreau !

I `ve trying to use the rails gem with the material paralaxx template

I tried to add by pasting gem 'rails-assets-particles.js' in my gem file and running bundle install, but I get the error:

"Don't run Bundler as root. Bundler can ask for sudo if it is needed, and
installing your bundle as root will break this application for all non-root
users on this machine.
Fetching gem metadata from https://rubygems.org/............
Fetching version metadata from https://rubygems.org/...
Fetching dependency metadata from https://rubygems.org/..
Could not find gem 'rails-assets-particles.js (>= 0) ruby' in any of the gem
sources listed in your Gemfile or available on this machine.
pedrom@pedrom-System-Product-Name:~/code/gearcloud$ "

Am I missing something ?

Salut Vincent!

I've had some flickering issues when resizing the window, so i guessed it was happening when the canvas is repainted.

I added a timeout to redraw only when the resizing is done

  pJS.fn.canvasSize = function(){
    pJS.canvas.el.width = pJS.canvas.w;
    pJS.canvas.el.height = pJS.canvas.h;

    //Initialize timeout
    var TO = false;

    //On resize
    window.onresize = function(){
      if (TO !== false){
        //Reset timeout
        clearTimeout(TO);
      }
      TO = setTimeout(repaintIt, 200);
    };
    //The repaint
    function repaintIt(){
      if(pJS){
        pJS.canvas.w = pJS.canvas.el.offsetWidth;
        pJS.canvas.h = pJS.canvas.el.offsetHeight;

        /* resize canvas */
        if(pJS.retina){
          pJS.canvas.w *= pJS.canvas.pxratio;
          pJS.canvas.h *= pJS.canvas.pxratio;
        }

        pJS.canvas.el.width = pJS.canvas.w;
        pJS.canvas.el.height = pJS.canvas.h;

        /* repaint canvas */
        pJS.fn.canvasPaint();
        if(!pJS.particles.anim.enable){
          pJS.fn.particlesRemove();
          pJS.fn.canvasRemove();
          launchParticles();
        }
      }
    }
  };

and it has helped, but the flickering still happens sometimes after resizing. I'm no way a canvas expert.

Merci!

i've added the script to my localhost site. after a couple of minutes the fan starts, almost as if I were watching an heavy flash file.

Dear Vincent,

first of all: Thanks a lot for this super cool script!

Is is somehow possible that instead of creating lines between two points to create lines between three points to build a triangle shape that could be filled with a color?

Thanks in advance!

Can we get destroy method so we can, for example destroy particles on mobile devices where the performance is an issue?

Hey Vincent Thanks for this :)
I am having a little problem as
Your online preview " http://vincentgarreau.com/particles.js/ " looks so smooth on all screens.
When I am running file locally(in small screens) i get the view as

The particles are condensing too much on the sides of window when i resize the window
Could you please help me where I am missing out to get a smooth view like yours?

Hi,

I am trying to make Particle JS work as a background. As you can see on my website, the body as the attribute particles but, the particles are only after the content. It dosen't follow the order. Here is the config:

particlesJS("particles-js", {
    particles: {
        number: {
            value: 80,
            density: {
                enable: !0,
                value_area: 800
            }
        },
        color: {
            value: "#ffffff"
        },
        shape: {
            type: "circle",
            stroke: {
                width: 0,
                color: "#000000"
            },
            polygon: {
                nb_sides: 5
            },
            image: {
                src: "img/github.svg",
                width: 100,
                height: 100
            }
        },
        opacity: {
            value: .5,
            random: !1,
            anim: {
                enable: !1,
                speed: 1,
                opacity_min: .1,
                sync: !1
            }
        },
        size: {
            value: 3,
            random: !0,
            anim: {
                enable: !1,
                speed: 40,
                size_min: .1,
                sync: !1
            }
        },
        line_linked: {
            enable: !0,
            distance: 150,
            color: "#ffffff",
            opacity: .4,
            width: 1
        },
        move: {
            enable: !0,
            speed: 6,
            direction: "none",
            random: !1,
            straight: !1,
            out_mode: "out",
            bounce: !1,
            attract: {
                enable: !1,
                rotateX: 600,
                rotateY: 1200
            }
        }
    },
    interactivity: {
        detect_on: "canvas",
        events: {
            onhover: {
                enable: !0,
                mode: "grab"
            },
            onclick: {
                enable: !0,
                mode: "push"
            },
            resize: !0
        },
        modes: {
            grab: {
                distance: 140,
                line_linked: {
                    opacity: 1
                }
            },
            bubble: {
                distance: 400,
                size: 40,
                duration: 2,
                opacity: 8,
                speed: 3
            },
            repulse: {
                distance: 200,
                duration: .4
            },
            push: {
                particles_nb: 4
            },
            remove: {
                particles_nb: 2
            }
        }
    },
    retina_detect: !0
});

Thanks!

Could you please include the required files to display the control panel to change the particle settings "on-the-fly"?

Awesome library!
What about adding a support to use webfonts such as font awesome icons for example to be used as a particle shape with optionaly an array of font elements to randomly choose one?

I would love to see support for more shapes in the line intersects. Or maybe small PNG files as intersects (and have the client implement the shapes in PNG files). Whichever is easier to code.

Implement an animation property for color particles and lines linked - like the animation for the particles size.

By default has width and height at 100%. How can I change it?

I am using the plugin for a full background where i have certain interactions. But when i trying to add a text layer on the top i am not able to have the interactions over the div containing the text.

Is there any way to get this to work with text over the canvas?

Demo Link

is it okay if I make a smart package of this library for the Meteor framework?

Hey man, really love your work.
I just have a small problem with updating some of the values in the JSON file.
What I've used so far, is just what you wrote in a closed issue;

pJSDom[0].pJS.particles.number.value = 1000;
pJSDom[0].pJS.particles.move.direction = "bottom";
pJSDom[0].pJS.particles.color.value= "#766637";
pJSDom[0].pJS.fn.particlesRefresh();

But there is some value I can't change such as;
particles.move.speed
particles.size.value

And I've written them in the same with as those value changes that actually work, like;
pJSDom[0].pJS.particles.move.speed = 9;
pJSDom[0].pJS.fn.particlesRefresh();

Am I doing something totally wrong here? :s
Also sorry for bothering you.

Hello,

It seems that when I call pJSDom[0].pJS.fn.vendors.start(), all particles speed up with a certain ratio.

Normal?

If you can add this to the docs that would be great..I don't see this being canvas but I would like to know how far back this works...

How would i remove the stat model in the top left corner?

Excellent library, but it seems like it doesn't support images being used for the particles (with sizing etc), rather than just a solid color.

Would be a great addition in my opinion.

I am working on a rails application and I need to load the particles js in a html file.I have installed the particles js through a gem in rails.

Do I need to put the particles.js in the vendor assets or can i directly call in a html file?

If i can directly call it,how do i do it?

It does not work with Chrome but it works with Safari. Very weird.

I added the following on my css and it s working:

particles-js{

height:100%;
background:#b61924
}

hi thank you package.

it's bug? when i use

particlesJS.load('particles-js','particles.json');

chrome console show
Uncaught SyntaxError: Unexpected token :

file particles.json content

{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 5,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true,
  "config_demo": {
    "hide_card": false,
    "background_color": "#b61924",
    "background_image": "",
    "background_position": "50% 50%",
    "background_repeat": "no-repeat",
    "background_size": "cover"
  }
}

I am running version 2.0.0 of particles.js as a background in a Zurb Foundation based site using particles.json for configuration as suggested in the README.

Using Chrome Version 44.0.2403.157 (64-bit) on Linux Mint, the page with particles.js crashes sporadically; i.e. the browser content area turns gray and is not clickable any longer (cannot access console to see an error message). I have to refresh the browser and reload the page.

Any idea what could cause that?

Hihi,

Wondering how I can access the properties and change the no. of particles there are on the fly?

Thanks in advance!

Hello, I am trying to implement particles into my Joomla website. i have activated a module here dmware.it/seo however the effect doesn't load.
Within the index.php of the template I have the particles.json. The index.php calls the /scripts/app.js. if anyone can help it'll be great, thanks.

This is really awesome stuff.

I wanted to utilize this but wanted to append text around each point to illustrate a web of ideas. Is there a way to do this?