Voronoi Spirals III

forked from mbostock's block: Voronoi Spirals III

<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="960" height="960"></canvas>
<script src="https://d3js.org/d3.v4.0.0-alpha.28.min.js"></script>
<script>

var canvas = d3.select("canvas").node(),
    context = canvas.getContext("2d"),
    width = canvas.width,
    height = canvas.height;

var sites = d3.range(100).map(function() { return [Math.random() * width, Math.random() * height]; }),
    cells = d3.voronoi().size([width, height]).polygons(sites),
    formatHex = d3.format("02x");

var colors = d3.range(256)
    .map(d3.scaleRainbow().domain([0, 255]))
    .map(function(c) { return d3.rgb(c); });

for (var i = 0; i < 256; ++i) {
  context.beginPath();
  cells.forEach(function(cell) {
    drawCell(cell);
    var p0 = cell.shift(),
        p1 = cell[0],
        t = Math.min(0.5, 4 / distance(p0, p1)),
        p2 = [p0[0] * (1 - t) + p1[0] * t, p0[1] * (1 - t) + p1[1] * t];
    cell.push(p2);
  });
  context.fillStyle = "#" + formatHex(i) + "0000";
  context.fill();
}

var source = context.getImageData(0, 0, width, height).data,
    targetBuffer = context.createImageData(width, height),
    target = targetBuffer.data;

for (var i = 0, y = 0; y < height; ++y) {
  for (var x = 0; x < width; ++x, i += 4) {
    target[i + 0] =
    target[i + 1] =
    target[i + 2] =
    target[i + 3] = 255;
  }
}

context.clearRect(0, 0, width, height);

d3.timer(function(elapsed) {
  for (var i = 0, y = 0; y < height; ++y) {
    for (var x = 0; x < width; ++x, i += 4) {
      var c = colors[Math.floor(source[i] + elapsed / 10) % 256];
      target[i + 0] = c.r;
      target[i + 1] = c.g;
      target[i + 2] = c.b;
    }
  }
  context.putImageData(targetBuffer, 0, 0);
});

function drawCell(cell) {
  context.moveTo(cell[0][0], cell[0][1]);
  for (var i = 1, n = cell.length; i < n; ++i) context.lineTo(cell[i][0], cell[i][1]);
  context.closePath();
}

function distance(a, b) {
  var dx = a[0] - b[0], dy = a[1] - b[1];
  return Math.sqrt(dx * dx + dy * dy);
}

</script>

https://d3js.org/d3.v4.0.0-alpha.28.min.js