var width = innerWidth,
    height = innerHeight,
    overlap = 10,
    numPoly = 25

var canvas = d3.select('body').append('canvas')
    .attr('width', width)
    .attr('height', height)

var ctx = canvas.node().getContext('2d')

var curColor = '#000'

drawPolygons('#000')
function drawPolygons(color){
  var vertices = d3.range(numPoly).map(function(d) {
    return [Math.random()*width, Math.random()*height] })

  var voronoi = d3.geom.voronoi().clipExtent([[0, 0], [width, height]])
  var polygons = voronoi(vertices)

  var q = queue(overlap)

  _.sortBy(polygons, function(d){ return d3.min(d, ƒ(0)) })
    .forEach(function(d, i){ q.defer(drawSpiral, d, i, color) })  

  q.awaitAll(function(){ drawPolygons(color == '#000' ? '#fff' : '#000') })
}

function drawSpiral(polygon, i, color, cb){
  var duration = 0
  var points = polygon.slice()
  var count = 0

  setTimeout(drawNext, i < overlap ? i*100 : 0)  

  function drawNext(){
    var curPoint = points.shift()
    var nextPoint = points[0]

    if (curColor != color) ctx.strokeStyle = curColor = color
    ctx.beginPath()
    ctx.lineTo(curPoint[0],  curPoint[1]) 
    ctx.lineTo(nextPoint[0], nextPoint[1]) 
    ctx.stroke()

    var percent = 4/dist(curPoint, nextPoint)
    var x = curPoint[0]*(1 - percent) + nextPoint[0]*percent
    var y = curPoint[1]*(1 - percent) + nextPoint[1]*percent

    if (dist([x, y], nextPoint) > 1) points.push([x, y])

    points.length > 2 && count++ < 500 ? setTimeout(drawNext, duration) : cb()
  } 
}

function dist(a, b){
  return Math.sqrt(
    Math.pow(a[0] - b[0], 2) + 
    Math.pow(a[1] - b[1], 2))
}