2e:null 2f:["$","title",null,{"children":"Circle-Circle Intersection | bandreus | Observable"}] 34:Tcc6,{ const height = 500; const [c1, c2] = [ [432, 203, 80], [565, 258, 120] ]; const [p1, p2] = [ [0, 0], [0, 0] ]; const ε = 500; const svg = d3.select(DOM.svg(width, height)); const center_axis = svg.append("line") .attr("stroke", "gray"); const circle = svg.append("g") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "transparent") .attr("stroke-width", 30) .selectAll("circle") .data([c1, c2]) .enter().append("circle") .attr("fill", "transparent") .attr("stroke-width", "2px") .attr("stroke", "black") .call(d3.drag() .subject(([x, y]) => ({x, y})) .on("drag", dragged)); const radical_axis = svg.append("line") .attr("stroke", "blue"); const intersection = svg.append("g") .selectAll("circle") .data([p1, p2]) .enter().append("circle") .attr("r", 5) .attr("fill", "red"); update(); function dragged(d) { d[0] += d3.event.dx; d[1] += d3.event.dy; update(); } function update() { const t = (width + height) / distance(c1, c2); const a1 = interpolate(c1, c2, t); const a2 = interpolate(c2, c1, t); center_axis.attr("x1", a1[0]).attr("y1", a1[1]) .attr("x2", a2[0]).attr("y2", a2[1]); let α1 = -2*c1[0], β1 = -2*c1[1], γ1 = c1[0]*c1[0] + c1[1]*c1[1] - c1[2]*c1[2], α2 = -2*c2[0], β2 = -2*c2[1], γ2 = c2[0]*c2[0] + c2[1]*c2[1] - c2[2]*c2[2], A = α2 - α1, B = β2 - β1, C = γ2 - γ1, sqA = A*A, sqB = B*B, sqC = C*C; intersection.attr("opacity", 1.0); let [l1, l2] = [[0, 0], [0, 0]]; if (sqA > sqB) { l1[0] = -C/A; l1[1] = 0; l2[0] = (-B*height - C)/A; l2[1] = height; const a = sqB/sqA + 1, b = 2*B*C/sqA - B*α1/A + β1, c = sqC/sqA - C*α1/A + γ1, Δ = b*b - 4*a*c; if (Δ > ε) { const sqrtΔ = Math.sqrt(Δ); p1[1] = (-b + sqrtΔ)/(2*a); p1[0] = (-B*p1[1] - C)/A; p2[1] = (-b - sqrtΔ)/(2*a); p2[0] = (-B*p2[1] - C)/A; } else if (Δ > -ε && Δ < ε) { p1[1] = p2[1] = -b/(2*a); p1[0] = p2[0] = (-B*p1[1] - C)/A; } else { intersection.attr("opacity", 0.0); p1[0] = p1[1] = p2[0] = p2[1] = 0; } } else { l1[0] = 0; l1[1] = -C/B; l2[0] = width; l2[1] = (-A*width - C)/B; const a = 1 + sqA/sqB, b = 2*A*C/sqB - A*β1/B + α1, c = sqC/sqB - C*β1/B + γ1, Δ = b*b - 4*a*c; if (Δ > ε) { const sqrtΔ = Math.sqrt(Δ); p1[0] = (-b + sqrtΔ)/(2*a); p1[1] = (-A*p1[0] - C)/B; p2[0] = (-b - sqrtΔ)/(2*a); p2[1] = (-A*p2[0] - C)/B; } else if (Δ > -ε && Δ < ε) { p1[0] = p2[0] = -b/(2*a); p1[1] = p2[1] = (-A*p1[0] - C)/B; } else { intersection.attr("opacity", 0.0); p1[0] = p1[1] = p2[0] = p2[1] = 0; } } radical_axis.attr("x1", l1[0]).attr("y1", l1[1]) .attr("x2", l2[0]).attr("y2", l2[1]); intersection.attr("cx", d => d[0]).attr("cy", d => d[1]); circle.attr("cx", d => d[0]) .attr("cy", d => d[1]) .attr("r", d => d[2]); } return svg.node(); }35:T6f1,md` (Where we introduced a few more symbols, again, to make the equation more compact.) >The *radical axis* is the locus of points at which tangents drawn to both circles have the same length. The *radical axis* is a straight line and always perpendicular to the *line of centers* (the line connecting the centers of the circles). If the circles intersect, the *radical axis* is the line passing through the intersection points ; similarly, if the circles are tangent, the *radical axis* is simply the common tangent. (from: [wikipedia](https://en.wikipedia.org/wiki/Radical_axis)) We will take advantage these facts. Since the intersection points always lay on the *radical axis* , this means we can find their coordinates by simultaneously solving the equation for the *radical axis* and one of the circles. Say, the one for circle *a* `36:[] 32:{"id":"5781d33357150a70","slug":"circle-circle-intersection","title":"Circle-Circle Intersection","thumbnail":"a1e56ac780e576a8008561548e100744c2a334c59c3d39e6f2222db90c53b363","access_level":"public","create_time":"$D2018-03-31T08:25:44.587Z","update_time":"$D2018-03-31T23:00:14.177Z","view_time":null,"first_public_time":"$D2018-03-31T22:29:10.493Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"73a1dad7b7b04662","login":"bandreus","name":"","avatar_url":"https://avatars-next.observableusercontent.com/6ce1c7cd82d419aa5a7fecf6d2752e591adea0d4e1060521ce7b8db98af880ab","tier":"starter_2024"},"version":422,"publish_version":422,"role":null,"authored":false,"authors":[{"type":"individual","id":"67fac36b61758e39","login":"bandreus","name":"","avatar_url":"https://avatars-next.observableusercontent.com/6ce1c7cd82d419aa5a7fecf6d2752e591adea0d4e1060521ce7b8db98af880ab","tier":null}],"members":[{"type":"individual","id":"67fac36b61758e39","login":"bandreus","name":"","avatar_url":"https://avatars-next.observableusercontent.com/6ce1c7cd82d419aa5a7fecf6d2752e591adea0d4e1060521ce7b8db98af880ab","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Circle-Circle Intersection","cells":[{"id":0,"value":"md`# Circle-Circle Intersection\n\nGiven two circles *a* and *b* , we want to find out whether they intersect each-other and, if so, the coordinates of the intersection points `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"md`Circle *a* has center ⟨*x_a*, *y_a*⟩ and radius *r_a*, and circle *b* has center ⟨*x_b*, *y_b*⟩ and radius *r_b*.\n\nLet us recall how we can express the equation for a generic circle.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"tex.block`\n\\begin{aligned}\n&(x - x_a)^2 + (y - y_a)^2 - r_a^2 = 0 \\\\\n&x^2 + y^2 -2x_ax -2y_ay +x_a^2 +y_a^2 - r_a^2 = 0 \\\\\n&x^2 + y^2 + \\alpha_a x + \\beta_a y + \\gamma_a = 0\n\\end{aligned}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"md`In which we started from the equation for Circle *a* in its \"Standard Form\", and derived the \"General Form\" for the same equation by introducing the following new symbols:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"tex.block`\n\\alpha _a = -2x_a \\space , \\space\\space \\beta _a = -2y_a \\space , \\space\\space \\gamma _a = x_a^2 + y_a^2 - r_a^2\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"md` We do the same for circle *b* . Then, we subtract the equation for circle *a* from the equation for circle *b* . This gives us the equation for the *Radical Axis* .`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"tex.block`\n\\begin{aligned}\n&x^2 + y^2 + \\alpha_b x + \\beta_b y + \\gamma_b - ( x^2 + y^2 + \\alpha_a x + \\beta_a y + \\gamma_a ) = 0 \\\\\n&(\\alpha_b - \\alpha_a)x + (\\beta_b - \\beta_a)y + (\\gamma_b - \\gamma_a) = 0 \\\\\n&A = \\alpha_b - \\alpha_a \\space , \\space \\space B = \\beta_b - \\beta_a \\space , \\space \\space C = \\gamma_b - \\gamma_a \\\\\n&Ax + By + C = 0\n\\end{aligned}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"tex.block`\n\\begin{cases}\nAx + By + C = 0 \\\\\nx^2 + y^2 + \\alpha_a x + \\beta_a y + \\gamma_a = 0\n\\end{cases}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"md`We derive *x* form the first equation and substitute it in the second:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"tex.block`\n\\begin{cases}\nx = \\frac{-By - C}{A} \\\\\n(\\frac{-By - C}{A})^2 + y^2 + \\alpha_a (\\frac{-By - C}{A}) + \\beta_a y + \\gamma_a = 0\n\\end{cases}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"md`It's immeditaley apparent this last system is only sound when *A* ≠ 0 (Can you explain why?). For a complete solution, one must also treat this second case by instead extrapolating *y* from the first equation and substituing it in the second. This is left as a simple excersise for the reader.\n\nWe can rewrite the second equation (your typical quadratic polinomial) in a much nicer way:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"tex.block`\n\\begin{aligned}\n&\\begin{cases}\nx = \\frac{-By - C}{A} \\\\\n(\\frac{B^2}{A^2} + 1)y^2 + (\\frac{2BC}{A^2} + \\frac{B\\alpha_a}{A} + \\beta_a)y + (\\frac{C^2}{A^2} + \\frac{C\\alpha_a}{A} + \\gamma_a) = 0\n\\end{cases} \\\\\n\n&a = \\frac{B^2}{A^2} + 1 \\space , \\space \\space b = \\frac{2BC}{A^2} + \\frac{B\\alpha_a}{A} + \\beta_a \\space , \\space \\space c = \\frac{C^2}{A^2} + \\frac{C\\alpha_a}{A} + \\gamma_a \\\\\n\n&\\begin{cases}\nx = \\frac{-By - C}{A} \\\\\nay^2 + by + c = 0\n\\end{cases}\n\\end{aligned}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"md`That's it! The solutions to the second equation (or lack thereof) tell us all we need:\n* if the equation has two distinct solutions, the circles intersect each-other.\n* if the equation has two coincident solutions, the circles are tangent to each other.\n* if the equation has no (real) solution, the circles do not intersect (on the real plane, at least!).\n\nOnce we obtain the y-coordinates by solving the latter equation of the system, obtaining the x-coordinates is a matter of plugging the solutions in the former, as usual.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"function distance([x1, y1, r1], [x2, y2, r2]) {\n return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"function interpolate([x1, y1, r1], [x2, y2, r2], t) {\n return [x1 + (x2 - x1) * t, y1 + (y2 - y1) * t];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"