Voro-swirl by arrayjam

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    margin: 0;
    text-align: center;
  }
</style>
<body>
<script src="d3.v3.js"></script>
<script src="playground.js"></script>

playground.js

/* globals d3 */

var width = 800;
var height = 800;

d3.select(window)
    .on("resize", function() {
      var body = document.body;
      var side = d3.min([window.innerWidth, window.innerHeight]);
      height = width = side;
      init()
    });

function init() {
  var origin = [width / 2, height / 2];
  var circles = 20;
  var pointScale = d3.scale.quantize().range(d3.range(1, 10)).domain([0, width]);
  var dScale = d3.scale.quantize().range(d3.range(1, 10)).domain([0, height]);
  var radiusScale = d3.scale.linear().range([20, 80]).domain([0, height]);
  var p = 20;
  var r = 30;
  var d = 2;
  var color = d3.scale.linear().range(["#111", "#fff"]).domain([1, 10]);

  d3.selectAll("canvas").remove();
  var canvas = d3.select("body").append("canvas")
      .attr("width", width)
      .attr("height", height)
      .on("mousemove", mouseover);

  var ctx = canvas.node().getContext("2d");
  var voronoi = d3.geom.voronoi()
      .clipExtent([[0, 0], [width, height]]);

  var step = 0;
  function draw() {
    ctx.clearRect(0, 0, width, height);
    var allPoints = []
    for (var i = 0; i < circles; i++) {
      var points = makePoints(origin, p, i * r + 20, Math.PI / d * i);
      drawPoints(points);
      points.forEach(function(point) { allPoints.push(point); });
    }

    try {
    voronoi(allPoints).forEach(function(polygon, index) {
      drawPolygon(polygon, color(Math.floor(index / p)))
    });
    } catch (e) {
    }
  }

  function drawPoints(points) {
    var r = 5;
    points.forEach(function(point) {
      ctx.beginPath();
      ctx.ellipse(point[0], point[1], r, r, 0, 0, 2 * Math.PI);
      ctx.fillStyle = "green";
      // ctx.stroke();
    });
  }

  function makePoints(origin, numberOfPoints, radius, rotation) {
    var result = [];
    var eachRotation = 2 * Math.PI / numberOfPoints;
    for (var i = 0; i < numberOfPoints; i++) {
      var theta = eachRotation * i + rotation;
      var offsetX = Math.cos(theta);
      var offsetY = Math.sin(theta);
      result.push([
        origin[0] + radius * offsetX,
        origin[1] + radius * offsetY,
      ]);
    }

    return result;
  }

  function drawPolygon(polygon, color) {
    ctx.beginPath();
    // ctx.strokeStyle = "white";
    ctx.strokeStyle = color;
    ctx.fillStyle = color;

    polygon.forEach(function(point, index) {
      if (index === 0) {
        ctx.moveTo(point[0], point[1]);
      } else {
        ctx.lineTo(point[0], point[1]);
      }
    });

    ctx.stroke();
    ctx.fill();
  }

  function mouseover() {
    var mouse = d3.mouse(canvas.node());
    p = pointScale(mouse[0]);
    // r = radiusScale(mouse[1]);
    d = dScale(mouse[1]);
    draw();
  }

  draw();
}
d3.select(window).on("resize")();