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. It involves having a bunch of objects that are used to set color channel values for each grid cell that is a model object that is then drawn to the canvas resulting in a cool color gradient effect. I also made a post on plain old canvas gradients anyway.
I went a little overboard with this example, making a plug in system and a few plug ins that have to do with the setting and updating the behavior of these objects and how the grid gradient changes. Like many advanced canvas example projects I started breaking things down between code that is used to create and update an object that is independent of canvas, and then additional code that is used to draw that model to the canvas. 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.
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.
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.
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.
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.
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.
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.
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.
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.