syntagmatic/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Calculating the outer tangent of two circles using this solution on Stackoverflow by Markus Jarderot.

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

.circle {
  fill-opacity: .1;
  fill: #000;
  stroke-opacity: .5;
  stroke: #000;
  stroke-width: 2px;
}

line {
  stroke-opacity: .8;
  stroke: #0b3;
  stroke-width: 2px;
}

</style>
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>

// Based on http://stackoverflow.com/a/12037737
function outerTangent(x1, y1, r1, x2, y2, r2) {
  var dx = x2 - x1;
  var dy = y2 - y1;
  var dist = Math.sqrt(dx*dx + dy*dy);

  if (dist <= Math.abs(r2-r1)) return;   // no valid tangents

  // Rotation from x-axis
  var angle1 = Math.atan2(dy,dx);
  var angle2 = Math.acos((r1 - r2)/dist);

  return [
    [
      [x1 + r1 * Math.cos(angle1 + angle2), y1 + r1 * Math.sin(angle1 + angle2)],
      [x2 + r2 * Math.cos(angle1 + angle2), y2 + r2 * Math.sin(angle1 + angle2)]
    ],
    [
      [x1 + r1 * Math.cos(angle1 - angle2), y1 + r1 * Math.sin(angle1 - angle2)],
      [x2 + r2 * Math.cos(angle1 - angle2), y2 + r2 * Math.sin(angle1 - angle2)]
    ]
  ];
}

var c1 = {x: 180, y: 150, r: 10},
    c2 = {x: 500, y: 200, r: 120};

var color = d3.scale.category10();

var svg = d3.select("svg");

var circle = svg.selectAll(".circle")
    .data([c1, c2])
  .enter().append("g")
    .attr("class", "circle")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
    .call(d3.behavior.drag()
        .origin(function(d) { return d; })
        .on("dragstart", dragstarted)
        .on("drag", dragged));

circle.append("circle")
    .attr("r", function(d) { return d.r; });

var tangent = svg.selectAll(".line")
    .data([
      function() { return outerTangent(c1.x, c1.y, +c1.r, c2.x, c2.y, +c2.r); },
    ])
  .enter().insert("g", ".line")
    .attr("class", "line")
    .style("stroke", function(d, i) { return color(i); });

tangent.append("line")
    .attr("class", "line-1");

tangent.append("line")
    .attr("class", "line-2");

update();

function dragstarted(d) {
  this.parentNode.appendChild(this);
}

function dragged(d) {
  d3.select(this).attr("transform", "translate(" + (d.x = d3.event.x) + "," + (d.y = d3.event.y) + ")");
  update();
}

function update() {
  tangent.each(function(f) {
    var c = f();
    if (c) {
      d3.select(this).style("display", null);
      tangent.select(".line-1")
        .attr("x1", c[0][0][0])
        .attr("x2", c[0][1][0])
        .attr("y1", c[0][0][1])
        .attr("y2", c[0][1][1]);
      tangent.select(".line-2")
        .attr("x1", c[1][0][0])
        .attr("x2", c[1][1][0])
        .attr("y1", c[1][0][1])
        .attr("y2", c[1][1][1]);
    } else {
      d3.select(this).style("display", "none");
    }
  });
}

</script>

## thumbnail.png

      
    Raw
  

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

	.circle {
	fill-opacity: .1;
	fill: #000;
	stroke-opacity: .5;
	stroke: #000;
	stroke-width: 2px;
	}

	line {
	stroke-opacity: .8;
	stroke: #0b3;
	stroke-width: 2px;
	}

	</style>
	<svg width="960" height="500"></svg>
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>

	// Based on http://stackoverflow.com/a/12037737
	function outerTangent(x1, y1, r1, x2, y2, r2) {
	var dx = x2 - x1;
	var dy = y2 - y1;
	var dist = Math.sqrt(dxdx + dydy);

	if (dist <= Math.abs(r2-r1)) return; // no valid tangents

	// Rotation from x-axis
	var angle1 = Math.atan2(dy,dx);
	var angle2 = Math.acos((r1 - r2)/dist);

	return [
	[
	[x1 + r1 * Math.cos(angle1 + angle2), y1 + r1 * Math.sin(angle1 + angle2)],
	[x2 + r2 * Math.cos(angle1 + angle2), y2 + r2 * Math.sin(angle1 + angle2)]
	],
	[
	[x1 + r1 * Math.cos(angle1 - angle2), y1 + r1 * Math.sin(angle1 - angle2)],
	[x2 + r2 * Math.cos(angle1 - angle2), y2 + r2 * Math.sin(angle1 - angle2)]
	]
	];
	}

	var c1 = {x: 180, y: 150, r: 10},
	c2 = {x: 500, y: 200, r: 120};

	var color = d3.scale.category10();

	var svg = d3.select("svg");

	var circle = svg.selectAll(".circle")
	.data([c1, c2])
	.enter().append("g")
	.attr("class", "circle")
	.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
	.call(d3.behavior.drag()
	.origin(function(d) { return d; })
	.on("dragstart", dragstarted)
	.on("drag", dragged));

	circle.append("circle")
	.attr("r", function(d) { return d.r; });

	var tangent = svg.selectAll(".line")
	.data([
	function() { return outerTangent(c1.x, c1.y, +c1.r, c2.x, c2.y, +c2.r); },
	])
	.enter().insert("g", ".line")
	.attr("class", "line")
	.style("stroke", function(d, i) { return color(i); });

	tangent.append("line")
	.attr("class", "line-1");

	tangent.append("line")
	.attr("class", "line-2");

	update();

	function dragstarted(d) {
	this.parentNode.appendChild(this);
	}

	function dragged(d) {
	d3.select(this).attr("transform", "translate(" + (d.x = d3.event.x) + "," + (d.y = d3.event.y) + ")");
	update();
	}

	function update() {
	tangent.each(function(f) {
	var c = f();
	if (c) {
	d3.select(this).style("display", null);
	tangent.select(".line-1")
	.attr("x1", c[0][0][0])
	.attr("x2", c[0][1][0])
	.attr("y1", c[0][0][1])
	.attr("y2", c[0][1][1]);
	tangent.select(".line-2")
	.attr("x1", c[1][0][0])
	.attr("x2", c[1][1][0])
	.attr("y1", c[1][0][1])
	.attr("y2", c[1][1][1]);
	} else {
	d3.select(this).style("display", "none");
	}
	});
	}

	</script>