$(function(){

  var canvas = $("#paper")[0], 
      c = canvas.getContext("2d"), 
      size = canvas.width,
      verts = [],
      sqrt2 = Math.sqrt(2),
      pi = Math.PI,
      pi23 = 2 * Math.PI / 3,
      step = Math.PI / 20,
      centerX = size / 2,
      centerY = size / 2,
      scalar = size * 0.15,
      rotX = 0, rotY = 0,
      perspective = 360, 
      depth,
      currX, currY,
      radius = 160, x, y, z,
      TWO_PI = Math.PI * 2,
      angleA = 0, angleB = 0;

  function point3d(x, y, z){
    var cosX = Math.cos(rotX),
        cosY = Math.cos(rotY),
        sinX = Math.sin(rotX),
        sinY = Math.sin(rotY);

    var posZ = z * cosX - x * sinX,
        posX = z * sinX + x * cosX,
        posY = y * cosY - posZ * sinY,
        posZ = y * sinY + posZ * cosY;
    depth = 1/(posZ/perspective+1);

    currX = posX * depth + centerX;
    currY = posY * depth + centerY;
  }

  for (var u= -pi; u<pi; u+=step) {
    for (var v= -pi; v<pi; v+=step) {
      // from here http://local.wasp.uwa.edu.au/~pbourke/geometry/hexatorus/
      var px = Math.sin(u) / Math.abs(sqrt2+ Math.cos(v)),
          py = Math.sin(u+pi23) / Math.abs(sqrt2 +Math.cos(v + pi23)),
          pz = Math.cos(u-pi23) / Math.abs(sqrt2 +Math.cos(v - pi23));
      verts.push(px * scalar);
      verts.push(py * scalar);
      verts.push(pz * scalar);
    }
  }

  c.fillStyle = "black";
  c.fillRect(0, 0, size , size);

  pixels = c.getImageData(0, 0, size, size);

  setInterval(function(){
    c.fillStyle = "rgba(0,0,0,0.15)";
    c.fillRect(0, 0, size , size);

    var leng = verts.length;
    rotX += 0.02;
    rotY += 0.02;
    c.fillStyle = "rgba(255,255,255,1)";
    for (var i = 0; i < leng; i+=3){
      point3d(verts[i], verts[i + 1], verts[i + 2]);
      c.fillRect(currX, currY, 1, 1);
    }
  }, 30);



});