3D Javascript Particle Generator

Comments? go here

This is another small demo, testing the capabilities of the Javascript/Canvas 3D renderer. This time we're doing a bit of
special effects
in
Javascript
. The excanvas support for
Internet Explorer
is currently broken in the
3D renderer
, so only
Firefox
, Safari and Opera users get to experience cool
Javascript
smoke and fire in the
browser
for now.

Click and drag mouse to rotate, use "w"/"s" to zoom in/out. Change controls on the right to alter particle generation (remember to click the "update" button). Explanations for the controls are located further down.
Programmatically, you can also add forces that affect the particles in a specified direction or towards a point, but there are no controls for those in this demo, sorry.

Preset: 
Particle shape: 
Particle size: 
- Noise: 
Particle life: 
- Noise: 
Particle color: 
- Noise: 
Initial speed: 
Particle count: 
Resistance: 
Spawn speed: 
Direction: 
- Noise: 
Offset position: 
Rotation: 
Show emitter: 
Particle function: 

 

Particle options

  • Preset: Preset particle demos
  • Particle shape: Shape of particles (either "circle", "filled_circle", "square", "filled_square")
  • Particle size: Size of particles (in 3D world units)
  • Particle size noise: Add random amount to size in the range of +/- ([noise]*0.5)
  • Particle color: Color of particles, colors are in the format of {r:[0-255], g:[0-255], b:[0-255], a:[0.0-1.0]}
  • Particle color noise: Add random amount to each element of color, same format as particle color.
  • Particle life: Life of each particle (in ms)
  • Particle life noise: Add random number of miliseconds in the range of +/- ([noise]*0.5) to life
  • Initial speed: Speed of particles at emission, in world units per second
  • Particle count: Maximum number of particles allowed
  • Resistance: Decrease speed at [resistance] world units per second
  • Spawn speed: Spawn a new particle every [spawn speed] miliseconds, set to -1 to spawn all at once.
  • Direction: Vector of emission, vectors are in the format of {x:[number], y:[number], z:[number]}
  • Direction noise: Multiply direction vector with random number and noise vector.
  • Offset position: Vector. Offset initial particle position.
  • Rotation: Rotation vector. Ie. if rotate [rot.x] degrees around x axis every second, etc.
  • Show emitter: Show/hide emitter box
  • Particle function: Custom function called for every particle at every update. Arguments passed are a particle object and the point in its lifetime ( from 0.0 (birth) to 1.0 (death) ). See presets for examples.

Issues and compatibility

  • Only works in canvas-enabled
    browsers
    . Excanvas support is broken at the moment, so no particles for IE (I figure it wouldn't be much fun in IE, either)
  • Browser performance (short hangs and such) affects particle movement, which it shouldn't.
  • Force points are highly unstable and don't work right at all.
  • Rotation is done around global xyz-axes. Add ability to define custom rotation axis.
  • Individual particles are not z-sorted against each other.
  • The particle generator is z-sorted as a single object. Individual particles are not z-sorted against other objects in the scene.
Comments? go here
 


Copyright 2008-2009 Jacob Seidelin - Privacy Policy - Some icons by Bruno Maia, IconTexto