Fire JS Bin - 3DGalaxy

// Zachary Johnson
// http://www.zachstronaut.com
// August 2010
(function () {
  var e = 800;
  var w = 600;
  var u = [];
  var t = [];
  var s = [];
  var x = [];
  var a = [];
  var j;
  var z = Math.PI * 2;
  var i = 250;
  var f = -5;
  var h = 0.95;
  var l = false;
  var k = false;
  var r = 0;
  var p = 0;
  var D = false;
  var c = false;
  var g = 1;
  var F = 1;
  var b;
  var y;
  var m = false;
  window.onload = B;

function B() {
    var G = document.getElementById("safari");
    if (getComputedStyle(G, "").getPropertyValue("display") == "inline") {
      m = true
    }
    b = document.getElementById("thecanvas");
    if (b) {
      if (b.getContext) {
        setTimeout(A, 3500);
        C();
        y = b.getContext("2d");
        y.translate(e / 2 - 25, w / 2 - 25);
        o();
        q(-6, 0);
        n()
      }
    }
  }
  function A() {
    document.getElementById("instructions").style.left = "-9999px"
  }
  function o() {
    document.body.addEventListener("mousedown", L, false);
    document.body.addEventListener("mouseup", N, false);
    document.body.addEventListener("mousemove", K, false);

function L(P) {
      P.stopPropagation();
      P.preventDefault();
      H(P.pageX, P.pageY)
    }
    function N(P) {
      P.stopPropagation();
      P.preventDefault();
      O(P.pageX, P.pageY)
    }
    function K(P) {
      P.stopPropagation();
      P.preventDefault();
      if (D) {
        M(P.pageX, P.pageY)
      }
    }
    document.body.addEventListener("touchmove", function (P) {
      P.preventDefault()
    }, false);
    document.body.addEventListener("touchstart", G, false);
    document.body.addEventListener("touchend", J, false);
    document.body.addEventListener("touchmove", I, false);

function G(P) {
      if (!c) {
        c = true;
        document.body.removeEventListener("mousedown", L);
        document.body.removeEventListener("mouseup", N);
        document.body.removeEventListener("mousemove", K)
      }
      if (P.touches.length == 1) {
        H(P.changedTouches[0].pageX, P.changedTouches[0].pageY)
      }
    }
    function J(P) {
      O(P.changedTouches[0].pageX, P.changedTouches[0].pageY)
    }
    function I(P) {
      if (P.touches.length == 1) {
        M(P.changedTouches[0].pageX, P.changedTouches[0].pageY)
      }
    }
    document.body.addEventListener("gesturestart", function (P) {
      P.preventDefault()
    }, false);
    document.body.addEventListener("gesturechange", function (P) {
      F = g * P.scale
    }, false);
    document.body.addEventListener("gestureend", function (P) {
      g = F
    }, false);

function H(P, Q) {
      A();
      D = true;
      r = 0;
      p = 0;
      l = P;
      k = Q
    }
    function O(P, Q) {
      D = false;
      if (Math.abs(r) > 5 || Math.abs(p) > 5) {
        q(r, p)
      }
    }
    function M(P, Q) {
      r = (l - P);
      p = (k - Q);
      r *= 0.5;
      p *= 0.5;
      h -= p / 100;
      f += r / 100;
      l = P;
      k = Q
    }
  }
  function q(I, H) {
    if (I > 25) {
      I = 25
    } else {
      if (I < -25) {
        I = -25
      }
    }
    if (H > 25) {
      H = 25
    } else {
      if (H < -25) {
        H = -25
      }
    }
    var G;
    if (D) {
      G = 0.5
    } else {
      G = 0.98
    }
    I *= G;
    H *= G;
    h -= H / 100;
    f += I / 100;
    if (Math.abs(I) > 0.001 || Math.abs(H) > 0.001) {
      setTimeout(function () {
        q(I, H)
      }, 10)
    }
  }
  var v = 0;

function n() {
    y.clearRect(-e, -w, e * 2, w * 2);
    if (!D) {
      f -= 0.01
    }
    if (h > 1) {
      h = 1
    } else {
      if (h < 0.5) {
        h = 0.5
      }
    }
    if (f < -z * 2) {
      f = 0;
      v += 3;
      if (v > 3) {
        v = 0
      }
    } else {
      if (f > 0) {
        f = -z * 2;
        v -= 3;
        if (v < 0) {
          v = 3
        }
      }
    }
    var S = Math.sin(h);
    var K = Math.cos(h);
    var R = Math.sin(f);
    var I = Math.cos(f);
    var Q = 0;
    var G = 1;
    var P, O, N, M, L, V, T, ab, aa, H;
    var Z;
    var Y = j;
    var X = [];
    while (Y--) {
      P = u[Y];
      O = t[Y];
      N = s[Y];
      T = I * N - R * P;
      V = R * N + I * P;
      M = K * O - S * T;
      L = S * O + K * T;
      ab = V;
      aa = M;
      H = i / (i + T);
      P = ab * H;
      O = aa * H;
      N = T;
      var J = Math.round(1000 * H);
      if (!X[J]) {
        X[J] = []
      }
      if (Y < f * -400) {
        Z = v + 0
      } else {
        if (Y < f * -800) {
          Z = v + 1
        } else {
          Z = v + 2
        }
      }
      X[J].push([P, O, H * x[Y], Z])
    }
    var W = 0;
    var U;
    var Z = X.length;
    while (Y < Z) {
      if (X[Y]) {
        W = X[Y].length;
        while (W--) {
          U = X[Y][W];
          y.save();
          y.translate(U[0], U[1]);
          y.scale(U[2], U[2]);
          E(U[3]);
          y.restore()
        }
      }
      Y++
    }
    setTimeout(n, 25)
  }
  function E(G) {
    if (G == 2 || G == 3) {
      y.fillStyle = "#f60"
    } else {
      if (G == 1 || G == 4) {
        y.fillStyle = "#ffd"
      } else {
        if (G == 0 || G == 5) {
          y.fillStyle = "#20f"
        }
      }
    }
    if (m) {
      y.globalAlpha = 0.05;
      d(15);
      d(13);
      d(11)
    } else {
      y.globalAlpha = 0.1;
      d(13)
    }
    if (G == 2 || G == 3) {
      y.fillStyle = "#fc6"
    } else {
      if (G == 1 || G == 4) {
        y.fillStyle = "#fdf"
      } else {
        if (G == 0 || G == 5) {
          y.fillStyle = "#69f"
        }
      }
    }
    y.globalAlpha = 0.8;
    d(4)
  }
  function d(G) {
    y.beginPath();
    y.arc(0, 0, G, 0, z, "clockwise");
    y.fill()
  }
  function C() {
    var G, L, J, I;
    var H = 150;
    if (m) {
      H = 300
    }
    var K = 0;
    while (H--) {
      if (m && H == 0 && K < 1) {
        K++;
        H = 150
      }
      u.push(17500 * Math.cos(H * 0.8) / (H + 100) - 5 + Math.random() * 10);
      t.push(-175 + -25 + Math.round(Math.random() * 25 * 2));
      s.push(17500 * Math.sin(H * 0.8) / (H + 100) - 5 + Math.random() * 10);
      x.push(0.7 + Math.random() * 0.3);
      a.push(1)
    }
    j = u.length
  }
})();

html, body { margin:0; padding:0; background:#000; text-align:center; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); -webkit-user-select:none; }
canvas { position:relative; margin:0 auto; cursor:pointer; z-index:1; }
#instructions { position:relative; top:250px; margin:0 auto; padding:7px; width:300px; color:#fff; background:#000; background:rgba(0, 0, 0, 0.75); text-align:center; z-index:2; font-family:sans-serif; font-size:14px; line-height:21px; -webkit-border-radius:8px; -moz-border-radius:8px; -o-border-radius:8px; -ms-border-radius:8px; border-radius:8px; }
.badgestronaut { position:absolute; left:10px; top:10px; width:225px; height:50px; z-index:2; }
.badgestronaut a { display:block; width:100%; height:100%; text-indent:-999em; background:url(/attach/zachstronaut-badge.gif) top left no-repeat; opacity:0.5; }
.badgestronaut a:hover { opacity:1.0; border-bottom:2px solid #0f0; }
#safari { display:none; }
@media screen and (min-device-width:1025px) {
  #ios { display:none; }
  #safari { display: inline; }
}