gridfader.js

gridfader.js is a JavaScript object that creates a grid of cells on a provided canvas element that randomly fade in using one random color from a provided palette.

Demo

A viewable demo is available at http://xcjs.github.io/gridfader.js/

Usage

The object is designed to handle all of its own event bindings itself once initialized:

(function() {
	var fader = new GridFader('gridfader');

	fader.palette.push(new fader.ColorManagement.Color({ r: 32, g: 48, b: 51 }));		
	fader.palette.push(new fader.ColorManagement.Color({ r: 95, g: 104, b: 84 }));		
	fader.palette.push(new fader.ColorManagement.Color({ r: 115, g: 142, b: 165 }));		
	fader.palette.push(new fader.ColorManagement.Color({ r: 202, g: 178, b: 161 }));		
	fader.palette.push(new fader.ColorManagement.Color({ r: 236, g: 238, b: 244 }));		

	fader.gridColor = new fader.ColorManagement.Color({ r: 0, g: 0, b: 0, a: .5 });

	fader.cellSize = 48;
	fader.gridSize = 5;
	fader.fadeStep = .001;

	fader.clockSpeed = 3;

	fader.BindEvents();
})();

Once all of the required properties are assigned, BindEvents will need to be called.

Constructor Arguments

var fader = new GridFader('canvasId');

The constructor only takes the ID of the affected canvas element.

Public Properties

Property	Type	Required?	About
palette	Array<GridFader.ColorManagement.Color>	✓	An array of colors that gridfader.js will randomly select from. <p> palette is already an array and simply needs items pushed onto it. </p> <p> Items should be from gridfader.js's ColorManagement.Color object. </p> <p> Example: </p> fader.palette.push(new gridFaderObject.ColorManagement.Color({ r: 32, g: 48, b: 51 })); </td> </tr> <tr> <td style="vertical-align: top;"> gridColor </td> <td style="vertical-align: top;"> GridFader.ColorManagement.Color </td> <td style="text-align: center; vertical-align: top;"> ✓ </td> <td style="vertical-align: top;"> Grid color drawn onto the gridfader.js canvas. </td> </tr> <tr> <td style="vertical-align: top;"> cellSize </td> <td style="vertical-align: top;"> Integer </td> <td style="text-align: center; vertical-align: top;"> ✓ </td> <td style="vertical-align: top;"> The length/width of each grid cell to be filled with color. </td> </tr> <tr> <td style="vertical-align: top;"> gridSize </td> <td style="vertical-align: top;"> Integer </td> <td style="text-align: center; vertical-align: top;"> ✓ </td> <td style="vertical-align: top;"> The width of the grid drawn by gridfader.js. Keep in mind that the center pixel(s) overlap in even widths, so the grid width may not be the intended width. </td> </tr> <tr> <td style="vertical-align: top;"> fadeStep </td> <td style="vertical-align: top;"> Float </td> <td style="text-align: center; vertical-align: top;"> </td> <td style="vertical-align: top;"> Any decimal between 0.0 and 1.0 - this is translated as the CSS RGBA alpha value for the cell color added or subtracted during each tick of the clock. The default value is .001. </td> </tr> <tr> <td style="vertical-align: top;"> clockSpeed </td> <td style="vertical-align: top;"> Integer </td> <td style="text-align: center; vertical-align: top;"> </td> <td style="vertical-align: top;"> The animation clock speed in milliseconds - gridfader.js attempts to animate every cell in the grid within this amount of time. The default value is 500. </td> </tr> <tr> <td style="vertical-align: top;"> cycleSize </td> <td style="vertical-align: top;"> Integer </td> <td style="text-align: center; vertical-align: top;"> </td> <td style="vertical-align: top;"> The number of cycles gridFader takes to select a new cell to begin animating, starting with 0. One cycle is equal to the clockSpeed. The default value is 7 which selects a new cell every 8 cycles. </td> </tr> <tr> <td> maxCellOpacity </td> <td> Float </td> <td> </td> <td> The highest opacity each cell will fade to before fading out and being removed. </td> </tr> </tbody>

Public Methods

Method	About
BindEvents()	Once all of the properties have been set, call BindEvents() to start gridfader.js.