Qarticles
A lightweight and high performance JavaScript library for creating particles
Live Demos
Install
- base
your html
<script src="src_to_qarticles.js"></script>- npm
npm i Qarticles --saveyour app.js
import Qarticles from 'Qarticles'Usage
var canvas = document.getElementById('cov')
var qarticles = new Qarticles(canvas)
Options
var canvas = document.getElementById('cov')
var covColorFuc = function (dot, w, h) {
return `rgba(${Math.floor(255 * (1 - dot.x / w))}, ${Math.floor(255 * (1 - dot.y / h))},${Math.floor(255 * (dot.speedArr[0]/ 100))}, 0.4)`
}
var lineColorFuc = function (dot, w, h) {
return `rgba(${Math.floor(255 * (1 - dot.x / w))}, ${Math.floor(255 * (1 - dot.y / h))},${Math.floor(255 * (dot.speedArr[0]/ 100))}, 0.1)`
}
var covSpeedFuc = function (speed) {
return Math.random() * speed * (Math.random() * 10 > 5 ? -1 : 1)
}
var options = {
lineLink: {
count: 2,
show: true
},
color: {
dotColorFuc: covColorFuc,
lineColorFuc: lineColorFuc,
},
dot: {
physical: true,
speed: speed,
vxFuc: covSpeedFuc,
vyFuc: covSpeedFuc,
count: 80,
size: {
random: true,
max: 20,
min: 0
}
}
}
var qarticles = new Qarticles(canvas, options)License
This project is licensed under the terms of the MIT license.