30:T8d2, { let d3 = await require('d3'); const svg = d3.select(DOM.svg(400, 300)) .attr("fill", "none"); let [p1, p2, p3] = [[10, 100], [210, 100], [210, 200]]; let [e1, e2] = [[200, 0], [200, 300]]; const edge = svg.append("path") .attr("d", `M${e1}L${e2}`) .attr("stroke", "rgba(0,0,0,0.5)"); const c = svg.append("path") .attr("stroke", "rgba(0,0,0,0.5)") .attr("stroke-width", "1px"); const r = svg.append("path") .attr("stroke", "rgba(255,0,0,0.5)") .attr("stroke-width", `${width}px`) .attr("stroke-linejoin", join); const g = svg.append("path") .attr("stroke", "rgba(0,255,0,0.5)") .attr("stroke-width", `${width}px`) .attr("stroke-linejoin", join); const b = svg.append("path") .attr("stroke", "rgba(0,0,255,0.5)") .attr("stroke-width", `${width}px`) .attr("stroke-linejoin", join); const point = svg.append("g") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "rgba(0,0,0,0.5)") .attr("stroke-width", 5) .selectAll("circle") .data([p1, p2, p3]) .enter().append("circle") .attr("r", 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(); } function update() { c.attr("d", `M${p1}L${p2}L${p3}`) let i1 = intersection([p1, p2], [e1, e2]); let i2 = intersection([p2, p3], [e1, e2]); if (i1 && i2 && p2[0] > 200) { r.attr("d", `M${p1}L${i1}`); g.attr("d", `M${i1}L${p2}L${i2}`); b.attr("d", `M${i2}L${p3}`); } else if (i1 && i2) { r.attr("d", `M${i1}L${p2}L${i2}`); g.attr("d", `M${p1}L${i1}`); b.attr("d", `M${i2}L${p3}`); } else if (i1) { r.attr("d", `M${p1}L${i1}`); g.attr("d", `M${i1}L${p2}L${p3}`); b.attr("d", null); } else if (i2) { r.attr("d", `M${p1}L${p2}L${i2}`); g.attr("d", `M${i2}L${p3}`); b.attr("d", null); } else { r.attr("d", `M${p1}L${p2}L${p3}`); g.attr("d", null); b.attr("d", null); } point.attr("cx", d => d[0]).attr("cy", d => d[1]); } return svg.node(); }31:[] 2e:{"title":"Line Clipping","cells":[{"id":157,"value":"md`# Line Clipping`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"viewof width = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"viewof join = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"function intersection([[x1, y1], [x2, y2]], [[x3, y3], [x4, y4]]) {\n const denom = ((y4 - y3) * (x2 - x1)) - ((x4 - x3) * (y2 - y1));\n const numeA = ((x4 - x3) * (y1 - y3)) - ((y4 - y3) * (x1 - x3));\n const numeB = ((x2 - x1) * (y1 - y3)) - ((y2 - y1) * (x1 - x3));\n\n if (denom === 0) {\n return null;\n }\n\n const uA = numeA / denom;\n const uB = numeB / denom;\n\n if (uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1) {\n const x = x1 + (uA * (x2 - x1));\n const y = y1 + (uA * (y2 - y1));\n return [x, y];\n }\n\n return null;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}