drawcall / Proton

Javascript particle animation library
https://drawcall.github.io/Proton/
MIT License
2.42k stars 275 forks source link
canvas js-particle particle particle-engine particle-system particles particles-library webgl

npm version dm travis issues open issues open license:MIT

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.

Features

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="https://github.com/drawcall/Proton/raw/master/js/proton.min.js"></script>

Usage

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);

Remarks

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