Particle playground

My most recent useless programing project is a particle emitter engine with an interactive playground. It involves a nice combination of mathematics and creativity that results in a visual reward. I've lost quite a bit of time by unintentionally getting sucked into tinkering with this!

It enables you to create animated patterns from thousands of particles using a few lines of code. It works by automatically producing new particles every few frames, and you just specify the initial properties and the update behavior in JavaScript. The engine does the rest!

Try it for yourself below. You can see the canvas, parameters, code snippets, and documentation. If you come up with any cool designs, click the Share Code button and email it to me so I can add it as a preset. You can also look at the source on GitHub.

FPS: , Particles:

Documentation

The Init event runs once for each particle when it is created. The Update event runs for each particle once per frame. Each particle will be moved by its speed in the direction of its rotation. You can modify all individual particle's properties through the p object, like p.speed. You can even store your own variables, like p.foobar. The other properties of particles include:

• x,y -- position
• xscale,yscale -- multiplies the particle's size
• r,g,b -- color values from 0 to 255
• a -- alpha from 0 to 1
• life -- how many frames until the particle is deleted
• speed -- how far to be moved at the end of the frame
• rotation -- the angle to be moved at the end of the frame, in radians
• i -- the unique id of the particle, starting at 0 and counting up
• z -- the depth to draw the object, smaller numbers get drawn first

Any changes to the code requires clicking Restart. You can modify Burst Size and Burst Delay anytime with the sliders. There are also globals (treat them as read-only):

• height,width -- size of the drawing area
• time -- number of frames that have occured
• bursts -- number of bursts that have occured
• alive -- number of particles currently alive
• burstsize -- number of particles to create at a time
• burstdelay -- delay between bursts
• move(obj,distance,direction) -- helper function to move a particle

You can find the source on GitHub. Special thanks to Joseph Lormand for presets.