D3 Examples - Apollonian Gasket

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="960"></svg>
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="apollonius-circle.js" charset="utf-8"></script>
<script src="subsets.js" charset="utf-8"></script>
<script>
​
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
​
var N = 8;
​
var generations = [];
​
var threeCircles = d3.range(3).map((d, i) => {
  return {
    x: width / 2 + width / 4 * Math.sin((i + 1) * 2 * Math.PI / 3 + Math.PI),
    y: height / 2 + height / 4 * Math.cos((i + 1) * 2 * Math.PI / 3 + Math.PI),
    r: 0,
    generation: 0,
  }
});
​
var initialRadius = distance(threeCircles[0].x, threeCircles[0].y,
                             threeCircles[1].x, threeCircles[1].y) / 2;
​
threeCircles.forEach((d, i) => {
  d.r = initialRadius;
});
​
var bigCircle = enclosingCircle.apply(null, threeCircles);
bigCircle.generation = -1;
generations.push(bigCircle);
Array.prototype.push.apply(generations, threeCircles);
​
var color = d3.scaleSequential(d3.interpolateInferno)
    .domain([1, N]);
​
iterate(N);
​
function iterate(n) {
  let i = 0,
      triplets = [threeCircles];
      newTriplets = [];
      triplets = triplets.concat(subsets(threeCircles, 2).map((subset) => {
        return [bigCircle].concat(subset);
      }));
​
  while (++i <= n) {
    triplets.forEach((t) => {
      let solution;
​
      // Ensure the circle with the largest radius is the first of the triplet.
      // The largest radius circle may be the enclosing circle; the solutions
      // for the Apollonius circles (up to 8 of them) depends on orientation.
      t.sort((a, b) => -(a.r - b.r));
​
      // Choose which of the 8 possible Apollonius circles to solve for.
      if (t.indexOf(bigCircle) === -1) {
        solution = inscribedCircle.apply(null, t);
      } else {
        solution = borderCircle.apply(null, t);
      }
​
      solution.generation = i;
      generations.push(solution);
​
      // Each enclosing circle generates 3 more triplets which will each produce
      // a circle in the next generation.
      subsets(t, 2).forEach((subset) => {
        newTriplets.push([solution].concat(subset));
      });
    });
​
    triplets = newTriplets;
    newTriplets = [];
  }
​
var circle = svg.selectAll(".circle")
    .data(generations)
  .enter().append("g")
    .attr("class", "circle")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
​
circle.append("circle")
    .attr("r", function(d) { return d.r; })
    .style("fill", function(d, i) { return d.generation < 1 ? 'none' : color(d.generation); });
}
​
function distance(x0, y0, x1, y1) {
  return Math.sqrt(Math.pow(x0 - x1, 2) + Math.pow(y0 - y1, 2));
}
​
function circleArea(c) {
  return Math.PI * c.r * c.r;
}
​
function enclosingCircle(c1, c2, c3) {
  return apolloniusCircle(c1.x, c1.y, +c1.r, c2.x, c2.y, +c2.r, c3.x, c3.y, +c3.r);
}
​
function borderCircle(c1, c2, c3) {
  return apolloniusCircle(c1.x, c1.y, +c1.r, c2.x, c2.y, -c2.r, c3.x, c3.y, -c3.r);
}
​
function inscribedCircle(c1, c2, c3) {
  return apolloniusCircle(c1.x, c1.y, -c1.r, c2.x, c2.y, -c2.r, c3.x, c3.y, -c3.r);
}
​
</script>
​
    