Giter Site home page Giter Site logo

iq-scm / qarticles Goto Github PK

View Code? Open in Web Editor NEW

This project forked from hilongjw/qarticles

0.0 0.0 0.0 1.32 MB

A lightweight and high performance JavaScript library for creating physical particles

Home Page: http://hilongjw.github.io/Qarticles/demo.html

JavaScript 100.00%

qarticles's Introduction

Qarticles

A lightweight and high performance JavaScript library for creating particles

preview.gif

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

qarticles's People

Contributors

hilongjw avatar iawia002 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.