Particle effects are pretty awesome. Particles by themselves are fairly simple, but by generating multitudes of particles with set variables you can create a range of effects such as fire, smoke, or water. A particle generator or emitter allows you to adjust the variables giving you control over the types of effects you can generate.
I’ve been working on another project that needed a particle generator, thus this demonstration was born.
There are several presets I’ve included, but you can easily generate new types of effects by playing around with the available variables on the presets.
The demo does not give you access to everything so in order to create more fine tuned options, here’s all the currently available variables:
{ shape: 'circle', // square or circle velocity: new Vector({y: -1}), // movement vector; only y is used xVariance: 0, // +/- start x position (random) yVariance: 0, // +/- start y position (random) spawnSpeed: 25, // # particles spawned per cycle generations: 100000, // # of cycles to run for maxParticles: 500, // max # of particles allowed on screen size: 20, // size of particles sizeVariance: 5, // +/- size of particles (random) life: 30, // # of cycles a particle can live lifeVariance: 10, // +/- lifetime of particle (random) direction: 0, // initial start direction directionVariance: 15, // +/- direction (random) color: '#fff', // can be hex code or rgb opacity: 1, // particle opacity onDraw: function(p) { // onDraw passes in the current particle and is called before each // particle is displayed on the screen. This function is used in // several of the presets to adjust the color or opacity given // the particle's current age and lifespan. } }
If you are using Firefox and Firebug, you can create your own objects and update the particle generator by using particles.update(myObject); via the command line.
As usual, HTML5 and Canvas is not currently supported by IE7/IE8, so you’ll need to use another browser in order for this to work. The demo has been tested in Firefox, Safari and Chrome, but I highly recommend using Chrome for the demo as it seems to run the most efficient.
On to the demo! Or alternatively, view the source here.
5 Comments Subscribe to Comments
[...] One such example I stumbled across is Canvas Tutorial for particle generator [...]
Incredible work! I created some really nice effects with it, made a nice dry ice smoke one based off the fountain preset :)
[...] Every web developer who doesn’t live under a rock knows that HTML5 is coming to change the way we work with the web, it provides new elements, new ways to embed media and a host of other improvements over previous versions. Today I want to share with you an awesome HTML5 particle effects demo created by scurker.com. It uses the <canvas> element to animate particles to create some really cool effects ranging from fire and smoke to fountains and raindrops. The demo lets you tweak the settings to come up with your own effects so go have a play with it. HTML5 Canvas particles. [...]
Hey this is fantastic!!! Do you mind me using this code? is it possible to replace the square generated with a png?
Dude!, that was really awesome,
I wish I could manage to at least get some text appear upon a canvas.
I never knew that html5 could be so awesome..
really really cool!