Performant Particles: 3 to 6 times faster than tsParticles or Particles.js

Related tags

Effect perParticles
Overview

perParticles

Performant Particles is a demo that was written to handle a comparatively large amount of particles without slowing down to the same degree as existing solutions. Since it was intended as a proof of concept rather than a ready to use solution, it cannot be imported as a package, but it should still be easy to use. All of the customization options are listed at the top of perParticles.js file and are self-explanatory.

You can view the live demo here. It is set to the same particle amount and maximum line distance as the tests described below.

Test Setup

Hardware

The tests were performed on a system with an AMD Ryzen 7 5800X CPU and 32Gb of DDR4 3600 RAM. The monitor used had a native resolution of 5120x1440 and a maximum refresh rate of 240Hz.

Software

Microsoft Edge version 93.0.961.52 (64-bit) on Windows 10 version 10.0.19043 (Build 19043).

Stats.js was used to measure FPS.

Test Results

Test 1:

Software FPS Resoution Particles Max Line Distance
perParticles 75-95 1920x1080 1000 150px
Particles.js 23-25 1920x1080 1000 150px
tsParticles 13-15 1920x1080 1000 150px

Test 2:

Software FPS Resoution Particles Max Line Distance
perParticles 175-195 5210x1440 1000 150px
Particles.js 63-66 5210x1440 1000 150px
tsParticles 29-32 5210x1440 1000 150px

Takeaway

The FPS results were consistent across multiple measurements on the same computer. Naturally these results are specific to the hardware and software used. Testing on your own device may yield different results. Somewhat lower performance would be expected on CPUs with 8 or fewer cores, unfortunately I didn't have any on hand to test with. For what it's worth, according to people who ran some impromptu tests for me on their phones and computers, perParticles still visibly outperforms other solutions.

You might also like...

Projeto individual, um site para cobertura de partidas de vôlei, times onde você pode saber onde, quando acontecerá as partidas, e dados sobre os times.

Projeto individual, um site para cobertura de partidas de vôlei, times onde você pode saber onde, quando acontecerá as partidas, e dados sobre os times.

🏐 Volleyball Esports Coverage Um portal de vôlei para as pessoas se conectarem ou divulgarem suas partidas, conhecimentos e uma maneira de conhecerem

Jun 6, 2022

🎮 The only Front-End Performance Checklist that runs faster than the others

Front-End Performance Checklist 🎮 The only Front-End Performance Checklist that runs faster than the others. One simple rule: "Design and code with p

Jan 1, 2023

Package manager faster than NPM

Pine Script holder that runs faster than NPM and yarn Pine is a npm and yarn run like module, that allows you to organize your scripts and run them FA

Jul 10, 2021

An all new Titanfall VPK unpacker. Over 2x faster than the most popular alternative!

An all new Titanfall VPK unpacker. Over 2x faster than the most popular alternative!

Harmony VPK Tool An electron-based app for unpacking Respawn VPK files. Super-fast and made with ♥ Why use Harmony VPK Tool over cra0's VPKTool? It's

Dec 19, 2022

Plug-and-play, faster-than-native promise/callback event emitter

Plug-and-play, faster-than-native promise/callback event emitter

