Canvas demo

Graphics Demo Documentation

Basic usage (generating static textures)

Basic usage of the Graphics Demo plugin is to generate 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". The plugin should only be called on a canvas object like so...

var plugin = $("#canvas1").graphicsdemo({ });

Params

graininess: (0..100)
0 or 1 gives a smooth texture, while 20 gives a grainy one. Default is 1.

scale: (1..100)
1 is the default scale, higher numbers zoom in on the texture giving a smoother more homogenous apperance.

blocky: (true|false)
Default is false for a natural looking texture, set to true and the texture becomes blocky, you can effectively see the blocks where the texture is recursively rendered.

wrapTexture: (true|false)
Default is false. This is useful if you are going to scroll the texture as the top and bottom match up and the left and right sides match so scrolling becomes seamless.

Example usage

var plugin = $("#canvas1").graphicsdemo({ graininess:2, scale:2, blocky:true, wrapTexture:true, colourMapFunction:ColourMap.clouds });

Notes: You can omit any param to get the default value. GraphicsDemo breaks the jQuery chainability. If your selector is a single canvas it returns a single graphics object for ease of use. If it is multiple canvases then it returns an array of graphics objects.

Advanced usage (animations)

The graphics demo plugin also bundles up a number of objects to help with common "demo" tasks. For example a graphics object, a screen, masks, colourmaps and more.


				// 1. Remove namespacing for ease of use

				var Step = GraphicsDemo.Step, ColourMap = GraphicsDemo.ColourMap, Mask = GraphicsDemo.Mask;

				

				
				// 2. Generate background fire animation, with a lower frame rate

				var animationSteps = [

					{ step:Step.generateTexture, params:{ screen:0, graininess:0, wrapTexture:true }},

					{ step:Step.generateTexture, params:{ screen:1, graininess:0, wrapTexture:true }},

					{ step:Step.scrollBy, params:{ screen:0, xAmount:1, yAmount:-1 }},

					{ step:Step.scrollBy, params:{ screen:1, xAmount:-1, yAmount:-2 }},

					{ step:Step.combine, params:{ source1:0, source2:1, dest:2 }},

					{ step:Mask.vertical, params: { screen:2, bgCol: {r:0, g:0, b:0, a:255 }, pos:1 }},

					{ step:Step.applyColourMap, params:{ screen:2, colourMapFunction:ColourMap.fire }},

					{ step:Step.renderScreen, params:{ screen:2 }},

					{ step:Step.goTo, params: { step:2 }}

				];

				

		
				// 3. Call graphicsdemo plugin with animation steps

				var plugin = $("#canvas1").graphicsdemo({ steps: animationSteps, fps:12 });

Here we...

1. Define some local variables to shorten the namespaces for ease of use and readabilty (don't do this if these objects conflict with another library).

2. Define our steps for the animation. This is just an array of objects, each with two attributes "step" and "params", the step to perform and the params it will take.

3. Call our plugin with the steps required and an optional fps param which stands for frames per second. Default is 24, we may want to slow it to reduce CPU load (e.g. if the canvas is large).

Our animation steps above are defined as...

Generate a random texture on screen 0
Generate a random texture on screen 1
Scroll screen 0 by (1, -1)
Scroll screen 1 by (-1, -2)
Combine screen 0 and 1 and put the result in screen 2
Apply a vertical mask to screen 2 (it vertically fades into the colour provided)
Apply a ColourMap to screen 2 (in this case make it look like fire)
Render screen 2 to the canvas
Goto step 2 (the third step above, the steps are zero based) and repeat. Adding a goto makes it an animation that will repeat forever.

The effect? Two random textures scrolling past each other and combined so that they are constantly changing (then a fire colouring applied that fades out to black at the top).

Steps

renderScreen, goTo, scrollBy, applyColourMap, average, combine, generateTexture

Provide more detail here.

Masks

vertical, horizontal, circular

Provide more detail here.

Providing custom steps or masks and accessing the underlying screen to putpixels etc

Provide more detail here.