A lightweight JavaScript library for creating particles

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!

Uncaught ReferenceError: particlesJS is not defined
    at (index):911

This is my Code:

<div id="particles-js"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.0.2/particles.min.js"></script>

<script type="text/javascript">
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'bilder/particlesjs-config.json', function() {
  console.log('callback - particles.js config loaded');
});
</script>

whats wrong?

I tried Creating Multiple calls to particleJS function in order to run multiple instances of particleJS in certain divs on my HTML page. but by default it only redenrs the first div which is called and ignores the rest. Is there any way we can fix this?

I've Already Referred to #33 , #183 and #302 but still the query remains unsolved. Please Help with the same and provide a robust solution for this.

Hey there! I was wondering how I could put P.js behind my existing HTML. My HTML is https://greemdotcs.github.io - and the source for my HTML is on my repo for that website, https://github.com/greemdotcs/greemdotcs.github.io/ - Thanks!

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 :)

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...

I try to integrate with webpack to put my page but i having this error any idea why ? if i give direct link it's working. but with webpack + babel it's not.

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, 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.

Let me start by saying I love this library! I am trying to get this to work with React. I'm calling particlesJS.load('particles-js', '../assets/particles.config.json', function() { console.log(callback - particles.js config loaded'); }); inside the componentDidMount ion my Main container, but am getting this error _particles2.default.load is not a function in my console. The package is downloaded and imported in on my file.

In my HTML file, I've given the body an id of particles-js (so as not to conflict with the div id of app for React in the body)

I would love any suggestions! Thanks so much :)

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!

Swapped out arguments.callee for a simple recursive call, so the script can run in strict mode ie: inside modules but it doesn't break running outside a module.

Usage inside a module:

import "https://code.jquery.com/jquery-3.2.1.js";
import "<path>/particles.js"

window.particlesJS("particle-canvas-green", {
            particles: {
                number: {
                    value: 100,
                    ...
});

Also added canvasResize and return the pJS object, so canvases can be resized explicitly. This can allow elements that are initially not displayed to host particles and then once they are displayed, we can call this and have the particles work as expected rather than occupy a 0x0 canvas.

import "https://code.jquery.com/jquery-3.2.1.js";
import "<path>/particles.js"

const particle_js_green = window.particlesJS("transition-particle-canvas-green", {
            particles: {
                number: {
                    value: 100,
                    ...
});

// Then on event
particle_js_green.canvasResize();

Hi there, not expecting much help from here but I'll give it a shot anyway:

I'm using WebSockets to retrieve a number that changes every now and then in my project. I have added it to Particles.js and assigned a variable to the changing number.

Next, I can use that Variable to set how many particles are pushed on click. But this variable only updates once at the beginning and then doesn't register the changes coming from my WebSockets.

I was wondering if there is a way, to push new particles based on the number I am getting from my WebSockets instead of having to click.

So in Theory, my particles.js receives data via my WebSocket connection, I store this data as an int, and depending on the int new particles are added or reduced from the canvas. Everytime new data comes via WebSocket this process is repeated.

Any hints or Ideas how I could get something like this done ?

Hello, I'm using particles in elementor When I add the code to the section and view it, I can't interact with anything in the section I add particles to it. The section has buttons, I can't click on them or select the text. Can someone please tell me where the issue is?