A short tutorial on how to add particles.js to your project

Hello,
I saw this question getting asked a few times here in the forum so I decided to create a short tutorial on how to add particles.js to your project.

Here it is:

Shoutout to @nicolaspvt and @chdaniel

7 Likes

Thanks for putting this together, always nice to have these resources available.

1 Like

Oh man, people like you make the world a better place Eli :pray::pray:

Thanks a lot. May I please ask you — since Slack.com’s homepage uses these icons of logos, how can we integrate these different .svg’s instead of the particles? I see in the configurator on particles.js that under

Particles → Shape → Image

There’s a field for that, image.src but since I’m not technical I don’t know exactly whether you can add multiple images there…?

Thank you Daniel.

Slack in particular didn’t use particles.js.
As you can see they have 15 icons and each icon makes small circles. with simple interactions for each on of the icons.

I’ve updated the tutorial with some advanced tips, one of them is how to add you own shape.

1 Like

Oh wow Eli, that’s fantastic. Thank you for going the extra mile to explain this — is there any way I could buy you lunch/coffee/smth as a way of saying thank you?

1 Like

Oh you’re awesome! Thank you.
My biggest satisfaction is when I can share some knowledge and it helps others.

1 Like

I find that highly admirable Eli, thanks once again. There’s one thing I’d like to ask you: I tried adding more images in the particles.js, to recreate that Slack.com homepage effect — since they have all these icons.

I think (from what I’ve read, not sure I understood correctly) the particle.js library doesn’t support multiple image assets?

I added something like:

  "image1": {
    "src": "https://drive.google.com/uc?id=xxx",
    "width": 100,
    "height": 100
  },
  "image2": {
    "src": "https://drive.google.com/uc?id=yyy",
    "width": 100,
    "height": 100
  }

Particles.js is not supporting multiple images.
However you can combine and show any other shape/s together with an image.
For exp: shape type: [ “circle” , “edge” , “image” , ]

And like I mentioned above, Slack is not using particles.js.
They created interactions for the few icons.

Hi Eli, yeah, I understand about Slack — I was saying how I’m trying to recreate it. I’ve noticed on Github that people have recommended this: GitHub - athletics/particles: Particles.js with multiple images for using particles but with multiple images.

Is there any way you can make a tutorial for how to integrate this?

The tutorial I made is for the particles.js repository as shipped by GitHub - VincentGarreau/particles.js: A lightweight JavaScript library for creating particles

The link you sent is not the original javascript. It’s a clone of the repository above with modifications in the actual code to accommodate 2 images(only). It does not work for more than 2 images and the solution provided is limited.

This is not a full solution and not part of the original public repository so for me specifically it’s not worth integrating.

Can my company pay for the expense that’s needed for you to find a solution that allows to integrate multiple images for these particles?

I just PM you.
Check your inbox.

I think you can use this framework

https://github.com/lindelof/particles-bg