boingPic: Sólo un experimento

Que nadie se crea que esto tiene alguna utilidad práctica inmediata, es para pasar el rato, un experimento que usa jQuery y que no tiene mayores pretensiones. Creado por kelvinluck.com/.

¿Será que todo tiene que tener alguna utiidad?

<style>
  /* este es el formulario superior */
  #boing-container { text-align: center; }
  #boing-container input {
    background: #000;
    border: 2px solid #444;
    border-radius: 4px;
    color: #CCC;
    padding: 5px;
  }
  #boing-container input[type=text] {
    text-align: center;
    width: 400px;
  }
  #boing-container input[type=submit]{
    background-image: -moz-linear-gradient(#888, #222);
    background-image: -webkit-linear-gradient(#888, #222);
    background-image: -o-linear-gradient(#888, #222);
    background-image: -ms-linear-gradient(#888, #222);
    background-image: linear-gradient(#888, #222);
    cursor: pointer;
    width: 80px;
  }
  #boing-container input[type=submit].loading{visibility:hidden;}
  .error{
    color: #F00;
    font-style: italic;
    margin: 5px 0;
  }
  /* este es el contenedor con la imagen y el efecto */
  #picHolder{
    height: 200px;
    margin: 50px auto;
    position: relative;
    width: 200px;
  }
  .block {position: absolute;}
  .default { /* los cuadraditos iniciales */
    border: 1px solid #FFF;
    height: 18px;
    width: 18px;
  }
</style>

<script>
  // recordar que se debe tener jQuery cargado */
  // boingPic.js - a javascript experiment by Kelvin Luck - http://www.kelvinluck.com/
  $(function(){
      var divs;
      var $picHolder = $('#picHolder');
      function initGrid(w, h, backgroundImage){
        $picHolder.empty();
        $picHolder.css({'width' : w,'height' : h});
        w /= 10; h /= 10;
        divs = [];
        for (var i=0; i<10; i++) {
          var t = i * h; var l = 0;
          for (var j=0; j<10; j++){
            var css = {top:t, left:l};
            if (backgroundImage){
              css.background = 'url(' + backgroundImage + ') no-repeat -' + l + 'px -' + t + 'px';
              css.width = w; css.height = h;
            }
            var d = $('<div class="' + (backgroundImage ? '' : 'default ') + 'block" />').css(css);
            d.data('t', t); d.data('l', l);
            divs.push(d);
            $picHolder.append(d);
            l+=w;
          }
        }
      }
      initGrid(200, 200);
      var mouseX = 1000; var mouseY = 1000;
      $(document).bind(
        'mousemove',
        function(e){
          var po = $picHolder.offset();
          mouseX = e.pageX - po.left; mouseY = e.pageY - po.top;
        }
      );
      var force = 1500;
      setInterval(
        function(){
          var po = $picHolder.offset();
          for (var i=0; i<divs.length; i++) {
            var $d = divs[i];
            var o = $d.offset();
            var x = o.left - po.left; var y = o.top - po.top;
            var xDif = mouseX - x; var yDif = mouseY - y;
            var distance = Math.sqrt(xDif*xDif+yDif*yDif);
            var tempX = x - (force/distance)*(xDif/distance); var tempY = y - (force/distance)*(yDif/distance);
            $d.css('left', ($d.data('l') - x)/2+tempX); $d.css('top', ($d.data('t') - y)/2+tempY);
          }
        },
        100
      );
      $imageUrl = $('#imageUrl');
      $imageUrl.bind(
        'focus',
        function(e){if ($imageUrl.val() == 'direccion url de una imagen y click en cargar ...') {$imageUrl.val('');}}
      ).bind(
        'blur',
        function(e){if ($imageUrl.val() == '') {$imageUrl.val('direccion url de una imagen y click en cargar ...');}}
      );
      var $submitButton = $('#loadImage');
      $submitButton.bind(
        'click',
        function(e){
          $submitButton.addClass('loading');
          var i = new Image();
          $(i).bind(
            'load',
            function(e){
              $submitButton.removeClass('loading');
              var w = i.width; var h = i.height;
              initGrid(w, h, $imageUrl.val());
            }
          ).bind(
            'error',
            function(){
              $submitButton.removeClass('loading');
              var $errorMessage = $('<div class="error">la URL de la imagen no es valida</div>');
              $submitButton.after($errorMessage);
              $errorMessage.hide().slideDown('normal').animate(
                  {'opacity': .9}, 2000
                ).slideUp(
                  'normal', function(){$errorMessage.remove();}
                );
              initGrid(20, 20);
            }
          );
          i.src = $imageUrl.val() || 'theresnoimagebythatname!';
          return false;
        }
      );
    }
  );
</script>

<div id="boing-container">
<form>
<input type="text" id="imageUrl" value="direccion url de una imagen y click en cargar ..." />
<input type="submit" id="loadImage" value="cargar" />
</form>
</div>

<div id="picHolder"></div>