Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/drawcall/Proton
Javascript particle animation library
https://github.com/drawcall/Proton
canvas js-particle particle particle-engine particle-system particles particles-library webgl
Last synced: about 2 months ago
JSON representation
Javascript particle animation library
- Host: GitHub
- URL: https://github.com/drawcall/Proton
- Owner: drawcall
- License: mit
- Created: 2013-07-10T05:25:20.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2024-09-28T07:40:51.000Z (3 months ago)
- Last Synced: 2024-10-13T22:03:21.208Z (2 months ago)
- Topics: canvas, js-particle, particle, particle-engine, particle-system, particles, particles-library, webgl
- Language: JavaScript
- Homepage: https://drawcall.github.io/Proton/
- Size: 13.3 MB
- Stars: 2,415
- Watchers: 56
- Forks: 275
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-frontend - Proton - Javascript particle animation library.  (Repository / Animation)
- awesome-made-by-chinese - Proton
- awesome-web - Proton
README
---
Proton is a lightweight and powerful Javascript particle animation library. Use it to easily create a variety of cool particle effects.
Check out examples at [http://drawcall.github.io/Proton/](http://drawcall.github.io/Proton/). The **3D version** of the proton engine is here [here](https://github.com/drawcall/three.proton/). An available **react version** is [here](https://github.com/lindelof/particles-bg).
## Features
- **Easy to use** It takes only a dozen lines of code to create a particle animation effect.
- **Multiple effects** Use Proton to create flames, fireworks, bullets, explosions, and more.
- **Any scene** You can use it in frameworks such as `react`, `vue`, `angular`, and `pixi.js`, `Phaser`, etc.
- **Efficient rendering** Its rendering efficiency is very high, you can render tens of thousands of particles in the page.
- **Simulated physics** Proton can simulate various physical properties including gravity and Brownian motion.
- **Several renderers** Proton provides a variety of renderers, of course you can also customize your own renderer
- `CanvasRenderer` - Proton's canvas renderer
- `DomRenderer` - Proton's dom renderer, supporting hardware acceleration.
- `WebGLRenderer` - Proton's webgl renderer.
- `PixelRenderer` - Proton's pixel renderer, It can implement pixel animation.
- `EaselRenderer` - Easeljs proton renderer.
- `EaselRenderer` - Pixi.js proton renderer.
- `CustomRenderer` - Use a custom renderer that can be applied to any scene.
## Documentation
See detailed documentation please visit [https://projects.jpeer.at/proton/](https://projects.jpeer.at/proton/).
Thank you very much [@matsu7089](https://github.com/matsu7089) for writing a [good tutorial](https://qiita.com/matsu7089/items/dcb7d326e4ec1340eba6).
## Installation
#### Install using npm
> Note: NPM package-name has been changed from `proton-js` to `proton-engine`
```shell
npm install proton-engine --save
```
```javascript
import Proton from "proton-engine";
```
#### OR include in html
```html
```
## Usage
Proton is very simple to use, a dozen lines of code can create a particle animation.
```javascript
const proton = new Proton();
const emitter = new Proton.Emitter();
//set Rate
emitter.rate = new Proton.Rate(Proton.getSpan(10, 20), 0.1);
//add Initialize
emitter.addInitialize(new Proton.Radius(1, 12));
emitter.addInitialize(new Proton.Life(2, 4));
emitter.addInitialize(new Proton.Velocity(3, Proton.getSpan(0, 360), "polar"));
//add Behaviour
emitter.addBehaviour(new Proton.Color("ff0000", "random"));
emitter.addBehaviour(new Proton.Alpha(1, 0));
//set emitter position
emitter.p.x = canvas.width / 2;
emitter.p.y = canvas.height / 2;
emitter.emit(5);
//add emitter to the proton
proton.addEmitter(emitter);
// add canvas renderer
const renderer = new Proton.CanvasRenderer(canvas);
proton.addRenderer(renderer);
```
## Remarks
- `Proton.Span` (or `Proton.getSpan`) is a very important concept of the Proton engine, it's everywhere. If you understand its usage, you can create almost any desired effect!
- If you want to create wind, rain, or snow, etc, you can use the `emitter.preEmit` method to pre-render the scene.
- Use `Proton.Body` and `Proton.Color` at the same time. I suggest you'd better use the `WebGLRenderer` not `CanvasRenderer`.
- Added `Proton.Cyclone` behavior, you can make vortex effects with Cyclone. Demo please check [here](https://codesandbox.io/s/proton-cyclone-rzweu).
- `proton.fps` In most cases, you don't need to set this property. You can set this property when the game engine has fixed fps or some browsers have a higher refresh rate.
- Use Euler integration calculation is more accurate (default false) `Proton.USE_CLOCK = false or true;`.
Proton has now been upgraded to the **v4** version. Performance has been greatly improved and api also has some improvements. For more details, please check [here](https://github.com/drawcall/Proton/releases).
## Building
`node` is a dependency, use terminal to install it with:
```javascript
git clone git://github.com/drawcall/Proton.git
...
npm install
npm run build
```
And run example
```javascript
npm start
//vist http://localhost:3001/example/
```
## Changelog
Detailed changes for each release are documented in the [release notes](https://github.com/drawcall/Proton/releases).
## License
Proton is released under the MIT License. http://www.opensource.org/licenses/mit-license