31: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(); }32:[] 2f:{"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"},{"id":18,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":20,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}