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() {
  	i++;
    window.requestAnimationFrame(animate);
    draw(ctx, wx, wy, i);
}

function draw(dc, width, height, iN){
  
  rad = rad < 720 ? rad + 1 : 0;  

  var imod = rad;  
  var phi = (Math.sqrt(5)+1)/2 - 1;
  var golden_angle = phi*2*Math.PI;
  var gco = imod%36;
  var arcRad = 10;
  var cx = width/2;
  var cy = height/2;
  
  switch (gco) {
    case 12:
  		dc.globalCompositeOperation = 'color-dodge';  
    case 24:
  		dc.globalCompositeOperation = 'source-atop';       
      break;     
		default:
  		dc.globalCompositeOperation = 'normal';
  }
  
  dc.fillStyle='hsla('+imod+', 100%, 50%, .125)';  
  
  for (var i = 0; i <= imod; ++i) {
    dc.translate(cx, cy);
    dc.rotate(Math.PI/imod);
    dc.translate(-cx, -cy);      
    dc.beginPath();
    var ratio = i/imod;
    var angle = i*golden_angle;
    var spiral_rad = ratio * cx;
    var x = cx + Math.cos(angle) * spiral_rad;
    var y = cy + Math.sin(angle) * spiral_rad;
    dc.arc(x, y, arcRad, 0, 2*Math.PI, false);
    dc.fill();
  }
}