31:T7d2,viewof lines = { const lines = [ [[464, 166], [637, 141]], [[396, 396], [381, 299]] ].map(l => l.map(([x, y]) => [x / 964 * width, y])); const svg = d3.select(DOM.svg(width, height)) .property("value", lines); const line = svg.append("g") .attr("stroke", "#ccc") .selectAll("line") .data(lines) .enter().append("line"); const lineSegment = svg.append("g") .attr("stroke", "black") .attr("stroke-width", 1.5) .selectAll("line") .data(lines) .enter().append("line"); const lineBisect = svg.append("g") .attr("stroke-width", 1.5) .selectAll("line") .data(["red", "blue"]) .enter().append("line") .attr("stroke", d => d); const point = svg.append("g") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "transparent") .attr("stroke-width", 30) .selectAll("circle") .data(d3.merge(lines)) .enter().append("circle") .attr("r", 2.5) .call(d3.drag() .subject(([x, y]) => ({x, y})) .on("drag", dragged)); update(); function dragged(d) { d[0] = d3.event.x; d[1] = d3.event.y; update(); svg.dispatch("input"); } function update() { point .attr("cx", d => d[0]) .attr("cy", d => d[1]); line.data(lines.map(l => lineExtend(...l))) .attr("x1", d => d[0][0]) .attr("y1", d => d[0][1]) .attr("x2", d => d[1][0]) .attr("y2", d => d[1][1]); lineSegment .attr("x1", d => d[0][0]) .attr("y1", d => d[0][1]) .attr("x2", d => d[1][0]) .attr("y2", d => d[1][1]); lineBisect .data([ lineExtend(...lineLineBisect(...lines[0], ...lines[1], +1)), lineExtend(...lineLineBisect(...lines[0], ...lines[1], -1)) ]) .attr("x1", d => d[0][0]) .attr("y1", d => d[0][1]) .attr("x2", d => d[1][0]) .attr("y2", d => d[1][1]); } return svg.node(); }32:[] 2f:{"title":"Angle Bisector of Two Lines","cells":[{"id":0,"value":"md`# Angle Bisector of Two Lines\n\nGiven two non-parallel lines defined by infinitely extending line segments , there exist two other lines that bisect the angles between the given lines, with all four lines intersecting at the same point. Drag the points below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"function lineLineBisect([x0, y0], [x1, y1], [x2, y2], [x3, y3], k = 1) {\n const x02 = x0 - x2, y02 = y0 - y2;\n const x10 = x1 - x0, y10 = y1 - y0;\n const x32 = x3 - x2, y32 = y3 - y2;\n const l = y32 * x10 - x32 * y10;\n if (Math.abs(l) < 1e-3) return; // Parallel!\n const l10 = Math.sqrt(x10 ** 2 + y10 ** 2);\n const l32 = Math.sqrt(x32 ** 2 + y32 ** 2);\n const ti = (x32 * y02 - y32 * x02) / l;\n const xi = x0 + ti * x10, yi = y0 + ti * y10;\n return [[xi, yi], [xi + x10 / l10 + k * x32 / l32, yi + y10 / l10 + k * y32 / l32]];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"function lineExtend([x0, y0], [x1, y1]) {\n return [\n rayExtend([x0, y0], [x1 - x0, y1 - y0]),\n rayExtend([x1, y1], [x0 - x1, y0 - y1])\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"function rayExtend([x0, y0], [vx, vy]) {\n let t = Infinity, c, x, y;\n if (vy < 0) { // top\n if ((c = (0 - y0) / vy) < t) y = 0, x = x0 + (t = c) * vx;\n } else if (vy > 0) { // bottom\n if ((c = (height - y0) / vy) < t) y = height, x = x0 + (t = c) * vx;\n }\n if (vx > 0) { // right\n if ((c = (width - x0) / vx) < t) x = width, y = y0 + (t = c) * vy;\n } else if (vx < 0) { // left\n if ((c = (0 - x0) / vx) < t) x = 0, y = y0 + (t = c) * vy;\n }\n return [x, y];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}