A rather pointless (though perhaps someone will have a need for such a thing one day) simple 2KB library allowing you to add a old TV like noise/static effect through a canvas. It uses offscreen prerendering and tiling for increased performance.
Please note 2: the contents of the container elements will be inserted into canvas tag as a fallback in case something went terribly wrong.
StaticGen.init('#selector', {
width : 0, /* main canvas width. Defaults to container width */
height : 0, /* main canvas height. Defaults to container height */
tileWidth : 200, /* unique tile width */
tileHeight : 200, /* unique tile height */
totalFrames : 4, /* number of total static frames */
fps : 8, /* errr… number of frames per second? */
pixelWidth : 2, /* single static grain width */
pixelHeight : 2, /* single static grain height */
stretchH : 8, /* amount of horizontal stretching applied to each static grain. Possible options: 'fit' to fit container width or int>1 */
stretchV : 1, /* amount of vertical stretching applied to each static grain. Possible options: 'fit' to fit container width or int>1 */
scanLines : true, /* leave a 1px high gap between {pixelHeight}px pixel rows */
randomizeRows : true /* should each row be randomly offset by a fraction of {pixelWidth}? */
});
Redraws the canvas using a new set of options without interfering with the DOM.
StaticGen.redraw({
tileWidth : 300,
tileHeight : 100
});
Pause the animation.
StaticGen.pause();
Resumes paused animation.
StaticGen.resume();
https://github.com/criography/StaticGen/blob/master/example/playground.html
https://github.com/criography/StaticGen/blob/master/example/tv.html
Photo used in TV example was taken by pj_in_oz