particle-lines
Inspired by Topaz's Particle Lines http://www.topaz1008.com/
Particle Lines is an interactive animation built with using HTML5 Canvas and no other third party runtime libraries.
It implements a particle engine that creates random moving particles, and draws colorful lines between close neighbours.
It is enclosed in a module for easy usage within any HTML.
Usage
Instantiate the ParticleLines class and pass a canvas element to it's constructor.
<body>
<canvas id="main"></canvas>
<script type="module">
import ParticleLines from 'particle-lines'
const canvas = document.getElementById('main');
new ParticleLines(canvas, {particlesAmount: 100, maxDistance: 150});
</script>
</body>Options
You can pass an options object to the constructor:
| Option | Description | Default Value |
|---|---|---|
| maxDistance | Determines the maximum distance between two particles to draw a line between. | 150 |
| maxVelocity | The maximum velocity in px/frame for randomly spawned particles. | 1 |
| particlesAmount | The amount of particles to spawn. | 100 |
| fps | Frames per second for the particle engine and rendering loop. | 60 |