kNow Blazing-fast callback/promise-based events with a tiny footprint What is this? With kNow (pronounced "now"—the k's silent), JavaScript event mana

Sep 11, 2022

⏱ A library for working with dates and times in JS

Luxon Luxon is a library for working with dates and times in JavaScript. DateTime.now().setZone("America/New_York").minus({ weeks: 1 }).endOf("day").t

Jan 9, 2023

In how many ways can you print in the console 50 times?

In how many ways can you print in the console 50 times I was asked at an interview how to print in the console "Hello World" 50 times in as few lines

Oct 4, 2021

Ping.js is a small and simple Javascript library for the browser to "ping" response times to web servers in Javascript

Ping.js Ping.js is a small and simple Javascript library for the browser to "ping" response times to web servers in Javascript! This is useful for whe

Dec 27, 2022

Knwl.js is a Javascript library that parses through text for dates, times, phone numbers, emails, places, and more.

Knwl.js Knwl.js is a Javascript library that parses through text for dates, times, phone numbers, emails, places, and more. Project Future The future

Jan 1, 2023

Flexible plugin for Logseq that annotates deadline/schedule times with a countdown or time difference

Flexible plugin for Logseq that annotates deadline/schedule times with a countdown or time difference

Interval Hints Synopsis Configurable Logseq plugin to annotate deadline and scheduled times with a countdown or interval. Features Block renderer to a

Aug 29, 2022

💪 Reserve machine/rack/bench usage at a gym to minimize waiting times.

💪 Reserve machine/rack/bench usage at a gym to minimize waiting times.

Gym Reservation App 💪 Oscar Su, Amelia Reeves, Nathan Ma Possible name: Pump Program The goal is to reduce/eliminate the time spent waiting on others

Jul 8, 2022

A small jQuery plugin for displaying Muslim Prayer Times

A small jQuery plugin for displaying Muslim Prayer Times

jquery-prayer-times A small jQuery plugin for displaying Muslim Prayer Times. Features! English/Arabic language support. Auto detect visitor location.

Oct 30, 2022

Get a quick hash that uses the well-liked Bernstein "times 33" hash method and delivers a hex string.

short-hash-ts - Get a quick hash that uses the well-liked Bernstein "times 33" hash method and delivers a hex string. Installation Install short-hash

Sep 4, 2022

Site informativo de times, partidas e classificações de futebol (Criado apenas back-end)

Bem vindo ao Trybe Futebol Clube! Esse projeto é uma API RESTfull na qual utiliza arquitetura MSC(model, Service, Controller) para ler,filtrar e criar

Oct 29, 2022

Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

Jan 8, 2023

Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

Jan 4, 2023

Build performant, native and cross-platform desktop applications with native Vue + powerful CSS like styling.🚀

Build performant, native and cross-platform desktop applications with native Vue + powerful CSS like styling.🚀

Vue NodeGui Build performant, native and cross-platform desktop applications with Vue. 🚀 Vue NodeGUI is powered by Vue 🌈 and Qt5 💚 which makes it C

Dec 30, 2022

Highly performant JavaScript data stream ETL engine.

bellboy Highly performant JavaScript data stream ETL engine. How it works? Bellboy streams input data row by row. Every row, in turn, goes through use

Dec 16, 2022

Chat Loop is a highly scalable, low-cost, and high performant chat application built on AWS and React leveraging GraphQL subscriptions for real-time communication.

Chat Loop is a highly scalable, low-cost, and high performant chat application built on AWS and React leveraging GraphQL subscriptions for real-time communication.

Chat Loop Chat Loop is a highly scalable, low cost and high performant chat application built on AWS and React leveraging GraphQL subscriptions for re

Jun 20, 2022
Owner
Alaric von Teplitz
Alaric von Teplitz
A vue.js particles animation background component

particles-bg-vue A vue.js particles animation background component. Use it to make your website look cool. Check it out if you want to use it in React

lindelof 206 Dec 24, 2022
Lightweight, High Performance Particles in Canvas

Sparticles https://sparticlesjs.dev Lightweight, High Performance Particles in Canvas. For those occasions when you ?? just ?? gotta ?? have ?? sparkl

Simon Goellner 171 Dec 29, 2022
A bursting particles effects buttons component ✨💥❄️🌋

vue-particle-effect-buttons (demo) Bursting particle effect buttons for Vue. This library is a Vue portal of an awesome Codrops Article by Luis Manuel

Vincent Guo 252 Nov 11, 2022
A little library that can be used for bursting particles effects on buttons and other elements

Particle Effects for Buttons Bursting particles effects for buttons. By Luis Manuel. Article on Codrops Demo Credits anime.js Basic usage The Particle

Codrops 1.2k Jan 1, 2023
A vanishing effect for particles and magic lovers using Threejs, GSAP and custom shaders.

Three.js Experiment - Vanishing Suzanne Demo version Get started First, you need nodejs on your computer to build the assets. Install dependencies: np

Arno Di Nunzio 120 Dec 23, 2022
Javascript library to generate an infinite stream or a burst of image based particles on HTML canvas.

spxparticles Stream or a burst of image particles on HTML canvas Simple Javascript library for generating an infinine stream or a burst of image based

Tuomo Kulomaa 3 Dec 3, 2020
2x times faster than chalk and use 5x less space in node_modules

Nano Colors A tiny and fast Node.js library for formatting terminal text with ANSI colors. It is 2 times faster than chalk. Both loading and calls. No

Andrey Sitnik 886 Dec 30, 2022
Matteo Bruni 4.7k Jan 4, 2023
Matteo Bruni 4.7k Jan 4, 2023
Matteo Bruni 4.7k Jan 4, 2023