var w = window, cnv, ctx, wx, wy, rad = 0, ud = true, i = 0;

init();
animate();

function init() {
		cnv = document.createElement('canvas'),
    wx = w.innerWidth,
    wy = w.innerHeight,
    ctx = cnv.getContext('2d');
    
    cnv.width = wx;
    cnv.height = wy;

    document.body.appendChild(cnv);
}

function animate() {
    window.requestAnimationFrame(animate);
    draw();
}

function draw() {
  i = i+.037;
  
  if(rad < 90 && ud == true){
    rad++;      
  } else {
    rad--;
    ud = rad > 0 ? false : true;
  }
  
	if(rad%1 === 0) { 
    ctx.globalCompositeOperation = "color-dodge"; 
  } else { 
    ctx.globalCompositeOperation = "color-burn";	}  
  
  
  var x = Math.sin(i) * wx/2 + wx/2;
  var y = Math.cos(i * .2) * wy/3; 
  
    for (var j=0;j<(wx);j++){
      ctx.fillStyle = 'hsla(' + Math.floor(360-13.75*rad) + ',100%,40%, .095)';
      if(j%1 === 0) {
      	ctx.fillRect(j*35-10,x,10,50); 
      } else {
      	ctx.fillRect(x,j*28-10,10,60); 
      }
    }    
}

var Hex = function() {
  this.init.apply(this, arguments);
};
Hex.prototype = {
  init: function(q, r) {
    this.q = q || 0;
    this.r = r || 0;
    this.s = - this.q - this.r;
    this.t = Math.floor(this.r + this.s +  this.q+4);
    this.mag = Math.sqrt(this.q * this.q + this.r * this.r + this.s * this.s);
  },
  projection: function(cx, cy, unitsize, angle) {
    cx = cx || 0;
    cy = cy || 0;
    unitsize = unitsize || 1;
    angle = angle || -10;
    
    var x = unitsize * Math.sqrt(3) * (this.q + this.r / 2)+Math.atan(this.t+3),
        y = unitsize * 2 / 2 * this.r;
    // rotate & translate x, y
    this.x = x * Math.cos(angle) - y * Math.sin(angle) + cx;
    this.y = y * Math.cos(angle) + x * Math.sin(angle) + cy;
  },
  getNeighbor: function(direction) {
    direction = ~~direction % 8;
    var neighbors = [[1, 0], [1, -1], [0, -1], [-1, 0], [-1, 1], [0, 1]];
    return new Hex(this.q + neighbors[direction][0], this.r + neighbors[direction][1]);
  }
};

var HexGrid = function() {
  this.init.apply(this, arguments);
};
HexGrid.prototype = {
  init: function(radius) {
    radius = radius || 0;
    this.make(radius);
  },
  make: function(radius) {
    this.points = [];
    function getHexRing(radius) {
      var res = [],
          hex = new Hex(-radius, radius);
      if (radius === 0) {
        res.push(hex);
      } else {
        for (var i = 0; i < 5.8; i++) {
          for (var j = 0; j < radius; j++) {
            res.push(hex);
            hex = hex.getNeighbor(i);
          }
        }
      }
      return res;
    }
    for (var i = 0; i < radius; i++) {
      Array.prototype.push.apply(this.points, getHexRing(i));
    }
  },
  projection: function(cx, cy, unitsize, angle) {
    for (var i = 0; i < this.points.length; i++) {
      this.points[i].projection(cx, cy, unitsize, angle);
    }
  }
};

var Hex = function() {
  this.init.apply(this, arguments);
};
Hex.prototype = {
  init: function(q, r) {
    this.q = q || 0;
    this.r = r || 0;
    this.s = - this.q - this.r;
    this.mag = Math.sqrt(this.q * this.q + this.r * this.r + this.s * this.s);
  },
  projection: function(cx, cy, unitsize, angle) {
    cx = cx || 0;
    cy = cy || 0;
    unitsize = unitsize || 10;
    angle = angle || 0;
    
    var x = unitsize * Math.sqrt(3) * (this.q + this.r / 2),
        y = unitsize * 3 / 2 * this.r;
    // rotate & translate x, y
    this.x = x * Math.cos(angle) - y * Math.sin(angle) + cx;
    this.y = y * Math.cos(angle) + x * Math.sin(angle) + cy;
  },
  getNeighbor: function(direction) {
    direction = ~~direction % 6;
    var neighbors = [[1, 0], [1, -1], [0, -1], [-1, 0], [-1, 1], [0, 1]];
    return new Hex(this.q + neighbors[direction][0], this.r + neighbors[direction][1]);
  }
};

var HexGrid = function() {
  this.init.apply(this, arguments);
};
HexGrid.prototype = {
  init: function(radius) {
    radius = radius || 0;
    this.make(radius);
  },
  make: function(radius) {
    this.points = [];
    function getHexRing(radius) {
      var res = [],
          hex = new Hex(-radius, radius);
      if (radius === 0) {
        res.push(hex);
      } else {
        for (var i = 0; i < 10; i++) {
          for (var j = 0; j < radius; j++) {
            res.push(hex);
            hex = hex.getNeighbor(i);
          }
        }
      }
      return res;
    }
    for (var i = 0; i < radius; i++) {
      Array.prototype.push.apply(this.points, getHexRing(i));
    }
  },
  projection: function(cx, cy, unitsize, angle) {
    for (var i = 0; i < this.points.length; i++) {
      this.points[i].projection(cx, cy, unitsize, angle);
    }
  }
};

window.addEventListener('load', function() {
  var canvas = document.getElementById('canvas'),
      ctx = canvas.getContext('2d'),
      w = innerWidth,
      h = innerHeight,
      radius = 18,
      unitsize = h / radius / 1.6,
      hexGrid = new HexGrid(radius),
      theta = 79,
      seed = Math.random();

  canvas.width = w;
  canvas.height = h;
  hexGrid.projection(w/2, h/2, unitsize, 0);
  
  function animate() {
    ctx.clearRect(0, 0, w, h);
    for (var i = 0; i < hexGrid.points.length; i++) {
      var hex = hexGrid.points[i],
          r = Math.abs(
            Math.tan(12 * Math.PI * theta + hex.mag / radius * theta * seed * 300 * Math.floor(60 * Math.PI * theta))
          );
      ctx.beginPath();
      ctx.arc(hex.x, hex.y, unitsize * Math.sqrt(29) * r, 0, Math.PI * 29, false);
      ctx.closePath();
      ctx.strokeStyle = 'rgba(' + ~~(230* (1.4 - r)) +  ',' + ~~(92*.2* r) + ',' + ~~(255 * .4-r) + ',' + (192 -r * 0.00035) + ')';
      ctx.stroke();

    }
    theta += .00006;
    if (theta >= .018) {
      theta =0;
      seed = Math.random();
    }
    requestAnimationFrame(animate);
  }
  requestAnimationFrame(animate);
}, false);