https://github.com/t-vk/superparticles
Amazing CPU-friendly particle network animations
https://github.com/t-vk/superparticles
efficient fps js particles particles-js performance pixi
Last synced: 3 months ago
JSON representation
Amazing CPU-friendly particle network animations
- Host: GitHub
- URL: https://github.com/t-vk/superparticles
- Owner: T-vK
- Created: 2019-02-03T10:31:01.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-08-08T22:27:55.000Z (about 3 years ago)
- Last Synced: 2025-07-09T15:55:34.060Z (3 months ago)
- Topics: efficient, fps, js, particles, particles-js, performance, pixi
- Language: JavaScript
- Homepage: https://t-vk.github.io/SuperParticles/demo.html
- Size: 862 KB
- Stars: 38
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SuperParticles
Performance-focused alternative to [VincentGarreau's particles.js](https://github.com/VincentGarreau/particles.js)
## Introduction
SuperParticles aims at resolving the major performance issues that come with particles.js, by using WebGL when possible and also by allowing you to limit the frame rate (FPS).
If you have more ideas on what could be done to further improve the performance, feel free to open an issue.
## GIF Demo
[](https://t-vk.github.io/SuperParticles/demo.html)
## Live Demo
https://t-vk.github.io/SuperParticles/demo.html
## How To Use
Jquery is optional, but recommended.
Pixi.js is required (preferrably in a version above 5.0.0-rc):
``` HTML
window.onload = function(){
var superParticles = new SuperParticles()
}
```
If you want, you can pass a div container to SuperParticles which then will be used to render the particles:
``` HTML
window.onload = function(){
var divContainer = '#super-particles'
new SuperParticles({
container: divContainer
})
}
```
You can limit the FPS like this:
``` JavaScript
new SuperParticles({
maxFps: 30
})
```
## API
### new SuperParticles(cfg)
Creates a new SuperParticles instance.
cfg defaults to:
``` JavaScript
{
useJquery: undefined, // true/false/undefined
maxFps: 30, // requires pixi.js v5
autoStartAnimation: true, // true/false
container: {
element: undefined,
backgroundCssRule: "radial-gradient(ellipse at center, rgba(10,46,56,1) 0%,rgba(34,34,34,1) 70%)" // css or null (null: don't modify container background)
},
pixiApp: { // these are documented here: http://pixijs.download/release/docs/PIXI.Application.html#Application
antialias: true,
transparent: true,
forceFXAA: false,
powerPreference: 'high-performance',
resolution: 1.0
},
particles: {
amount: 80, // unit: particles
radius: 2, // unit: pixels
velocity : 10, // unit: pixels/second
color: "0xFFFFFF", // unit: rgb hex color
fadeInDuration: 3000, // unit: milliseconds
fadeOutDuration: 600, // unit: milliseconds
keepRelativePositionOnResize: true, // true/false
},
lines: {
minDistance: 0.09, // unit: percent (1: 100%; 0: 0%
color: "0xFFFFFF", // unit: hex color
maxOpacity: 0.4, // 1: full opacity; 0: no opacity
thickness: 1, // unit: pixels
distanceBasedTransparency: true, // true/false
},
debug: {
showFps: false, // true/false
}
}
```
but you can overwrite individual properties if you like.
### superParticles.stopAnimation()
Pauses the SuperParticles instance.
### superParticles.startAnimation()
Resume the SuperParticles instance.
### superParticles.destroy()
Destroys the SuperParticles instance. (If you want to reuse the instance afterwards, you have to call reinit first!)
### superParticles.reinit()
Reinitializes the instance. (Useful after destroying it.)
### superParticles.cfg
This is the config object of the instance. You can overwrite the cfg object during runtime.
E.g. `superParticles.cfg = { pixiApp: { antialiasing: true } }`
Don't do `superParticles.cfg.pixiApp.antialiasing = true`