Qarticles

A lightweight and high performance JavaScript library for creating particles

Live Demos

click here.

Install

• base

your html

<script src="src_to_qarticles.js"></script>

• npm

npm i Qarticles --save

your 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 = (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.