Canvas example of a gradient grid
When working with a canvas element there are ways to quickly paint a gradient to the canvas but todays canvas example is about making something a little more fun and interesting that is similar to that a little. It involves having grid and a pool of objects that are used to set color channel values for each grid cell. So all of this constitutes a model object that is then drawn to the canvas resulting in a cool color gradient type effect that might be kind of cool.
I went a little overboard with this example, making a plugin system and a few plugins that have to do with the setting and updating of the behavior of these objects in the object pool that have to do with how the grid gradient changes. there are two types of pulgins one type will define initial conditions of objects, and the others define how objects will change. I have all ready made a number of plugins for this canvas project, and keep experimenting how plugins can be used to take this in all kinds of different directions.
Like many advanced canvas example projects I started breaking things down between code that is used to create and update a main state object, and code that makes that renders that state object to the canvas element. In addition I then have additional code that is used to tie everything together when it comes to a model and view.
So this should be a decent canvas example thus far all ready, and chances are I will come back to it again at least a few times more in the future.
1 - Starting off with a utils module for the grid gradient canvas example.
With many of these canvas examples of mine I have a utils.js file that contains some functions that I will be using in one or more additional modules. For this example it is just a distance formula and a mathematical modulo method.
If I continue working on this it is only a matter of time until this might end up having a few more methods like this, but for now it is just these two usual suspects. Think of this module as a kind of project specific lodash, I am only going to put methods here if I am going to use them in the canvas example alone.
2 - The gradient.js module, and plugins
When working out a plug-in, the plug-in will contain two collections of one ore more methods. These methods are objUpdaters, and initMethods. The initMethods are used to set the initial values of objects when it comes to starting positions, headings, color channel values, and so forth. The objUpsters as the name suggests are used to define what is to happen for an object when it comes to updating those properties.
The main update method of the Gird class will reset all color channel values of all the cells of the grid to [0,0,0,0], it then goes threw all the objects to change all the values in that array to other values between zero and one. The color values of the cells are then used in my draw.js file to fill each cell a certain color using rgba functional notation.
However before we get to the draw module lets take a look at a few plug-in examples.
2.1 - The init rand plugin
The plug ins are objects that contain collections of methods that are used to figure initial properties of objects, as well collections of methods that are used to update methods. The init rand plugin that I made is a way for me to abstract away much of the starting logic for the objects that I had built in early in development of this.
This plug-in just has init methods that set random values for object properties including position, heading, and color. I can use just one or two of them or all of them when using the Grid constructor later on.
2.2 - The init RGB plugin
Here I have another plug-in with some init methods for the objects. It sets the color channel values for each object in a way in which there is an even number of objects with with red, or green, or blue channel values set to one while the others are set to zero. This way as the objects move around all other colors are possible depending on the position, size, and distance from each other as they move around. I think this kind of plug-in results in a cool effect, but I want to experiment with others, so I pulled it into a plug-in.
2.3 - radius_change, heading_change, and fixed_pos object update methods.
I worked out some plug-ins that provide update methods that change the behavior of the objects. When doing so I made just a few quick examples just for the sake of testing out this plug-in system. I see all kinds of potential when it comes to making this kind of project even more interesting, so I know that I will want to pull at least some logic out of the main gradient.js file, and into plug-ins.
3 - The Draw module for this canvas example of a grid gradient
So now that I have my gradient.js file, and some plug-ins for it, I will want a module that will be used to draw the current state of this to the canvas.
4 - Main
So now it is time to take this all for a test drive, with a main.js file, and a little html. In my html I have a hard code canvas element, and a bunch of script tags linking to my utils.js, gradient.js, plugins, draw.js and the main.js file that is to come in this section.
I my main,js file I get a reference to my hard coded canvas element, set the siz eof the canvas element, and then use the Grid constructor of my gradient module. I can then use the update method of the Grid instnace to update things in a main app loop, along with my draw methods to render the current state of that grid.
5 - Conclusion
This canvas example was a lot of fun, and I like the way it looks. The project code still use some additional polish though, so I do not want to wrote to much more about it at this time. Hopefully I will get some time to work more on this canvas example, as well as the many others that I have worked out thus far.