SuperParticles
Performance-focused alternative to VincentGarreau's 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
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):
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://pixijs.download/dev-graphics-batch-pool/pixi.js"></script>
<script src="https://cdn.jsdelivr.net/gh/T-vK/SuperParticles@master/SuperParticles.js"></script>
<script>
window.onload = function(){
var superParticles = new SuperParticles()
}
</script>If you want, you can pass a div container to SuperParticles which then will be used to render the particles:
<body>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://pixijs.download/dev-graphics-batch-pool/pixi.js"></script>
<script src="https://cdn.jsdelivr.net/gh/T-vK/SuperParticles@master/SuperParticles.js"></script>
<div id="super-particles"></div>
<script>
window.onload = function(){
var divContainer = '#super-particles'
new SuperParticles({
container: divContainer
})
}
</script>
</body>You can limit the FPS like this:
new SuperParticles({
maxFps: 30
})API
new SuperParticles(cfg)
Creates a new SuperParticles instance.
cfg defaults to:
{
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