html5 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 five 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.Renderer('canvas', proton, canvas);

Check the full tutorial »


This version is not release version, so if you find bugs or errors in the process of using , please tell me, thank you!

If you use imageTarget texture at the same time use color ,Then I suggest you'd better use the webglrenderer not canvasrenderer.



I am a chinese literary youth.I used to be a flash developer,I like math,hongkong comics,classical novels,and nan pai san shu.

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