jQuery Plugin For Generating Random Texture or Height Map - Graphics Demo

Graphics Demo is an awesome jQuery plugin for generating a random texture or height map on a canvas. These textures can then be the basis for many natural textures through the application of a ColourMap and can also be used in animations and "graphics demos". 

Basic Usage:

1. Include jQuery library and jQuery Graphics Demo in the head section

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="graphicsdemo-0.9-min.js"></script>

2. Creat a canvas element for background clouds

<canvas id="background-canvas" width="128" height="128"></canvas>

3. The javascript

<script type="text/javascript">
// On document load
$(document).ready(function () {
    // Remove namespacing for ease of use
var Step = GraphicsDemo.Step, ColourMap = GraphicsDemo.ColourMap, Mask = GraphicsDemo.Mask;

// Create a custom Mask (difonly slightly from the original)
Mask.custom = function(graphics, screen, options){
for (var y = 0; y < screen.height; y++){
for(var x = 0; x < screen.width; x++){
var c1 = screen.getPixel(x, y);

var p1 = (y - 10) / (screen.height - 40);
if (options.pos == 0){
} else if (options.pos == 1){
p1 = 1 - p1;
} else if (options.pos == 2){
p1 = 1 - p1 * 2;
if (p1 < 0){
p1 = -p1;
}
}
var col = {
r : (c1.r > options.bgCol.r) ? c1.r - ((c1.r - options.bgCol.r) * p1) : c1.r + ((options.bgCol.r - c1.r) * p1),
g : (c1.g > options.bgCol.g) ? c1.g - ((c1.g - options.bgCol.g) * p1) : c1.g + ((options.bgCol.g - c1.g) * p1),
b : (c1.b > options.bgCol.b) ? c1.b - ((c1.b - options.bgCol.b) * p1) : c1.b + ((options.bgCol.b - c1.b) * p1),
a : 255
};

screen.setPixel(x, y, col);
}
}
};

// Generate background clouds animation, with a lower frame rate
var animationSteps = [
{ step:Step.generateTexture, params:{ screen:0, graininess:0, wrapTexture:true, colourMapFunction:ColourMap.clouds }},
{ step:Step.generateTexture, params:{ screen:1, graininess:0, wrapTexture:true, colourMapFunction:ColourMap.clouds }},
{ step:Step.scrollBy, params:{ screen:0, xAmount:1, yAmount:2 }},
{ step:Step.scrollBy, params:{ screen:1, xAmount:2, yAmount:1 }},
{ step:Step.combine, params:{ source1:0, source2:1, dest:2 }},
{ step:Mask.custom, params: { screen:2, bgCol: {r:0, g:0, b:255, a:255 }, pos:0 }},
{ step:Step.renderScreen, params:{ screen:2 }},
{ step:Step.goTo, params: { step:2 }}
];

var plugin = $("#background-canvas").graphicsdemo({ steps: animationSteps, fps:12 }); 
});
</script>

---

This awesome jQuery plugin is developed by AshleyBryant. For more Advanced Usages, please check the demo page or visit the official website.