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.
- 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, andpixi.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 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-jstoproton-engine
npm install proton-engine --saveimport Proton from "proton-engine";<script type="text/javascript" src="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(orProton.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.preEmitmethod to pre-render the scene. -
Use
Proton.BodyandProton.Colorat the same time. I suggest you'd better use theWebGLRenderernotCanvasRenderer. -
Added
Proton.Cyclonebehavior, you can make vortex effects with Cyclone. Demo please check here. -
proton.fpsIn 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 buildAnd 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
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent