With all the buzz around the HTML 5 Canvas Element, I wanted to give it a try myself. So i pulled together this particle emitter, using JavaScript as the controller and the Canvas Element as the renderer.
I started of with what I am going to call the “Base Class”, within the particleEmitter.js file. In JavaScript you can create classes by following this simple structure:
1 2 3 4 | function Emitter(arguments...) { ... } |
Properties are then created on the object as follows:
1 2 3 4 | function Emitter(arguments...) { this.property = value; } |
You can see in the Emitter class i create some properties that will affect the environment of the emitter. Then, there are the methods of the class, which are created as follows:
1 2 3 4 | function Emitter(arguments...) { this.method = function() { ... } } |
The logic behind the the “createParticle” method is that it checks to see if there are more than the allotted number of particles, if so, it grabs the “oldest” particle and reuses it by resetting it’s properties. The “step” method loops through all the particles and applies the conditions of the environment, i.e. gravity, velocity, lifespan, etc. Finally, the “draw” method actually renders the particles to the Canvas Element. The particles in JavaScript are just represented by placeholder objects that store the position, velocity and lifespan of the particle. There are no “display objects” in the Canvas Element, you can only draw to it.
The Canavs Element is very easy to draw to. Once the element is created in HTML, you need to get the Canvas’ context, which is what you draw to.
1 | var canvasContext = document.getElementById('canvasElement').getContext('2d'); |
For there you can draw in the Canvas context a number of different ways. In this example, I am using a simple circle using the “arc” method:
1 2 3 4 | canvasContext.fillStyle = 'rgba(red, green, blue, alpha)'; canvasContext.beginPath(); canvasContext.arc(x, y, radius, startAngle, Math.PI*2, antiClockwise); canvasContext.fill(); |
Pretty simple huh? From here, the “Base Class” creates and monitors some slider controls and color picker. It also creates a timer that fires off the specified amount of particles at the specified interval. From here, you can really go anywhere with this simple combination of JS and HMTL 5. To dive further into the Canavs Element, stop over at the Mozilla Developers Center where you can find a great set of tutorials. You can snag my source below.