2c:null 2d:["$","title",null,{"children":"Line Clipping | John Firebaugh | Observable"}] 32: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(); }33:[] 30:{"id":"add8a8540d1e7289","slug":"line-clipping","title":"Line Clipping","thumbnail":"fdcecc524f94a7729be27321a392e12f16ed7e5e25b5912926ad3fb85c9415eb","access_level":"public","create_time":"$D2018-04-25T11:34:32.081Z","update_time":"$D2018-04-25T11:57:45.423Z","view_time":null,"first_public_time":"$D2018-04-25T11:34:38.544Z","has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"157a1e3b7b68f77d","login":"jfirebaugh","name":"John Firebaugh","avatar_url":"https://avatars-next.observableusercontent.com/fc7849e25c4be8c8e0725210c61719768250a8171e1b219f8f403dac03ef4c93","tier":"starter_2024"},"version":163,"publish_version":163,"role":null,"authored":false,"authors":[{"type":"individual","id":"dfbe11e3fea1d23b","login":"jfirebaugh","name":"John Firebaugh","avatar_url":"https://avatars-next.observableusercontent.com/fc7849e25c4be8c8e0725210c61719768250a8171e1b219f8f403dac03ef4c93","tier":null}],"members":[{"type":"individual","id":"dfbe11e3fea1d23b","login":"jfirebaugh","name":"John Firebaugh","avatar_url":"https://avatars-next.observableusercontent.com/fc7849e25c4be8c8e0725210c61719768250a8171e1b219f8f403dac03ef4c93","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Line Clipping","cells":[{"id":157,"value":"md`# Line Clipping`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"viewof width = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"viewof join = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"