2d:null 2e:["$","title",null,{"children":"Circle-Line Intersection | Jon Sadka | Observable"}] 33:T739,{ const height = 400; const [p1, p2, p3, p4] = [[width / 4, 3* height / 4], [3 * width / 4, height / 4], [0, 0], [0, 0]]; const center = [width / 2, height / 2]; const r = height / 4; const dotSize = 5; const svg = d3.select(DOM.svg(width, height)); const line = svg.append("line") .attr("stroke", "gray"); const circle = svg.append("circle") .attr("stroke", "gray") .attr("fill", "none") .attr("cx", center[0]) .attr("cy", center[1]) .attr("r", r); const point = svg.append("g") .selectAll("circle") .data([p1, p2]) .enter().append("circle") .attr("cursor", "move") .attr("pointer-events", "all") .attr("r", dotSize) .attr("fill", "black") .call(d3.drag() .subject(([x, y]) => ({x, y})) .on("drag", dragged)); const intersection = svg.append("g") .selectAll("circle") .data([p3, p4]) .enter().append("circle") .attr("r", dotSize) .attr("stroke", "#E1523D") .attr("stroke-width", 2) .attr("fill", "none"); update(); function dragged(d) { d[0] = Math.min(Math.max(dotSize, d3.event.x), width - dotSize); d[1] = Math.min(Math.max(dotSize, d3.event.y), height - dotSize); update(); } function update() { const t = (width + height) / distance(p1, p2); const l1 = interpolate(p1, p2, t); const l2 = interpolate(p2, p1, t); // Equation assumes center of the circle is at (0, 0) const [p3a, p4a] = adjustedIntersection(p1, p2, r, center) line.attr("x1", l1[0]).attr("y1", l1[1]); line.attr("x2", l2[0]).attr("y2", l2[1]); point.attr("cx", d => d[0]).attr("cy", d => d[1]); intersection .attr("cx", (d, i) => i === 0 ? p3a[0] : p4a[0]) .attr("cy", (d, i) => i === 0 ? p3a[1] : p4a[1]) } return svg.node(); }34:[] 31:{"id":"fa440fda57df461c","slug":"circle-line-intersection","title":"Circle-Line Intersection","thumbnail":"24c5e39156b16cffc8fa7a6776a0076c51e1e7227aec17bca60d45690ad46046","access_level":"public","create_time":"$D2018-03-08T19:01:10.500Z","update_time":"$D2018-08-08T03:17:40.147Z","view_time":null,"first_public_time":"$D2018-03-20T22:12:56.389Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"1a7acf10b46326d6","login":"jonsadka","name":"Jon Sadka","avatar_url":"https://avatars-next.observableusercontent.com/d9daecce8339a7894b8b883267b60e91b51eec0d918477814a1ff30075684052","tier":"starter_2024"},"version":243,"publish_version":243,"role":null,"authored":false,"authors":[{"type":"individual","id":"a4a406861d2e3382","login":"jonsadka","name":"Jon Sadka","avatar_url":"https://avatars-next.observableusercontent.com/db53c4837c9131235d02b64004e57d70e9420f31b449badfb7b8d14d825953bf","tier":null}],"members":[{"type":"individual","id":"a4a406861d2e3382","login":"jonsadka","name":"Jon Sadka","avatar_url":"https://avatars-next.observableusercontent.com/db53c4837c9131235d02b64004e57d70e9420f31b449badfb7b8d14d825953bf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"title":"Circle-Line Intersection","cells":[{"id":165,"value":"md`# Circle-Line Intersection\n\nSay you have two points (*x₁*, *y₁*) and (*x₂*, *y₂*) that define a line which intersects a circle . What are the point(s) of intersection (*x*, *y*)?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"function distance([x1, y1], [x2, y2]) {\n return Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"function interpolate([x1, y1], [x2, y2], 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":133,"value":"function adjustedIntersection(p1, p2, r, center) {\n const [p3, p4] = intersect(\n [p1[0] - center[0], p1[1] - center[1]], \n [p2[0] - center[0], p2[1] - center[1]], \n r\n );\n\n if (isNaN(p3[0])) {\n \tconsole.log(p3[0])\n return [[-100000, -100000], [-100000, -100000]]\n }\n \n const p3a = [p3[0] + center[0], p3[1] + center[1]];\n const p4a = [p4[0] + center[0], p4[1] + center[1]];\n return [p3a, p4a];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"// NOTE: Equation assumes center of the circle is at (0, 0)\nfunction intersect([x1, y1], [x2, y2], r) {\n const dx = x2 - x1;\n const dy = y2 - y1;\n const dr = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));\n const D = x1 * y2 - x2 * y1;\n // Add fallback of -10000000 incase thing1 evaluates to NaN\n const thing1 = Math.sqrt(Math.pow(r, 2) * Math.pow(dr, 2) - Math.pow(D, 2));\n \n const sgn = dy < 0 ? -1 : 1; \n const x = [\n (D * dy + sgn * dx * thing1) / Math.pow(dr, 2),\n (D * dy - sgn * dx * thing1) / Math.pow(dr, 2)\n ];\n \n const y = [\n (-D * dx + Math.abs(dy) * thing1) / Math.pow(dr, 2),\n (-D * dx - Math.abs(dy) * thing1) / Math.pow(dr, 2)\n ];\n \n const discriminant = Math.pow(r, 2) * Math.pow(dr, 2) - Math.pow(D, 2);\n const numberIntersections = discriminant === 0 ? 1 : discriminant > 0 ? 2 : 0;\n\n return [[x[0], y[0]], [x[1], y[1]]];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"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":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"