Javascript Particle Engine
Javascript particle Engine
I was at the No Fluff Just Stuff Software Symposium in Reston, VA this past weekend and had some time in between sessions to work on something. As most of the people I work with know, I rarely code things that might actually be useful to someone in my spare time. So, I had no reason to attempt to rationalize the use for a particle engine in Javascript.
I think I've written a particle engine in almost every language I've used for an extended period of time. This includes python, java, objective-c, and c. What's surprising is that it has taken me this long to write a particle engine in the language I probably spend the most time coding in -- Javascript.
By the way, this is probably the worst particle engine ever created (TM), but it is written in Javascript, so give me a break. It doesn't support colors yet as I couldn't think of an efficient way to change the color of a png. I've only tested it in Firefox and Safari because I'm on a Powerbook. It's also pretty slow, in that it can handle only a dozen or so particles.
Let me know what you think!
features
- Create multiple particle emitters per page
- Emitters have individual configurations
- Velocity Range
- Life Decrement Range (opacity)
- Maximum particles to use
- Particle re-spawn number
- Event type to trigger particles
- Individual X, Y forces applied to particles
- Size of particles
demo
| Attribute | Setting |
|---|---|
| Velocity Range | |
| Life Decrement Range | |
| Max Particles | |
| Particle Re-spawn | |
| Event Type | |
| Applied X force | |
| Applied Y force | |
| Particle Size | |
html configuration
- import prototype, scriptaculous, and particle.js
- add emitter class to element
- add options to configure emitter
download
Download the particle_engine.zip source.14 Comments
Leave a comment
0 TrackBacks
Listed below are links to blogs that reference this entry: Javascript Particle Engine.
TrackBack URL for this entry: http://www.nearinfinity.com/mt/mt-tb.cgi/459
Well that's ridiculous, but I like it. Sparks is obviously the best, but the campfire one is cool too.
I could imagine how many websites would use this to show their smoking deals. Very Nice!!
Nice! Looks fine on FFox/PC
Looks good in Opera 9, too.
About colors: What about three PNGs, and setting opacity of them to create colors? I think that would work well.
Great demo! I think, I gonna love that javascript stuff some day. :)
I recently found a very interesting website:
http://alreadylinked.com/
There you can purchase ad space for your Blog etc.
but will use red or yellow spoke for better effect. great effect
great, this could certainly be usefull for creating some funky new effects ...
Fine sparks.
Yes ridiculous effects but very nice, will be hard to find a site it can be implemented into, but I'll have a try
Cool. Could you make it colour by using a transparent PNG (or no PNG at all) and setting a background colour?
Richard:
The png uses a gradient from black to transparent, which is why it looks nicer than just a colored block.
I could use a couple pngs of different color and use opacity to get pseudo-random colors like Andr‡s pointed out.
Good job there!