Strobe Effect

Display a mosaic of strobing squares.

HTML

<div id=header>
    <button id=start>Start</button>
    <button id=pause>Pause</button>
    <button id=stop>Stop</button>
</div>
<div id=content></div>

CSS

body {
    margin: 0;
}
button{
    cursor: pointer;
}
#header{
    position: absolute;
    top: 0;
    width: 100%;
    height: 26px;
    background-color: silver;
}
#content{
    position: absolute;
    top: 26px;
    bottom: 0;
    width: 100%;
    background-color: black;
}
.strobe {
    float: left;
    margin: 0;
    padding: 0;
    width: 50px;
    height: 50px;
    -webkit-transition: background-color 1s ease-in;
    -moz-transition: background-color 1s ease-in;
    -ms-transition: background-color 1s ease-in;
    -o-transition: background-color 1s ease-in;
}

JavaScript

/* 
Click on buttons to start / pause / stop the strobe effect.
Key mapping:
    R = red hue
    G = green hue
    B = blue hue
    S = greyscale
    other = multicolor 
*/

function strobe(){
    var color = this.strobeColor;
    $('.strobe').each(function(){
        var r, g, b;
        if(color=='r'){
            r = Math.floor(Math.random() * 256);
            g = Math.floor(Math.random() * 0);
            b = Math.floor(Math.random() * 0);
        }
        else if(color=='g'){
            r = Math.floor(Math.random() * 0);
            g = Math.floor(Math.random() * 256);
            b = Math.floor(Math.random() * 0);
        }
        else if(color=='b'){
            r = Math.floor(Math.random() * 0);
            g = Math.floor(Math.random() * 0);
            b = Math.floor(Math.random() * 256);
        }
        else if(color=='s'){
            r = Math.floor(Math.random() * 256);
            g = r;
            b = r;
        }
        else if(color=='rgb'){
            r = Math.floor(Math.random() * 256);
            g = Math.floor(Math.random() * 256);
            b = Math.floor(Math.random() * 256);
        }
        $(this).css('background-color', 'rgb('+r+','+g+','+b+')');
    });
}
function build(size){
    var w = $('#content').width();
    var h = $('#content').height();
    var nbW = Math.floor(w/size);
    var nbH = Math.floor(h/size);
    for(i=0;i<(nbW*nbH);i++){
        $('#content').append('<div class="strobe"></div>');
    }
}
function start(){
    if(!this.strobeColor) this.strobeColor = 'rgb';
    workerActive = true;
}
function pause(){
    workerActive = false;
}
function stop(){
    workerActive = false;
    $('.strobe').css('background-color', 'black');
}

// BUILD //

build(50);

// WORKER //

var worker;
var workerActive = false;
if(worker) clearInterval(worker);
worker = self.setInterval(function(){
    if(workerActive) strobe();
}, 1000);

// BUTTONS //

$('#start').click(function(){
    start();
});
$('#pause').click(function(){
 ...