A simple efficient configurable particle engine written in JavaScript using HTML5 canvas 2D which works on desktop and mobile.
Just playing with particles. Hopefully this will inspire others to try stuff like this out too. This will develop with time so feel free to check back soon. I hope to create a simple engine to create and manage 2d particle effects on HTML5 canvas. Try it out by moving your mouse around in the demo and trying out some of the pre-sets from the drop down menu. If you make something cool with this feel free to let me know :-)
Please read comments in JavaScript for examples on how to use.
A live demo is available on my website - check out the several different example particle effects I made up quickly - totally customizable in minutes: http://jasonmayes.com/projects/particleEngine/
Here is a video of it in action:
Some screen shots of example particle effects I made using this engine in a matter of minutes:
- Draws to any canvas of your choosing.
- Supports particles and emitters with ability to stop and start as needed.
- Particle Rotation
- X and Y velocity
- Particle lifespans
- Change size of particle as a function of its life
- Particle colour or image
- Image pre-loading.
- Alpha transparency for images (png).
- Emitter supports a user definable number of max particles it can emit at any given time.
- Emitter supports a user definable "particle generator" function to generate particles for a given emitter.
- Uses Request Animation Frame to ensure buttery smooth animation whenever possible.
- Works in all modern browsers.
- Requires no 3rd party libraries to work - pure native JavaScript.
- Lightweight and efficient.
- Fully customizable.
I have never written a particle engine before and have always been fascinated by them. I wanted to give it a go and make it as simple as possible for others to customize / use. This is the end result of that adventure. This is by no means a fully featured particle engine, but may be what you need for something simple. I plan to add to it over time so stay tuned for updates and let me know feature requests.
Works in all browsers that support HTML5 canvas 2D. I have also tested on Chrome for Android / iOS and it seems to place nice there too.
Really, I like to hear feedback, and love to see what projects you have used it in. Feel free to give me a shoutout if you have used it. Talk to me: Via Google+, twitter, or my website.
Feel free to use in your own personal projects. I only ask you keep any disclaimers with my code (even if code is modified / minified) so others can find the original source should they wish to get updates or support. A link back / social media shout out is always appreciated to help others discover it (and for me to see what great things it is being used for) but not required :-)
If you plan to use in a commercial project please contact me first if you are unable to adhere to the above terms.