https://github.com/finleygn/particles-lw
Lightweight particles canvas
https://github.com/finleygn/particles-lw
Last synced: 3 months ago
JSON representation
Lightweight particles canvas
- Host: GitHub
- URL: https://github.com/finleygn/particles-lw
- Owner: finleygn
- License: mit
- Created: 2019-02-02T11:48:09.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-02T12:23:29.000Z (over 6 years ago)
- Last Synced: 2025-01-12T12:53:55.794Z (5 months ago)
- Language: JavaScript
- Size: 10.7 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# particles-lw
Lightweight particles on a canvas
## How To Use
```js
new particleArea({
root: "renderCanvas",
type: "circle",
amount: 80,
size: 10,
variance: 6,
colour: ["purple", "white", "white"],
background: "rgb(20,20,40)",
force: {
x: 0.7,
y: 0.5
}
});
```
#### Root
Root is the id of the element you want the canvas to be rendered to, the canvas will automatically fill out the size of this element.
#### Type
Available types are currently `"circle"` and `"square"`. It will change how the particle looks.
#### Amount
The amount of particles you want on the screen, over 400 and the page will start to slow.
#### Size
The size of your particles in px relative to the canvas.
#### Variance
The maximum size difference from particle to particle (should not be larger than the size).
#### Colour
An array of colours, if you just want one colour use `colour: ["rgb(YOUR COLOUR HERE)"]`.
#### Background
The background colour of the particle canvas.
#### Force
Takes an object with x and y, this is the distance the particles will move in that direction each frame.
## To Do
* Add more particle types (images should be available)
* Add variance for direction
* Gradients of colour