How add Multiple Images in Particles.js

[BehroozBvk]

Hi, Wondering How add Multiple Images in Particles.js

[mikenewbon]

https://github.com/athletics/particles

[Koeroesi86]

This seems like a sad story so far: https://github.com/VincentGarreau/particles.js/blob/master/particles.js#L380

[firestar300]

It works using https://github.com/Wufe/react-particles-js

"shape": {
  "type": "images",
  "stroke": {
    "width": 0,
    "color": "#000"
  },
  "polygon": {
    "nb_sides": 6
  },
  "images": [
    {
      "src": "img/shapes/0.svg",
      "width": 100,
      "height": 100
    },
    {
      "src": "img/shapes/1.svg",
      "width": 100,
      "height": 100
    }
  ]
},

[chrisunderdown]

It works !

"shape": {
  "type": "images",
  "stroke": {
    "width": 0,
    "color": "#000"
  },
  "polygon": {
    "nb_sides": 6
  },
  "images": [
    {
      "src": "img/shapes/0.svg",
      "width": 100,
      "height": 100
    },
    {
      "src": "img/shapes/1.svg",
      "width": 100,
      "height": 100
    }
  ]
},

Doesn't work for me? Did you make any changes to particles.js?

[firestar300]

@chrisunderdown no I didn't.

[firestar300]

@chrisunderdown check the path of your images.

[TOcvfan]

I doesn't work for me

[Fenny]

@firestar300 are you using https://github.com/VincentGarreau/particles.js ?

[vjandrei]

not working here either

It works !

"shape": {
  "type": "images",
  "stroke": {
    "width": 0,
    "color": "#000"
  },
  "polygon": {
    "nb_sides": 6
  },
  "images": [
    {
      "src": "img/shapes/0.svg",
      "width": 100,
      "height": 100
    },
    {
      "src": "img/shapes/1.svg",
      "width": 100,
      "height": 100
    }
  ]
},

[erichlotto]

Any updates on this? Are there other libraries available that works? (https://github.com/athletics/particles doesn't work on firefox)

[firestar300]

It's very weird. I used theses settings in production : https://100.iccwbo.org/

As you can see, there are several SVG path in background. @Fenny , I used the React component of ParticleJS https://www.npmjs.com/package/react-particles-js

[firestar300]

Upon further investigation, images shape type only works on the React component of ParticleJS. https://github.com/Wufe/react-particles-js/blob/master/src/lib/Particle.ts

[fogsy]

is multiple images working without react?

[salemalem]

is multiple images working without react?

Same question

[firestar300]

No it doesn't.

[dsusco]

I created a PR for multiple images. Just make particles.shape.image an array.

#390

It includes another PR for a "destroy" out mode. I needed multi-colored balloons to fly off the top of the screen. You know... important website stuff.

[matteobruni]

If anyone needs this feature this library has it, it's the new core of react-particles-js but React is not required, it's a library like particles.js