31:Tac2,{ let x_axis = [mutable x1, mutable x2]; let all_points = x_axis.concat(mutable x); const svg = d3.select(DOM.svg(width, height)); const line = svg.append("line") .attr("stroke", "black"); const point = svg.append("g") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "transparent") .attr("stroke-width", 30) .selectAll("circle") .data(all_points) .enter().append("circle") .attr("r", 5) .attr("fill", (d, i) => i == 0 ? "black" : (i == 1 ? "blue" : "red")) .call(d3.drag() .subject(([x,y]) => ({x, y})) .on("drag", dragged)); const projection = svg.selectAll(".projection_points"); const connection = svg.selectAll(".projection_lines"); update(); function dragged(d) { d[0] = Math.max(0, Math.min(width, d3.event.x)); d[1] = Math.max(0, Math.min(height, d3.event.y)); update(); } function update() { const t = (width + height) / distance(mutable x1, mutable x2); const l1 = interpolate(mutable x1, mutable x2, t); const l2 = interpolate(mutable x2, mutable x1, t); for(let i=0; i < mutable x.length;i++) { const p = interpolate(mutable x1, mutable x2, project(mutable x1, mutable x2, mutable x[i])); projection.attr("cx", p[0]).attr("cy", p[1]); 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]); mutable x_proj[i] = p; } mutable x1 = mutable x1; mutable x2 = mutable x2; mutable x = mutable x; mutable x_proj = mutable x_proj; update_proj(); } function update_proj() { svg.selectAll(".projection_points") .remove(); svg.selectAll(".projection_lines") .remove(); const projection = svg.selectAll(".projection_points") .data(mutable x_proj) .enter() .append("circle") .attr("class", "projection_points") .attr("cx", d=>d[0]) .attr("cy", d=>d[1]) .attr("r", 5) .attr("stroke", "orange") .attr("fill", "white") .attr("fill-opacity", 0.8) for(let i=0; i < mutable x.length ;i++) { const p = interpolate(mutable x1, mutable x2, project(mutable x1, mutable x2, mutable x[i])); const connection = svg.append("line") .attr("class", "projection_lines") .attr("stroke", "orange") .attr("stroke-dasharray", "6 4") .attr("stroke-width", 0.8) .attr("x1", mutable x[i][0]) .attr("y1", mutable x[i][1]) .attr("x2", p[0]) .attr("y2", p[1]) .lower(); // Projection lines placed behind circles } } return svg.node(); }32:[] 2f:{"title":"Closest Point on Line: Solution with multiple control points","cells":[{"id":0,"value":"md`# Closest Point on Line: Solution with multiple control points\n\nConsider an axis going through two points **X₁** = ⟨*x₁*,*y₁*⟩ and **X₂** = ⟨*x₂*,*y₂*⟩.\nIn this notebook, we will find the coordinates of point **x'** = ⟨*x'*,*y'*⟩ on that axis that is closest to point **x** = ⟨*x*,*y*⟩.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":610,"value":"height = 500;","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"mutable x1 = [50, height-50];","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"mutable x2 = [width-50, height-100];","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"mutable x = [[(1/7)*width, 120], [(2/7)*width, 200],[(3/7)*width, 100],[(4/7)*width, 180], [(5/7)*width, 50], [(6/7)*width, 130]];","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"mutable x_proj = [[]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"function distance([x1, y1], [x2, y2]) {\n return Math.sqrt((x2 - x1) ** 2 + (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":48,"value":"function project([x1, y1], [x2, y2], [x3, y3]) {\n const x21 = x2 - x1, y21 = y2 - y1;\n const x31 = x3 - x1, y31 = y3 - y1;\n return (x31 * x21 + y31 * y21) / (x21 * x21 + y21 * y21);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}