JavaScript Particle Engine in Canvas
The most popular entry I've written at Near Infinity has been the JavaScript Particle Engine. It had limitations because I used transparent images and only made one color -- black. I recreated the fire demo for a talk -- Advanced Web Graphics with Canvas -- that I gave at the Rich Web Experience. I'll post the slides, sample code, and some more demos in upcoming entries.
The code only took an hour to port from images to canvas, and had a number of benefits:
- Lots more particles can be drawn (20 before, 150 now)
- Multiple colors for more realistic modeling
As with all these prototypes I don't spend time porting to IE, but it would work. It would be slower and vml doesn't draw radial gradients correctly so it wouldn't look as good.
demo
3 Comments
Leave a comment
0 TrackBacks
Listed below are links to blogs that reference this entry: JavaScript Particle Engine in Canvas.
TrackBack URL for this entry: http://www.nearinfinity.com/mt/mt-tb.cgi/460
Nice use of prototype.js
Its wonderful.. I had never done this type of stuff with javascript. Will you guide me.
pro developer
Start with Mozilla's Canvas Tutorial...
https://developer.mozilla.org/En/Canvas_tutorial