Proton

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.

For guidance on how to use Proton with TypeScript, please refer to https://github.com/drawcall/Proton/issues/109

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/. Thank you very much @matsu7089 for writing a good tutorial.

Installation

Install using npm

Note: NPM package-name has been changed from proton-js to proton-engine

npm install proton-engine --save

import Proton from "proton-engine";

OR include in html

<script type="text/javascript" src="js/proton.web.min.js"></script>

Usage

Proton is very simple to use, a dozen lines of code can create a particle animation.

…

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.

• proton.fps In modern browsers, if the FPS exceeds 60 and you want to maintain a stable 60 FPS, you need to set proton.fps = 60. 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.

Building

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/

Changelog

Detailed changes for each release are documented in the release notes.

License

Proton is released under the MIT License. http://www.opensource.org/licenses/mit-license