jQuery background noise generator

by jrweinb

HTML

<div id="sample"></div>

CSS

div#sample {
    width:100px;
    height:100px;
}

JavaScript

// http://forrst.com/posts/jQuery_background_noise_generator-muq
jQuery.fn.noisy = function(opacity) {
    if (typeof(opacity) === 'undefined') {
        opacity = 0.1;
    }
    var hex1 = ["f","e","d","c","b","a","c","e","a","f"];
var hex2 = [0,1,2,3,4,5,6,7,8,9];
var hex1Spot = 0;
var hex2Spot = 0;

    var wrapper = jQuery(this).wrapInner('<div />').children();
    var canvas = document.createElement("canvas");
    canvas.width = 100;
    canvas.height = 100;
    var ctx = canvas.getContext("2d");
    var x, y;
    var v = 175;
    setInterval(function(){
    for (x = 0; x < canvas.width; x += 1) {
        for (y = 0; y < canvas.height; y += 1) {
            var particle = "particle" + x;
    var particle2 = "$('#particle" + x + "')";
    var particle_color_base = hex1[hex1Spot] + hex2[hex2Spot];
    var particle_color_hex = "#" + particle_color_base + particle_color_base + particle_color_base;
            var r = Math.floor(Math.random() * v);
            var g = Math.floor(Math.random() * v);
            var b = Math.floor(Math.random() * v);
            ctx.fillStyle = particle_color_hex;
            ctx.fillRect(x, y, 1, 1);
             hex1Spot = Math.floor((Math.random()*10)) || 2;
    hex2Spot = Math.floor((Math.random()*10)) || 1;

        }
    }

    wrapper.css({
        'background-image': "url(" + canvas.toDataURL("image/png") + ")",
        width: '100%',
        height: '100%'
    });
    },200);
};

jQuery('#sample').noisy(0.3);