Canvas example of exploding binary particles
I like the Die Hard move franchise, and in the third movie there are several scenes that involve the use of a bomb that is composed of a binary liquid. One chemical component by itself is not dangerous at all, however if mixed with another, it becomes unstable and can very easily explode.
So the binary liquid bomb thing in Die Hard inspired me to make a canvas example that consists of a bunch of particles moving around the canvas. Each particle is of one type or another, they can overlap if they are the same type, but if two of two different types combine they will result in another particle type that will result in an explosion.
This canvas example will then be yet another example of several canvas examples now that have to do with what is often called a particle. The term particle seems to be a generic term for a single display object of a collection of such display objects that move around the canvas. There are many other terms that might come up for this kind of object though such a sprite, or display object.
1 - The utils module for this binary particles canvas example
So to start off I will want a utility library for this canvas example. For this example I will just want a distance formula, and a mathematical modulo function. As of version 0.1.0 of this example I now also added my standard create canvas method that I am starting to use in all of my canvas examples as usual. The idea here is that this library is a custom cut utility library for this example alone, there might be some functions that I use across all examples, but even then I might make some example specific changes to the function.
1 - The particles module for this canvas example
I will then want a particles library that I can use to create a state object, and update a state object for this binary particles canvas example. In fact that is the two public methods that this module provides, just a create an update method. However there is of course everything else going on inside of it so lets take a look.
1.1 - The start of the module and a random heading helper
At the top of the module I start off with the beginnings of an IIFE that will return a public API of two methods at the end of the module. After the start of the IIFE I have a few properties for the pool size, and other defaults for particles that I use in the body of code to come. In addition I also have a single helper method that will return a random radian value between a min and max degree given as arguments. This method will come into play just a litter latter when I get into the Particle class.
An addition that I made as of 0.1.0 was an array of PARTICLE UPDATE METHODS that I started playing around with. In future versions if and when I get to it I think this is something that I should expand on and improve. It would be nice to have an update method that will act as a way to make a particle of one type seek out and move to a particle of the other type for example.
1.2 - The Particle Class
I have decided to work of a Class for each particle object in the pool object of the state object. There are just two prototype methods for this class that are used to activate an inactive particle, and another to set it back to that state.
Each Particle object has an x and y property that is the current location of the particle in the canvas matrix. There is a heading value that is of course the direction that the particle is heading in radians, as well as a pixels per second value that is the number of pixels that the particle will move in the span of a second.
The life, radius, and per values are used for when a particle enters a state in which it exists as a combination of both types of particles. When this is the case its position will be set to an average between the two points that have resulted in it entering this state, and it will begin to loose life, as the life value decrees the radius will increases, resulting in an explosion like effect.
So there are four states that a particle can be in a ‘00’ or inactive state, a ‘10’ and ‘01’ state there are the two different particle types, and then a ‘11’ or explosion state.
1.3 - The create particle pool helper
There is a simple function that is just used to create the particle pool when making the state object in the public API later on in the module.
There are two general ideas that come to mind when making a pool of objects like this. One is to create a fixed set of objects of a certain size, and then just have a way to set them active and inactive. The other way is to have a pool that can just be an empty array, or maxed out at a certain max size, and then have some way to spawn and purge objects to and from the pool. For this canvas example at least I have decided to go with the former rather than the latter.
1.4 - Check if a particle has hit another particle in the pool.
This method is used to loop over all particles in the particle pool to see if a given particle has hit another one or not.
1.5 - A spawn method to activate particles in the pool
A particle has actually four kinds of states thus far, one is an inactive state so I will want a spawn method that will set an inactive particle into an active state.
1.6 - Update the pool
I will want a method that will update the pool of particles that will be called in the main public update method of this module. In here I just loop over all of the instances of the Particle class and check the bits string of the instance. There is then just two general things to do depending on the value of the bits string, one is to call an particle update method and move the particle of it is a red or blue type particle. The other thing to do is expand the radius and reduce the lifespan of the particle if it is an explode type.
1.7 - The Public API
Here now is the pubic API that consists of my create, and update methods that I will be using outside of the module in the main.js file. The create method will not just create an instance of the Particle class, but will create a state object that contains many useful properties including but not limited to a pool of particle class instances.
3 - Draw module
I put in just one more method that is used to set up a gradient for the background. I went a little overboard with this one, and I just wanted something other than my usual solid black background.
4 - Main.js
So now I have a utility module, a particles module that I can use to create and update a state, and a draw module to draw the current status of a state object. With that said it is now time to make use of it all with an index html file, and a main.js file that will tie all this together, and provide a basic app loop.
5 - Conclusion
This canvas example when up and running results in a bunch of particles moving around all over the canvas, when one hits another of a different type it explodes. I have to admit that looking at it is very satisfying, but there is so much more that I could add when it comes to moving forward from here. I do come around and put a little more time into an example now and then when I get to it, and there is maybe more that I could do when it comes to the movement of the particles.
This canvas example might not be the best example of an object pool though, I now have another example where I made an attempt at a standard object pool library of sorts that I now copy and past over to new examples now and then. Where it comes to making or using a canvas library an object pool, particles class, or something to that effect should be a standard feature of such a framework. However when it comes to doing everything from the ground up I am free to design such things anyway I like, which can be nice in some ways, but also proves to be time consuming.