Entry for JS1K Contest

js1k-squares.js

/*! Animated Squares
 *
 * @author Livingston Samuel
 * @license MIT License
 * @url - http://gist.github.com/515271
 * Modified version of Squares - http://github.com/livingston/Squares
 * Original idea by squaredesign - http://squaredesign.com/lab/crazy-squares/
 *
 */

;(function (win, doc, Math) {
  var grid = doc.body,
      getSquare = (function () {
        var div = doc.createElement('div');
        div.style.width = '50px';
        div.style.height = '50px';
        div.style.cssFloat = 'left';
        div.style.marginLeft = '1px';
        
        return function () {
          return div.cloneNode(false);
        };
      }()),
      randomColor = function () {
        var hex = Math.round(0xffffff * Math.random());

        return 'rgb(' + (hex >> 16) + ',' + (hex >> 8 & 255) + ',' + (hex & 255) + ')';
      },
      getGrid = function (col, row) {
        var cols = col || 10,
            rows = row || 6,
            l = cols * rows,
            frag = doc.createDocumentFragment();
            
        while (l--) {
          temp = getSquare();
          temp.style.backgroundColor = randomColor();
          frag.appendChild(temp);
        }
        
        return frag;
      },
      pulsate = function () {
        var squares = grid.getElementsByTagName('div'),
            len = squares.length;
        
        return function () {
          var randomSquare = squares.item(Math.floor(len * Math.random()));

          randomSquare.style.backgroundColor = randomColor();
        };
      },
      initialize = function () {
        var row = Math.floor((win.innerHeight || doc.documentElement.clientHeight)/50),
            col = Math.floor((win.innerWidth || doc.documentElement.clientWidth)/50);

        grid.innerHTML = '';
        grid.style.backgroundColor = '#fff';
        grid.style.margin = '0';
        grid.style.padding = '0';
        grid.style.overflow = 'hidden';
        grid.appendChild(getGrid(col, row));
        
        grid.addEventListener('mouseover', pulsate(), false);
      };
      
      initialize();
}(window, document, Math));

js1k-squares.min.js

(function(f,d,c){var b=d.body,i=function(){var a=d.createElement("div");a.style.width="50px";a.style.height="50px";a.style.cssFloat="left";a.style.marginLeft="1px";return function(){return a.cloneNode(false)}}();function g(){var a=c.round(16777215*c.random());return"rgb("+(a>>16)+","+(a>>8&255)+","+(a&255)+")"}function j(a,e){for(var k=(a||10)*(e||6),h=d.createDocumentFragment();k--;){temp=i();temp.style.backgroundColor=g();h.appendChild(temp)}return h}function l(){var a=b.getElementsByTagName("div"),
e=a.length;return function(){a.item(c.floor(e*c.random())).style.backgroundColor=g()}}(function(){var a=c.floor((f.innerHeight||d.documentElement.clientHeight)/50),e=c.floor((f.innerWidth||d.documentElement.clientWidth)/50);b.innerHTML="";b.style.backgroundColor="#fff";b.style.margin="0";b.style.padding="0";b.style.overflow="hidden";b.appendChild(j(e,a));b.addEventListener("mouseover",l(),false)})()})(window,document,Math);