https://github.com/matej-ch/particles

Particle background made with hmtl canvas and javascript
https://github.com/matej-ch/particles

animation canvas

Last synced: 2 days ago
JSON representation

Particle background made with hmtl canvas and javascript

• Host: GitHub
• URL: https://github.com/matej-ch/particles
• Owner: Matej-ch
• Created: 2021-06-08T21:10:46.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-10-19T19:19:10.000Z (about 2 years ago)
• Last Synced: 2024-11-12T22:42:04.494Z (4 days ago)
• Topics: animation, canvas
• Language: JavaScript
• Homepage:
• Size: 493 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
https://matej-ch.github.io/particles/

Particle background

# Installation

``

npm i bg_particles --save

``

# Usage

```javascript

import PBackground from "./js/PBackground";

/**

 * Available modifiers

 * @param {string} canvasSelector Selector for finding canvas element

 *

 * @param {boolean} mouseInteraction Enables interaction between particles and cursor

 *

 * @param {number} mouseRadius Size of radius around mouse

 *

 * @param {number} canvasW width of canvas

 *

 * @param {number} canvasH height of canvas

 *

 * @param {Object} runAnimation Enables animation of particles

 *

 * @param {number} particleCount Number of particles

 *

 * @param {boolean} alpha Boolean that indicates if the canvas contains an alpha buffer.

 *

 * @param {string} bgColor Background of canvas

 *

 * @param {number} speedMod Speed modifier of particles

 *

 * @param {Array} lineColor Color of connecting lines

 *

 * @param {number} lineModifier Distance of line when to connect , lower number shorter distance

 * */

const bg = new PBackground({

  canvasSelector: '#canvas1',

  bgColor:'linear-gradient(0.15turn, rgb(223, 185, 106, 1), rgb(135, 190, 231, 1)90% )',

  speedMod: 0.25,

  lineColor: [0, 84, 219]});

/** initialize particles */

bg.init();

/** start animation */

bg.animate();

```