saraquigley/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A fork of Mike Bostock's Rotating Voronoi, with fewer polygon shapes, different line interpolation ("cardinal-closed"), and some color.
Built with blockbuilder.org

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

body {
  background: #000;
}

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

.inner {
  fill: #7fbc41;
}

.outer {
  fill: #4d9221;
}

.middle {
    fill: #276419;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

var width = 1050,
    height = 1500;

var points = [];

var bounds = d3.geom.polygon([
  [-width / 2, -height / 2],
  [-width / 2, +height / 2],
  [+width / 2, +height / 2],
  [+width / 2, -height / 2]
]);

circle(0, 100, 260, 16, -.01);
circle(0, 100, 180, 12, 0.005);
circle(0, 100, 0, 1, .02);

var line = d3.svg.line()
    .interpolate("cardinal-closed");

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")
  .attr("class",function(d, i) { return i < 16 ? "outer" : (i === 28 ? "inner" : "middle");});

d3.timer(function() {
  var voronoi = d3.geom.voronoi(points).map(function(cell) { return bounds.clip(cell); });
  path.attr("d", function(point, i) { return line(resample(voronoi[i])); });
});

function circle(cx, cy, r, n, δθ) {
  d3.range(1e-6, 2 * Math.PI, 2 * Math.PI / n).map(function(θ) {
    var point = [cx + Math.cos(θ) * r, cy + Math.sin(θ) * r];
    d3.timer(function() {
      θ += δθ;

      point[0] = cx + Math.sin(θ) * r;
      point[1] = cy + Math.cos(θ) * r;
    });
    points.push(point);
    return point;
  });
}

function resample(points) {
  var i = -1,
      n = points.length,
      p0 = points[n - 1], x0 = p0[0], y0 = p0[1], p1, x1, y1,
      points2 = [];
  while (++i < n) {
    p1 = points[i], x1 = p1[0], y1 = p1[1];
    points2.push(
      [(x0 * 2 + x1) / 3, (y0 * 2 + y1) / 3],
      [(x0 + x1 * 2) / 3, (y0 + y1 * 2) / 3],
      p1
    );
    p0 = p1, x0 = x1, y0 = y1;
  }
  return points2;
}

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	background: #000;
	}

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

	.inner {
	fill: #7fbc41;
	}

	.outer {
	fill: #4d9221;
	}

	.middle {
	fill: #276419;
	}
	</style>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script>

	var width = 1050,
	height = 1500;

	var points = [];

	var bounds = d3.geom.polygon([
	[-width / 2, -height / 2],
	[-width / 2, +height / 2],
	[+width / 2, +height / 2],
	[+width / 2, -height / 2]
	]);

	circle(0, 100, 260, 16, -.01);
	circle(0, 100, 180, 12, 0.005);
	circle(0, 100, 0, 1, .02);

	var line = d3.svg.line()
	.interpolate("cardinal-closed");

	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")
	.attr("class",function(d, i) { return i < 16 ? "outer" : (i === 28 ? "inner" : "middle");});

	d3.timer(function() {
	var voronoi = d3.geom.voronoi(points).map(function(cell) { return bounds.clip(cell); });
	path.attr("d", function(point, i) { return line(resample(voronoi[i])); });
	});

	function circle(cx, cy, r, n, δθ) {
	d3.range(1e-6, 2 * Math.PI, 2 * Math.PI / n).map(function(θ) {
	var point = [cx + Math.cos(θ) * r, cy + Math.sin(θ) * r];
	d3.timer(function() {
	θ += δθ;

	point[0] = cx + Math.sin(θ) * r;
	point[1] = cy + Math.cos(θ) * r;
	});
	points.push(point);
	return point;
	});
	}

	function resample(points) {
	var i = -1,
	n = points.length,
	p0 = points[n - 1], x0 = p0[0], y0 = p0[1], p1, x1, y1,
	points2 = [];
	while (++i < n) {
	p1 = points[i], x1 = p1[0], y1 = p1[1];
	points2.push(
	[(x0 * 2 + x1) / 3, (y0 * 2 + y1) / 3],
	[(x0 + x1 * 2) / 3, (y0 + y1 * 2) / 3],
	p1
	);
	p0 = p1, x0 = x1, y0 = y1;
	}
	return points2;
	}

	</script>