Kcnarf/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Revisitng the famous mbostock's block: Rotating Voronoi with the d3.distanceLimitedVoronoi d3 plugin I made.
At each iteration, maximum distance from each datum/seed is recomputed.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  background: #000;
}

path {
  fill: #fff;
  stroke: #000;
  stroke-width: 1.5px;
}

</style>
<body>
	<script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://raw.githack.com/Kcnarf/d3-distanceLimitedVoronoi/d3v3/distance-limited-voronoi.js"></script>
  <script>

    var width = 960,
        height = 500;

    var start = Date.now(),
        points = [];

    circle(0, 0, 120, 96, -.001);
    circle(0, 0, 30, 10, .03);
    circle(0, 0, 60, 3, -.05);
    circle(0, 0, 15, 4, -.02);
    circle(0, 0, 0, 1, -.02);

    circle(240, -120, 80, 4, -.02);
    circle(240, -120, 0, 1, -.02);

    circle(280, +120, 40, 8, .02);
    circle(280, +120, 20, 8, -.02);
    circle(280, +120, 0, 1, .02);

    var maxDistance = 400;
		var limitedVoronoi = d3.distanceLimitedVoronoi()
    limitedVoronoi.clipExtent([[-width / 2, -height / 2],[+width / 2, +height / 2]]).limit(maxDistance);

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
      .append("g")
        .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");

    var path = svg.selectAll("path")
        .data(points)
      .enter().append("path");

    d3.timer(function() {
      limitedCells = limitedVoronoi(points);
      path.attr("d", function(cell, i) { return limitedCells[i].path });
    });

    d3.timer(function(elapsed) {
      limitedVoronoi.limit(2+maxDistance*Math.pow(Math.cos((elapsed++)/5000), 4));
    }, 0, start);

    function circle(cx, cy, r, n, δθ) {
      d3.range(1e-6, 2 * Math.PI, 2 * Math.PI / n).map(function(θ, i) {
        var point = [cx + Math.cos(θ) * r, cy + Math.sin(θ) * r];
        d3.timer(function(elapsed) {
          var angle = θ + δθ * elapsed / 60;
          point[0] = cx + Math.cos(angle) * r;
          point[1] = cy + Math.sin(angle) * r;
        }, 0, start);
        points.push(point);
        return point;
      });
    }
  </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	background: #000;
	}

	path {
	fill: #fff;
	stroke: #000;
	stroke-width: 1.5px;
	}

	</style>
	<body>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script src="https://raw.githack.com/Kcnarf/d3-distanceLimitedVoronoi/d3v3/distance-limited-voronoi.js"></script>
	<script>

	var width = 960,
	height = 500;

	var start = Date.now(),
	points = [];

	circle(0, 0, 120, 96, -.001);
	circle(0, 0, 30, 10, .03);
	circle(0, 0, 60, 3, -.05);
	circle(0, 0, 15, 4, -.02);
	circle(0, 0, 0, 1, -.02);

	circle(240, -120, 80, 4, -.02);
	circle(240, -120, 0, 1, -.02);

	circle(280, +120, 40, 8, .02);
	circle(280, +120, 20, 8, -.02);
	circle(280, +120, 0, 1, .02);

	var maxDistance = 400;
	var limitedVoronoi = d3.distanceLimitedVoronoi()
	limitedVoronoi.clipExtent([[-width / 2, -height / 2],[+width / 2, +height / 2]]).limit(maxDistance);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");

	var path = svg.selectAll("path")
	.data(points)
	.enter().append("path");

	d3.timer(function() {
	limitedCells = limitedVoronoi(points);
	path.attr("d", function(cell, i) { return limitedCells[i].path });
	});

	d3.timer(function(elapsed) {
	limitedVoronoi.limit(2+maxDistance*Math.pow(Math.cos((elapsed++)/5000), 4));
	}, 0, start);

	function circle(cx, cy, r, n, δθ) {
	d3.range(1e-6, 2 * Math.PI, 2 * Math.PI / n).map(function(θ, i) {
	var point = [cx + Math.cos(θ) * r, cy + Math.sin(θ) * r];
	d3.timer(function(elapsed) {
	var angle = θ + δθ * elapsed / 60;
	point[0] = cx + Math.cos(angle) * r;
	point[1] = cy + Math.sin(angle) * r;
	}, 0, start);
	points.push(point);
	return point;
	});
	}
	</script>
	</body>