24:null 25:["$","title",null,{"children":"geometric.lineIntersectsPolygon | Harry Stevens | Observable"}] 2a:T825,chart = { const svg = d3.select(DOM.svg(width, height)); svg.append("rect") .attr("width", width) .attr("height", height); let points = {a: [Math.round(width * .1), Math.round(height / 2)], b: [Math.round(width * .9), Math.round(height / 2)]}; let length = geometric.lineLength([points.a, points.b]); svg.append("polygon") .attr("points", polygon.join(" ")); const drawline = svg.append("line") .attr("class", "drawline") .attr("x1", points.a[0]) .attr("y1", points.a[1]) .attr("x2", points.b[0]) .attr("y2", points.b[1]); const pointACircle = svg.append("circle") .attr("class", "point-a") .attr("data-point", "a") .attr("r", radius) .attr("transform", `translate(${points.a})`) .call(drag); const pointBCircle = svg.append("circle") .attr("class", "point-b") .attr("data-point", "b") .attr("r", radius) .attr("transform", `translate(${points.b})`) .call(drag); function drag(sel){ const selPoint = sel.attr("data-point"); const dragGenerator = d3.drag() .on("start", start) .on("drag", dragging) .on("end", end); function start(){ sel.classed("active", 1); drawline.classed("active", 1); } function dragging(event){ let x = Math.round(event.x); x = x < radius ? radius : x > width - radius ? width - radius : x; let y = Math.round(event.y); y = y < radius ? radius : y > height - radius ? height - radius : y; points[selPoint] = [x, y]; drawline .attr("x1", points.a[0]) .attr("y1", points.a[1]) .attr("x2", points.b[0]) .attr("y2", points.b[1]); pointACircle .attr("transform", `translate(${points.a})`); pointBCircle .attr("transform", `translate(${points.b})`); } function end(){ sel.classed("active", 0); drawline.classed("active", 0); } sel.call(dragGenerator); } return svg.node(); }2b:[] 28:{"id":"30af6b3e41b71cc9","slug":"geometric-lineintersectspolygon","title":"geometric.lineIntersectsPolygon","thumbnail":"775de17b1c8717527ae15995613effbf6b5858f0d27ec1a9ce5633ecf87d4bc6","access_level":"public","create_time":"$D2019-08-01T15:37:46.434Z","update_time":"$D2023-04-07T20:25:22.183Z","view_time":null,"first_public_time":"$D2019-09-15T20:15:59.146Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":"starter_2024"},"version":120,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"61e2153e05789733","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":null}],"members":[{"type":"individual","id":"61e2153e05789733","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"cb194ebcc81c247f","slug":"geometric","title":"Geometric.js","owner":{"id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens"}},"type":"notebook","body":{"title":"geometric.lineIntersectsPolygon","cells":[{"id":0,"value":"md`# geometric.lineIntersectsPolygon\n\n[geometric.lineIntersectsPolygon](https://github.com/HarryStevens/geometric#lineIntersectsPolygon)(line, polygon) returns a boolean representing whether a line intersects a polygon.\n\nDrag either point to see how the intersection changes with the line.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"intersects = geometric.lineIntersectsPolygon(line, polygon);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"line = {\n while (true){\n let out = [];\n d3.select(chart).selectAll(\"circle\")\n .each((d, i, e) => {\n out.push(d3.select(e[i]).attr(\"transform\").split(\"(\")[1].split(\")\")[0].split(\",\").map(d0 => +d0) );\n });\n \n yield out; \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"polygon = {\n const center = [width / 2, height / 2].map(d => Math.round(d));\n return [\n [center[0] - 100, center[1]],\n [center[0] - 30, center[1]],\n [center[0] - 30, center[1] - 40],\n [center[0] - 10, center[1] - 97],\n [center[0] - 2, center[1] - 100],\n [center[0], center[1] - 130],\n [center[0] + 2, center[1] - 100],\n [center[0] + 10, center[1] - 97],\n [center[0] + 30, center[1] - 40],\n [center[0] + 30, center[1]],\n [center[0] + 100, center[1]],\n [center[0] + 100, center[1] + 120],\n [center[0] - 100, center[1] + 120]\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"md`## Style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"{\n d3.select(chart).select(\"rect\").classed(\"intersect\", intersects);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"height = 300;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"radius = 8;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"geometric = require(\"geometric@2\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2b","stdlib":"1","titling":"auto"}} 29:"$28:body"