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.


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

Check the full tutorial »


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.



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

You can follow my Weibo: or email to
me Thank you!