2c:null 2d:["$","title",null,{"children":"geometric.polygonIntersectsPolygon | Harry Stevens | Observable"}] 32:T49c,chart = { const svg = d3.select(DOM.svg(width, height)); svg.append("polygon") .attr("class", "b") .attr("points", polygonB); let center = [width / 2, height / 2]; let vertices = geometric.polygonRegular(5, 8000, center); const polygon = svg.append("polygon") .attr("class", "a") .attr("points", vertices) .call(drag); function drag(sel){ const dragGenerator = d3.drag() .on("start", start) .on("drag", dragging) .on("end", end); function start(){ sel.classed("active", 1); } function dragging(event){ const newCenter = [Math.round(event.x), Math.round(event.y)]; const angle = geometric.lineAngle([center, newCenter]); const distance = geometric.lineLength([center, newCenter]); vertices = geometric.polygonTranslate(vertices, angle, distance).map(vertex => { return vertex.map(point => Math.round(point)); }); polygon .attr("points", vertices); center = newCenter; } function end(){ sel.classed("active", 0); } sel.call(dragGenerator); } return svg.node(); }33:[] 30:{"id":"e3c8dd24ebad147e","slug":"geometric-polygonintersectspolygon","title":"geometric.polygonIntersectsPolygon","thumbnail":"4a74b370cf50e0d7be1873f92f09f4af516e01ac60d527637693b78ea687d0f2","access_level":"public","create_time":"$D2019-08-18T02:05:12.354Z","update_time":"$D2022-08-03T22:28:26.386Z","view_time":null,"first_public_time":"$D2019-09-15T20:15:48.667Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":"starter_2024"},"version":220,"publish_version":220,"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,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"cb194ebcc81c247f","slug":"geometric","title":"Geometric.js","owner":{"id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens"}},"type":"notebook","body":{"titling":"auto","title":"geometric.polygonIntersectsPolygon","cells":[{"id":29,"value":"md`# geometric.polygonIntersectsPolygon\n\n[geometric.polygonIntersectsPolygon](https://github.com/HarryStevens/geometric#polygonIntersectsPolygon)(polygonA, polygonB) returns a boolean representing whether polygonA intersects but is not contained by polygonB.\n\nDrag the blue polygon to see it in action.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"intersects = geometric.polygonIntersectsPolygon(polygonA, polygonB);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"polygonA = {\n while (true){\n const polygon = d3.select(\"polygon.a\");\n if (polygon._groups[0][0]){\n const points = polygon.attr(\"points\").split(\",\").map(d => +d);\n let vertices = [];\n for (let i = 0, n = points.length; i < n; i++){\n if (i % 2 === 0){\n vertices.push([points[i], points[i + 1]]);\n }\n }\n yield vertices;\n }\n else {\n yield [[0, 0]];\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"polygonB = {\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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md`## An edge case\ngeometric.polygonIntersectsPolygon also returns true if two overlapping rectangles share two edges.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"i = geometric.polygonIntersectsPolygon(a, b);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"viewof x = Inputs.range([0, width], {\n label: \"x\",\n value: 10,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"{\n const svg = d3.select(DOM.svg(width, 80));\n \n svg.append(\"polygon\")\n .attr(\"points\", a)\n .style(\"fill\", i ? \"steelblue\" : \"tomato\")\n .style(\"stroke\", \"black\");\n\n svg.append(\"polygon\")\n .attr(\"points\", b)\n .style(\"fill\", \"none\")\n .style(\"stroke\", \"black\");\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"a = [\n [x, 10],\n [x + 40, 10],\n [x + 40, 50],\n [x, 50]\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":" b = [\n [10, 30],\n [50, 30],\n [50, 70],\n [10, 70],\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`## Style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"{\n d3.select(\"polygon.b\").classed(\"intersects\", intersects);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"height = 300;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"radius = 8;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"geometric = require(\"geometric@2\");","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"