31:T446,md`# Tangent to Two Circles Given two circles, ${tex`A`} ${svg``} of radius ${tex`r_a`} centered at point ${tex`a`} ${svg``} ${tex`= \langle x_a,y_a \rangle`} and ${tex`B`} ${svg``} of radius ${tex`r_b`} centered at ${tex`b`} ${svg``} ${tex`= \langle x_b,y_b \rangle`}, compute the center ${tex`c`} ${svg``} ${tex`= \langle x_c,y_c \rangle`} of a circle ${tex`C`} ${svg``} of a given radius ${tex`r_c`} which places it tangent to both ${tex`A`} and ${tex`B`}.`32:T479,md`This problem is equivalent to finding the intersection of two circles: ${tex`AC`} ${svg``} of radius ${tex`r_a + r_c`} centered at ${tex`a`} ${svg``}, and ${tex`BC`} ${svg``} of radius ${tex`r_b + r_c`} centered at ${tex`b`} ${svg``}. There are two points of intersection ${tex`c`} ${svg``}; we choose one arbitrarily.`33:T5e4,html``34:T7a5,html``35:T5a8,md`The chord ${svg``} is along the [radical line](http://mathworld.wolfram.com/RadicalLine.html) of ${tex`AC`} ${svg``} and ${tex`BC`} ${svg``}. Thus, the length of the line segment ${tex`\overline{ap}`} ${svg``} relative to the length of ${tex`\overline{ab}`} ${svg``} is:`36:[] 2f:{"title":"Tangent to Two Circles","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"md`Consider the line segment ${tex`\\overline{ab}`} ${svg``} connecting the centers of the given circles. This segment bisects and is perpendicular to the chord ${svg``} connecting the two possible points ${tex`c`} ${svg``}; the intersection between ${tex`\\overline{ab}`} and this chord is point ${tex`p`} ${svg``}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"tex.block`\\frac{|a - p|}{|a - b|} = \\frac{|a - b|^2 + (r_a + r_c)^2 - (r_b + r_c)^2}{2|a - b|^2}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"md`And since ${tex`\\overline{apc}`} ${svg``} is a right triangle:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"tex.block`|p - c|^2 + |a - p|^2 = (r_a + r_c)^2`","pinned":false,"hidden":false,"mode":"ojs"},{"id":856,"value":"md`Thus, the length of ${tex`\\overline{pc}`} ${svg``} relative to ${tex`\\overline{ab}`} ${svg``} is:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":859,"value":"tex.block`\\frac{|p - c|}{|a - b|} = \\sqrt{\\frac{(r_a + r_c)^2}{|a - b|^2} - \\frac{|a - p|^2}{|a - b|^2}}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":989,"value":"md`These relative lengths can be used to compute the center ${tex`c`} ${svg``}:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":991,"value":"tex.block`c = a + \\frac{|a - p|}{|a - b|}(b - a) + \\frac{|p - c|}{|a - b|}(b - a)_\\perp`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1014,"value":"md`In JavaScript:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"function place(a, b, c) {\n const x_ba = b.x - a.x;\n const y_ba = b.y - a.y;\n const l_ab2 = x_ba ** 2 + y_ba ** 2;\n const r_ac2 = (a.r + c.r) ** 2;\n const r_bc2 = (b.r + c.r) ** 2;\n const t_ap = (l_ab2 + r_ac2 - r_bc2) / (2 * l_ab2);\n const t_pc = Math.sqrt(r_ac2 / l_ab2 - t_ap ** 2);\n c.x = a.x + t_ap * x_ba + t_pc * y_ba;\n c.y = a.y + t_ap * y_ba - t_pc * x_ba;\n return c;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1016,"value":"md`This algorithm is used by D3’s [circle-packing layout](https://github.com/d3/d3-hierarchy).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":999,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"A = ({x: 120, y: 150, r: 50})","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"B = ({x: 300, y: 205, r: 90})","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"C = place(A, B, {r: 50 - Math.cos(now / 5000) * 14})","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"C2 = place(B, A, {r: C.r})","pinned":true,"hidden":false,"mode":"ojs"},{"id":936,"value":"p = {\n const x_ba = B.x - A.x;\n const y_ba = B.y - A.y;\n const l_ab2 = x_ba ** 2 + y_ba ** 2;\n const r_ac2 = (A.r + C.r) ** 2;\n const r_bc2 = (B.r + C.r) ** 2;\n const t_ap = (l_ab2 + r_ac2 - r_bc2) / (2 * l_ab2);\n const t_pc = Math.sqrt(r_ac2 / l_ab2 - t_ap ** 2);\n return {x: A.x + t_ap * x_ba, y: A.y + t_ap * y_ba};\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"color_a = \"#1f77b4\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"color_b = \"#2ca02c\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"color_c = \"#000000\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":422,"value":"color_p = \"#d62728\" // d3.schemeCategory10[3]","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}