Proton

javascript particle engine

Easy to use

Only ten lines code,you can achieve a very cool effect.Such as the demo of 71squared's ParticleDesigner

Multiple renderer

Proton provides canvas,dom,webgl,easel and pixel seven kinds of renderer.Of course you can customize your own renderer,It is very easy.

Physics

Proton provide a variety of physics and collision. You can easily simulate the physical world.


Get started

it’s really easy, only a dozen lines!

var proton = new Proton();
var 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();
//add emitter to the proton
proton.addEmitter(emitter);
// add canvas renderer
var renderer = new Proton.CanvasRenderer(canvas);
proton.addRenderer(renderer);

Check the full tutorial »


Notice

If you want to create wind, rain, or snow, you can use the emitter.preEmit method to pre-render the scene.

If you use Proton.Body texture at the same time use Proton.Color,Then I suggest you'd better use the WebGLRenderer not CanvasRenderer.


Examples


About

I am a chinese literary youth.I like math,hongkong comics,classical novels,and nan pai san shu.

You can follow my Weibo: http://weibo.com/ajiecn or email to
me ajiemath@gmail.com Thank you!