TV fuzz

by Adam Granger

HTML

<div id="tv">

</div>

CSS

#tv {
   width: 300px;
   height: 300px;
}

JavaScript

function TvFuzz (target) {
    var canvas = $("<canvas></canvas>");
    this.width = target.width();
    this.height = target.height();
    canvas.attr({width:this.width});
    canvas.attr({height:this.height});
    var context = canvas[0].getContext("2d");
    target.append(canvas);
    
    var imageData = context.getImageData(0, 0, this.width, this.height);
    var data = imageData.data;
    this.count = 0;
    
    var update = function() {
        var inc = 1 + Math.floor(10 * Math.random());
        for(var i = 0, n = data.length; i < n;) {
        var color = Math.floor(255 * Math.random());
            var rgb = [color, color, color];

            for (var r = 1; r <= 3; r++) {
            data[i++] = rgb[0];
            data[i++] = rgb[1];
            data[i++] = rgb[2];
            data[i++] = 255; 
        }            
        }
        context.putImageData(imageData, 0, 0); 
        console.log(color + " " + inc);
        count++;  
        setTimeout(update, 50);    
    };
    setTimeout(update, 50);
    
}

var tv = TvFuzz($("#tv"));