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/. The 3D version of the proton engine is here here. An available react version is here.
react
, vue
, angular
, and pixi.js
, Phaser
, etc.CanvasRenderer
- Proton's canvas rendererDomRenderer
- 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.See detailed documentation please visit https://projects.jpeer.at/proton/. Thank you very much @matsu7089 for writing a good tutorial.
Note: NPM package-name has been changed from
proton-js
toproton-engine
npm install proton-engine --save
import Proton from "proton-engine";
<script type="text/javascript" src="https://github.com/drawcall/Proton/raw/master/js/proton.min.js"></script>
Proton is very simple to use, a dozen lines of code can create a particle animation.
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);
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.
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.
node
is a dependency, use terminal to install it with:
git clone git://github.com/drawcall/Proton.git
...
npm install
npm run build
And run example
npm start
//vist http://localhost:3001/example/
Detailed changes for each release are documented in the release notes.
Proton is released under the MIT License. http://www.opensource.org/licenses/mit-license