https://github.com/alexanderbrodko/expl
Super simple and lightweight particle system imitating explosion. Editor included
https://github.com/alexanderbrodko/expl
confetti explosion firework js particle
Last synced: 5 months ago
JSON representation
Super simple and lightweight particle system imitating explosion. Editor included
- Host: GitHub
- URL: https://github.com/alexanderbrodko/expl
- Owner: alexanderbrodko
- Created: 2024-01-27T12:45:53.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-21T20:11:57.000Z (over 2 years ago)
- Last Synced: 2024-02-22T20:33:50.699Z (over 2 years ago)
- Topics: confetti, explosion, firework, js, particle
- Language: HTML
- Homepage: https://alexanderbrodko.github.io/expl/
- Size: 66.4 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# expl
Single file JS particles imitating explosion. Editor included
Demo: https://alexanderbrodko.github.io/expl/?05006c360agpub00g00r007v80g0,055k6c360afvub00g00s007vnvg0,212q1jvv0a1jvv00cp1i1jlig0g0
Use `homogenity` to see what is going on:
## Usage
**Important note:** draw is your own business. For a draw example, see [draw using Canvas](https://github.com/alexanderbrodko/expl/blob/main/index.html#L145) in editor or [PixiJS integration](https://www.pixiplayground.com/#/edit/zbOl38iaDnyNFfPJ3qqJK).
Copy **expl.js** to your working dir and place `` in head of your document
``` js
// You have some code from editor URL
let str = '05006c360agpub00g00r007v80g0,055k6c360afvub00g00s007vnvg0,212q1jvv0a1jvv00cp1i1jlig0g0';
// create manager
let expl = new Explosions();
// add fx
expl.spawnFromString(x, y, str);
// dont forget to update
expl.update(dt);
// draw in any way possible
for (let e of expl) if (e.t > 0) { // avoid particles waiting to start
let progress = e.t / e. ttl; // can animate opacity or any other propery you need; DIY
// Virtual space is GL like: -1 to 1. Screen center is (0, 0). Y axis is directed to bottom
e.x, e.y, e.rnd, e.custom, e.params; // use this to draw
}
```
### Optional
You can spawn particles from an object with params:
``` js
let fx = {
"pause": 0,
"dx": 0, // direction and force of an explosion
"dy": -350, // direction and force of an explosion
"count": 28,
"spread": 0.2, // how wide sector emitter have
"area", // radius of the emitter
"gravity": 500,
"ttl": 0.55, // time to live
"homogenity": 0.2,
"physical": 0.000085,
"custom": 10 // custom param; preview size in editor
};
expl.add(x, y, fx, yourParams, pause); // every particle will have .params === yourParams
// or if you want to add single fx
let str = '05006c360agpub00g00r007v80g0';
fx = expl.unpack(str);
expl.add(x, y, fx);
```