DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Particle.Js (and now tsParticle.js), a funny way to use canvas!
ChiaraLyn
ChiaraLyn

Posted on • Updated on

Particle.Js (and now tsParticle.js), a funny way to use canvas!

Particles.js

It’s been a long time since I promised to get my hands dirty with the wonderful things we can do with canvas.

Today I had a little taste of the power of the canvas concept. I chose to use a really beautiful library: Particle.Js

It was a very exciting experiment. My demo is really essential but I realized that it has an immense potential for projects in which you want to make the most of design as an art form to communicate and to create different... atmosphere.

My Demo

After all, the concept of canvas is nothing more than an explicit reference to a white canvas that can be filled with what we want...

So, with Particle.Js it is really simple to have in your hands working, stable, clean, customizable code.

Simply edit your canvas from the tool that Vincent Garreau (Particle.Js author) made available and publish it on Codepen. From here you can use the Javascript, Css and HTML parts in your project.

The rest is built within the div that hosts the canvas.

You can set all the settings related to the number of items you want, the interactions on hover, on click and the ways in which our items must react to these events.

My Demo

The particles are perfectly customizable and even the base of our canvas can be used with simple CSS or a background image.
Particle types can be chosen from a dropdown that offers default particles, NASA, Bubble, Snow, Nyan Cat.

Particle.Js has 24,899 stars at the moment (including mine!), 282 issues and 4,400 forks and is licensed under MIT.

1) Include CDN library in you HTML file and use the

<div id="particles-js"></div>
Enter fullscreen mode Exit fullscreen mode

to grab you HTML content

2) Create you own custom particles canvas using the page tool at https://vincentgarreau.com/particles.js/

3) Publish it on Codepen using the Codepen button on the top right

4) In you custom JavaScript file copy that Codepen result (same for CSS)

You can find my Demo on Codepen and GitHub

The only flaw that this library has is that it is no longer maintained 😒, but wait! We have a wonderful solution 😎 ❀️ !!

tsParticle.js

tsParticle.js is a library with an implementation really similar to Particle.js (so there is not much different or complex than the previous one, really!!), with new features and very well maintained, created by @matteobruni and released under MIT license and... it's also wonderful βœ…!

particle2.gif

In order to understand how to implement it, we have a beautiful documentation on Github.

Matteo writes in his article:

[...]I’ll show you some reasons to replace particles.js with the new tsParticles.

  1. tsParticles are fully compatible with the particles.js configuration. Seriously, you just need to change the script source et-voilΓ  you're ready.

  2. tsParticles have a frame per second (fps) limiter, so they don’t let the CPU client suffer more than necessary.

  3. tsParticles have a lot of new features.

  4. tsParticles development is active. [...]

We can find some great examples with tsParticles also on Codepen, just to give you an idea of the potential and you can implement it with Vue, React and even Angular. For Wordpress there is no plugin but you can use tsParticle through Premium Addons for Elementor (in the Premium Particles Add.on section).

I hope that you too can try to have fun with tsParticle.Js, and that you create beautiful patterns for your projects!😊 😊

Top comments (11)

Collapse
 
matteobruni profile image
Matteo Bruni

You should try tsParticles, an improved version of the abandoned particles.js

GitHub logo matteobruni / tsparticles

tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.

banner

tsParticles - TypeScript Particles

A lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible with React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components

Rate on Openbase jsDelivr Cdnjs npmjs npm lerna CodeFactor Codacy Badge Gitpod Ready-to-Code Run on Repl.it

Slack Discord Telegram

tsParticles Product Hunt


Table of Contents

Do you want to use it on your website?

Documentation and Development references here πŸ“–

This library is available on the two most popular CDNs and it's easy and ready to use, if you were using particles.js it's even easier.

You'll find the instructions below, with all the links you need, and don't be scared by …

Collapse
 
chiaralyn profile image
ChiaraLyn Author

Oh! I'll try It for sure! Too kind! Thank you!!πŸ˜ŠπŸ™

Collapse
 
chiaralyn profile image
ChiaraLyn Author

@matteobruni I will edit this article with your permission and I will write to switch to the better manteined tsParticle.js library, do you agree? I would like to link your articles on tsParticle.js. Can I?

Thread Thread
 
matteobruni profile image
Matteo Bruni

Yes, thank you. Don’t worry, link every article you need.

Thread Thread
 
chiaralyn profile image
ChiaraLyn Author

Thank you very Much!!!πŸ₯³πŸ₯³πŸ₯³

Thread Thread
 
chiaralyn profile image
ChiaraLyn Author

@matteobruni done! Hope you like it!! Thank you again, you're a life saver πŸ’― !!!

Collapse
 
dudeactual profile image
masspopcorn

Amazing :D

Collapse
 
chiaralyn profile image
ChiaraLyn Author • Edited on

Thank you!!!

Collapse
 
darshanbajeja profile image
Darshan-Bajeja

Wonderful! By the way why don't you embed your codepen demo in the post itself, this will be really helpful

Collapse
 
chiaralyn profile image
ChiaraLyn Author

I put the link to the Github repo and the Codepen of the demo I made, in the next article I will post the code directly to make things more comfortable for the reader, thank you very much for your suggestion!

Collapse
 
darshanbajeja profile image
Darshan-Bajeja

You can still edit and post if u like

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post