New-and-improved Collide-O-Scope, now with requestAnimationFrame goodness!

collide-o-scope.js

// new and improved collide-o-scope

(function (w, d, n, a) {
  var $ = w[a.k] = {
    'w': w, 'd': d, 'n': n, 'a': a, 's': {},
    'f': (function () {
      return {
        listen : function (el, ev, fn) {
          if (typeof $.w.addEventListener !== 'undefined') {
            el.addEventListener(ev, fn, false);
          } else if (typeof $.w.attachEvent !== 'undefined') {
            el.attachEvent('on' + ev, fn);
          }
        },
        click: function (v) {
          var t = v || $.w.event, el = null;
          if (t.target) {
            el = (t.target.nodeType === 3) ? t.target.parentNode : t.target;
          } else {
            el = t.srcElement;
          }
        },
        getRnd: function(r, m) {
          if (!r) { r = 1; }
          if (!m) { m = 0; }
          return Math.floor(Math.random() * r) + m;
        },
        circ : function(x, y, r) {
          $.c.beginPath();
          $.c.arc(x, y, r, 0, $.a.p, true);
          $.c.closePath();
          $.c.fill();    
        },
        drawViewsOf : function(c) {      
          $.c.fillStyle = 'rgba(' + c.r + ',' + c.g + ',' + c.b + ',' + c.a + ')'; 
          $.f.circ(c.x, c.y, c.z);
          $.f.circ($.a.width - c.x, c.y, c.z);
          $.f.circ(c.x, $.a.height - c.y, c.z);
          $.f.circ($.a.width - c.x, $.a.height - c.y, c.z);
        }, 
        draw: function() {
          // set fill style to translucent black
          $.c.fillStyle = 'rgba(0,0,0,' + $.a.backgroundAlpha + ')';
          // fill background
          $.c.fillRect(0, 0, $.a.width, $.a.height);   
          // big loop: 
          for (var i = 0, n = $.v.actor.length; i < n; i = i + 1) {
            var d = $.v.actor[i];
            if (!d.x || !d.y) {
              // this is a new actor
              d.x = $.a.width / 2;
              d.y = $.a.height / 2;
              d.dx = $.f.getRnd(10, 1);
              d.dy = $.f.getRnd(10, 1);
              d.r = $.f.getRnd(255);
              d.g = $.f.getRnd(255);
              d.b = $.f.getRnd(255);
              d.k = $.f.getRnd(5, 3);
              d.w = $.f.getRnd($.a.ringWidth, 10);
            }
            // draw each ring of this actor
            for (var j = d.k; j > 0; j = j - 1) {
              d.a = j * $.a.ringAlpha;
              d.z = j * d.w;
              $.f.drawViewsOf(d);
            }

            // change position
            d.y = d.y + d.dy;
            d.x = d.x + d.dx;
            
            if (d.x > $.a.width || d.x < 0) {
              // we are too far left or right
              d.dx = 1 - d.dx;
              d.x = d.x + d.dx;
            }

            if (d.y > $.a.height || d.y < 0) {
              // we are too high or low
              d.dy = 1 - d.dy;
              d.y = d.y + d.dy;
            }

          }

        },
        animate: function () {
          $.f.draw();
          $.w.requestAnimationFrame($.f.animate);
        },
        init : function () {
          $.w.requestAnimationFrame = $.w.requestAnimationFrame 
                                   || $.w.mozRequestAnimationFrame
                                   || $.w.webkitRequestAnimationFrame
                                   || $.w.msRequestAnimationFrame;


          var c = $.d.getElementsByTagName('CANVAS')[0];
          
          $.a.height = c.offsetHeight;
          $.a.width = c.offsetWidth;
          
          $.c = c.getContext('2d');

          /* 
          if ($.w.devicePixelRatio && $.w.devicePixelRatio >= 2) {
            $.v.resolution = 2;
          }
          */

          $.v = {'actor': []};
          
          for (var i = 0; i < $.a.actorCount; i = i + 1) {
            $.v.actor.push({});
          }

          $.f.listen(c, 'click', $.f.click);
          $.f.animate();
        }
      };
    }())
  };
  $.f.init();
}(window, document, navigator, {
  'k': 'COLLIDE_' + new Date().getTime(),
  'p': Math.PI * 2,
  'actorCount': 20,
  'backgroundAlpha': .2,
  'ringAlpha': .01,
  'ringWidth': 10
}));