JQuery Noise Gen

Canvas

by jrweinb

HTML

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

CSS

.noise_cont{
    width:200px;
    height:300px;
 
}

.particle{
    width:2px;
    height:2px;
    background:#e8e8e8;
    margin:0px;
    padding:0px;
    border:none;
    outline:none;
    float:left;
    position:relative;
  
}



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 = 1000;
    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, 10, 10);
            hex1Spot = Math.floor((Math.random()*10)) || 2;
            hex2Spot = Math.floor((Math.random()*10)) || 1;

        }
    }

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

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