2b:null 2c:["$","title",null,{"children":"Drawing (Simple) Polygons | T.J. Jankun-Kelly | Observable"}] 31:Tb66,viewof poly_grid = { function mousedown([i,j]) { const id = mutable control_points.length; mutable control_points.push([i,j]); mutable control_points = mutable control_points; const grid_pt = [(i+0.5)*grid_size, (grid_count-j-0.5)*grid_size]; mutable control_grid = [...mutable control_grid, grid_pt]; const verts = svg.select("g.vertices") verts.append("rect") .attr("class", "" + id + " endbox") .attr("stroke", "black") .style("fill-opacity", 0) .attr("stroke-width", 3) .attr("width", grid_size) .attr("height", grid_size) .call(d3.drag() .on("start", clear) .on("drag", dragging) .on("end", update)); verts.append("circle") .attr("class", id) .attr("cx", grid_pt[0]) .attr("cy", grid_pt[1]) .attr("r", 4) .attr("fill", "black") .call(d3.drag() .on("start", clear) .on("drag", dragging) .on("end", update)); clear(); } function clear() { mutable poly_points = []; svg.selectAll(".raster_grid").style("fill", "none"); } function dragging() { if(d3.event.x < 0 || d3.event.x > ewidth || d3.event.y < 0 || d3.event.y > height) return; const dragged = mutable control_grid[parseInt(this.classList[0])]; if(Math.trunc(dragged[0]/grid_size) != Math.trunc(d3.event.x/grid_size) || Math.trunc(dragged[1]/grid_size) != Math.trunc(d3.event.y/grid_size)) { dragged[0] = grid_size * Math.trunc(d3.event.x/grid_size) + 0.5 * grid_size; dragged[1] = grid_size * Math.trunc(d3.event.y/grid_size) + 0.5 * grid_size; } mutable control_grid = mutable control_grid; } function update() { let idx = 0; for (const pt of mutable control_points) { pt[0] = Math.round((mutable control_grid[idx][0]) / grid_size - 0.5); pt[1] = Math.round(grid_count - (mutable control_grid[idx][1]) / grid_size - 0.5); ++idx; } mutable control_points = mutable control_points; } const poly = raster_grid({size: grid_size, grid_width: ewidth, grid_height: height, mousedown: mousedown}); poly.append(html`

Polygon Fill. Click to add vertices; drag vertices to move.

`); let svg = poly.getElementsByTagName("svg")[0]; svg.style.margin = "auto"; svg.style.display = "block"; svg = d3.select(svg); svg.selectAll(".raster_grid") .style("transition", "fill .4s ease") .style("fill", "transparent") .attr("id", ([i,j]) => "poly" + (grid_count*j+i)); const outline = svg.append("path") .attr("class", "outline") .attr("fill", "none") .attr("stroke-width", "3") .attr("stroke", "black"); svg.append("g") .attr("class", "vertices") .style("cursor", "move"); return poly; }32:T500,md`[Triangles are easy to draw](https://observablehq.com/@infowantstobeseen/drawing-triangles "Drawing Triangles"), but higher order polygons are not on modern architectures as they are not natively supported. In the past, polygons could be rendered via [methods created for scan-oriented cathode ray tubes](https://en.wikipedia.org/wiki/Scanline_rendering "Wikipedia: Scanline rendering"), but these are difficult to mix with object-based methods being used on modern GPUs. Instead, polygons are broken up, or [*tesselated*](https://en.wikipedia.org/wiki/Polygon_triangulation "Wikipedia: Polygon Triangulation"), into triangles, usually during the modeling process as a pre-process. There are many approaches that deal with polygons of increasing complexity; here, I describe a straightforward, though not computationally efficient, approach for simple polygons—*ear cutting*. ## Ear Cutting The ear cutting approach (or ear trimming or ear clipping, all similarly violent) makes use of the fact that [any simple (non-intersecting) polygon has at least two *ears*](https://en.wikipedia.org/wiki/Two_ears_theorem "Wikipedia: Two Ears Theorem")—a triangle where two edges of the triangle are edges of the polygon and the other edge lies entirely within the polygon.`33:T6d5,ears = { let ear_fig = html`

Polygon ears ${tex`\Delta\mathrm{\color{${d3.schemeCategory10[1]}}b\color{${d3.schemeCategory10[2]}}c\color{${d3.schemeCategory10[3]}}d}`} and ${tex`\Delta\mathrm{\color{${d3.schemeCategory10[3]}}d\color{${d3.schemeCategory10[4]}}e\color{${d3.schemeCategory10[0]}}a}`}.

`; let svg = ear_fig.getElementsByTagName("svg")[0]; svg.style.margin = "auto"; svg.style.display = "block"; svg = d3.select(svg); const polygon = [[170, 50], [70, 230], [150, 270], [150, 190], [270, 230]]; svg.append("path") .attr("stroke", "grey") .attr("stroke-dasharray", 4) .attr("fill", "#eaeaea") .attr("d", `M${polygon.slice(1,4).join("L")}Z`); svg.append("path") .attr("stroke", "grey") .attr("stroke-dasharray", 4) .attr("fill", "#eaeaea") .attr("d", `M${[...polygon.slice(3), polygon[0]].join("L")}Z`); for(let [start, end] of polygon.map((x,i) => [i, (i+1) % polygon.length])) svg.append("line") .attr("stroke", "black") .attr("x1", polygon[start][0]).attr("y1", polygon[start][1]) .attr("x2", polygon[end][0]).attr("y2", polygon[end][1]); const alpha = "abcde"; let idx = 0; for(let vertex of polygon) { let group = svg.append("g"); group.attr("transform", "translate(" + vertex[0] + ", " + vertex[1] + ")"); group.append("circle") .attr("r", 5) .attr("fill", d3.schemeCategory10[idx]); group.append("text") .text(alpha[idx]) .attr("transform", "translate(5, 15)") .attr("fill", d3.schemeCategory10[idx]); ++idx; } return ear_fig; }34:T490,md`In the above polygon, only triangles ${tex`\Delta\mathrm{\color{${d3.schemeCategory10[1]}}b\color{${d3.schemeCategory10[2]}}c\color{${d3.schemeCategory10[3]}}d}`} and ${tex`\Delta\mathrm{\color{${d3.schemeCategory10[3]}}d\color{${d3.schemeCategory10[4]}}e\color{${d3.schemeCategory10[0]}}a}`} are ears. As examples, ${tex`\Delta\mathrm{\color{${d3.schemeCategory10[4]}}e\color{${d3.schemeCategory10[0]}}a\color{${d3.schemeCategory10[2]}}b}`} is not an ear as ${tex`\overline{\mathrm{\color{${d3.schemeCategory10[2]}}b\color{${d3.schemeCategory10[4]}}e}}`} passes outside of the polygon; ${tex`\Delta\mathrm{\color{${d3.schemeCategory10[0]}}a\color{${d3.schemeCategory10[2]}}b\color{${d3.schemeCategory10[3]}}d}`} is not an ear as two edges (${tex`\overline{\mathrm{\color{${d3.schemeCategory10[2]}}b\color{${d3.schemeCategory10[3]}}d}}`} and ${tex`\overline{\mathrm{\color{${d3.schemeCategory10[3]}}d\color{${d3.schemeCategory10[0]}}a}}`}) are internal edges—only one is allowed. Once ears are identified, they can be removed, leaving two or more new ears or a single triangle that can be rendered directly. That is the basis of the ear cutting algorithm: `35:T84e, function earcut(vertices) { // Cut until a triangle, box, or concave polygon left let pixels = [] let concave = vertices.filter((x,i) => is_concave(vertices[mod(i-1, vertices.length)], x, vertices[(i+1)%vertices.length])); let idx = 0; while(concave.length > 0 && vertices.length > 3) { // Skip if this is concave if(!concave.some((x) => equal(x, vertices[idx]))) { if(is_ear(vertices[idx? idx-1: vertices.length-1], vertices[idx], vertices[(idx+1)%vertices.length], concave)) { // Draw pixels, remove ear vertex, update concave pixels = [...pixels, ...fill_triangle(vertices[mod(idx-1, vertices.length)], vertices[idx], vertices[(idx+1)%vertices.length])]; concave = concave.filter((x) => !equal(x, vertices[mod(idx-1, vertices.length)]) || is_concave(vertices[mod(idx-2, vertices.length)], x, vertices[(idx+1)%vertices.length])); concave = concave.filter((x) => !equal(x, vertices[(idx+1)%vertices.length]) || is_concave(vertices[mod(idx-1, vertices.length)], x, vertices[(idx+2)%vertices.length])); vertices = [...vertices.slice(0,idx), ...vertices.slice(idx+1)]; idx -= 1; // Don't move forward } } idx = (idx+1) % vertices.length; } // Handle box or triangle if(vertices.length == 3) return [...pixels, ...fill_triangle(...vertices)]; else // A convex polygon we fan return [...pixels, ...d3.range(2,vertices.length) .map((i) => fill_triangle(vertices[0], vertices[i-1], vertices[i])).flat()]; }36:T59c,convex = { let convex_fig = html`

A convex polygon tesselated into a triangle fan.

`; let svg = d3.select(convex_fig.getElementsByTagName("svg")[0]); const polygon = [[170, 280], [270, 230], [230, 70], [110, 50], [70, 190]]; for(let i of d3.range(2, polygon.length)) { svg.append("path") .attr("stroke", "grey") .attr("stroke-dasharray", 4) .attr("fill", "#eaeaea") .attr("d", `M${[polygon[0], polygon[i-1], polygon[i]].join("L")}Z`); } for(let [start, end] of polygon.map((x,i) => [i, (i+1) % polygon.length])) svg.append("line") .attr("stroke", "black") .attr("stroke-width", 1.25) .attr("x1", polygon[start][0]).attr("y1", polygon[start][1]) .attr("x2", polygon[end][0]).attr("y2", polygon[end][1]); const alpha = "abcde"; let idx = 0; for(let vertex of polygon) { let group = svg.append("g"); group.attr("transform", "translate(" + vertex[0] + ", " + vertex[1] + ")"); group.append("circle") .attr("r", 5) .attr("fill", d3.schemeCategory10[idx]); group.append("text") .text(alpha[idx]) .attr("transform", "translate(5, 15)") .attr("fill", d3.schemeCategory10[idx]); ++idx; } return convex_fig; }37:T570,md`### Identifying Ears If a polygon is concave, we must then identify its two or more ears. Starting at a non-concave vertex, we check to see if the triangle formed with its neighbors contains any other points in the polygon; this is an application of our [barycentric coordinates](https://observablehq.com/@infowantstobeseen/barycentric-coordinates "Barycentric Coordinates") test we used for [drawing triangles](https://observablehq.com/@infowantstobeseen/drawing-triangles "Drawing Triangles") previously. If no other vertex is within our candidate triangle it is an ear; otherwise, we move on to the next candidate vertex. If it is an ear, we can mark it as an ear for later. Whenever we do remove and render it, we will have to update the convex/concave state of the triangle vertices that are still part of the polygon; they may have become convex (no vertex will become concave). For example, if we render and remove the two ears ${tex`\Delta\mathrm{\color{${d3.schemeCategory10[1]}}b\color{${d3.schemeCategory10[2]}}c\color{${d3.schemeCategory10[3]}}d}`} and ${tex`\Delta\mathrm{\color{${d3.schemeCategory10[3]}}d\color{${d3.schemeCategory10[4]}}e\color{${d3.schemeCategory10[0]}}a}`} from the concave polygon above, ${tex`\mathrm{\color{${d3.schemeCategory10[3]}}d}`} becomes convex. `38:Tb76,md`After each stage of ear identification and removal, we start the process again so long as concave vertices remain. If no concave vertices remain (or if we have four or less vertices, which will always generate one or two triangles), we can create a triangle fan an render the remainder directly. ### Analysis Given ${tex`n`} vertices, we must first identify the concave vertices, which requires linear time. Every pass, we can identify at least two ears; each ear requires a point-in-polygon test for the other vertices, which is again linear; in the worst case, we only remove two ears per pass, for roughly ${tex`\mathcal{O}\left(\frac{n}{2}\right)`} passes. Since updating the concave vertex list is also linear work per pass, the overall runtime is ${tex`\mathcal{O}\left(n^2\right)`}. This analysis assumes fast vertex list access and updates via appropriate data structures. ### Issues The above implementation is simple to conceptualize, but not the most efficient. [A linear time polygon tesselation algorithm](https://doi.org/10.1007%2FBF02574703 'Bernard Chazelle, "Triangulating a Simple Polygon in Linear Time," Discrete & Computational Geometry, 6 (3): 485–524') exists, but is noted for its complexity of implementation. If the polygon has holes, [ear cutting is not sufficient by itself](https://www.geometrictools.com/Documentation/TriangulationByEarClipping.pdf "David Eberly: Triangulation by Ear Cutting"), and there are no known linear time algorithms for this task. Numerical precision can be an issue when calculating the cross product and comparing against 0. Finally, the above algorithm does not prevent the generation of [sliver triangles](https://en.wikipedia.org/wiki/Glossary_of_computer_graphics#sliver_triangle "Wikipedia: Glossary of Computer Graphics (Sliver Triangles)"), which can lead to rendering artifacts due to imprecise interpolation. [A more robust method](http://www.cosy.sbg.ac.at/~held/projects/triang/triang.html "Martin Held: FIST: Fast Industrial-Strength Triangulation of Polygons") could detect slivers and swap diagonals appropriately. ## Summary The ear cutting approach provides a method to split simple polygons into triangles for rasterization. This approach is sufficient for lower order simple polygons, but more sophisticated methods should be used for more complex polygons. ## Appendix: Implementation Instead of the "find-two, cut-two, re-find" loop outlined above, my implementation cuts the first ear it finds then just continues iterating until only two triangles are left. For the inside polygon test, only the concave vertices need to be tested, which saves some time. Otherwise, the implementation is as discussed above. This code is good for demonstrating the concept, but for real work, find a library. [earcut.js](https://github.com/mapbox/earcut "Mapbox: earcut.js") is recommended for Javascript; implementations for other languages are available.`39:[] 2f:{"id":"27da3efd46ae67be","slug":"drawing-simple-polygons","title":"Drawing (Simple) Polygons","thumbnail":"a58891b76bf8984eb085e2752f039d4badd84651db3a0c5f09e28e27cd706208","access_level":"public","create_time":"$D2018-09-19T13:21:41.672Z","update_time":"$D2020-08-29T15:50:04.297Z","view_time":null,"first_public_time":"$D2019-09-30T21:44:54.429Z","fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"57cbc1498c70b426","login":"infowantstobeseen","name":"T.J. Jankun-Kelly","avatar_url":"https://avatars-next.observableusercontent.com/df9d7f817f9ad92a763b56ee2e891ca0716a6c2f6c398811547f89f0448fa181","tier":"starter_2024"},"version":429,"publish_version":429,"role":null,"authored":false,"authors":[{"type":"individual","id":"e83a97795d4ad3a2","login":"infowantstobeseen","name":"T.J. Jankun-Kelly","avatar_url":"https://avatars-next.observableusercontent.com/df9d7f817f9ad92a763b56ee2e891ca0716a6c2f6c398811547f89f0448fa181","tier":null}],"members":[{"type":"individual","id":"e83a97795d4ad3a2","login":"infowantstobeseen","name":"T.J. Jankun-Kelly","avatar_url":"https://avatars-next.observableusercontent.com/df9d7f817f9ad92a763b56ee2e891ca0716a6c2f6c398811547f89f0448fa181","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":8,"collection":{"id":"fa97e7eb1e9d2163","slug":"computer-graphics","title":"Computer Graphics","owner":{"id":"57cbc1498c70b426","login":"infowantstobeseen","name":"T.J. Jankun-Kelly"}},"type":"notebook","body":{"title":"Drawing (Simple) Polygons","cells":[{"id":0,"value":"md`# Drawing (Simple) Polygons\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"{\n const clear = html``;\n \n clear.onclick = (e) => {\n mutable control_points = [];\n mutable control_grid = [];\n d3.select(viewof poly_grid).selectAll(\".vertices>circle\").remove();\n d3.select(viewof poly_grid).selectAll(\".vertices>rect\").remove();\n mutable poly_points = [];\n d3.select(viewof poly_grid).selectAll(\".raster_grid\").style(\"fill\", \"none\");\n }\n \n return clear;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"mutable poly_points = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":126,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":133,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":195,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":294,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":302,"value":"md`### Determining Convexity\n\nIf our starting polygon is convex, ear cutting is not required; we can build a triangle from polygon ${tex`\\mathrm{p_0\\dots p}_n`} by connecting ${tex`\\mathrm{p_0}`} to every other vertex appropriately to tesselate:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":237,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":309,"value":"md`A triangle is convex if all internal angles are less than 180°; we determine if a point ${tex`\\mathrm{p}_i`} is convex/concave via [the cross product](https://en.wikipedia.org/wiki/Cross_product \"Wikipedia: Cross Product\") of its incident edges: since ${tex`\\overrightarrow{\\mathrm{p}_i\\mathrm{p}_{i+1}} \\times \\overrightarrow{\\mathrm{p}_i\\mathrm{p}_{i-1}} = |\\overrightarrow{\\mathrm{p}_i\\mathrm{p}_{i+1}}||\\overrightarrow{\\mathrm{p}_i\\mathrm{p}_{i-1}}|\\sin \\theta`}, then the cross product of the two edges is positive only when the internal angle ${tex`\\theta`} between them is not greater than 180°. Therefore, if all vertices pass the cross product test, then the polygon can be tesselated via triangle fan with no ear cut.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":312,"value":"function is_concave(v1, v2, v3)\n{\n // Assume counter-clockwise order, or the test will be reversed\n // Numerical tolerance check as opposed to zero\n return mutable ccw? cross(sub(v3, v2), sub(v1, v2))[2] < -zed : cross(sub(v1, v2), sub(v3, v2))[2] < -zed;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":392,"value":"md`Note, unlike the other calculations in this algorithm, **triangle orientation matters.** The above assumes [the Right-hand Rule](https://en.wikipedia.org/wiki/Right-hand_rule \"Wikipedia: Right-hand Rule\") is used to determine orientation, and thus triangles must be specified counter-clockwise. In this demonstration, I detect orientation when a user first generates a triangle via clicking and correct for it here if needed.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":318,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":321,"value":"function is_ear(v1, v2, v3, concave)\n{\n // Filter out our end vertices then check if remaining concave verts are in triangle. \n // Return true only if none inside\n return concave.filter((x) => !equal(x, v1) && !equal(x, v3))\n .every((x) => !in_triangle(x, v1, v2, v3));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":249,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"mutable control_points = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"mutable control_grid = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"import {raster_grid} from \"@infowantstobeseen/raster-grid\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"import {calc_barycentric,sub,cross} from \"@infowantstobeseen/barycentric-coordinates\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"import {fill_triangle,in_triangle} from \"@infowantstobeseen/drawing-triangles\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"d3 = require(\"d3-selection@1.4\", \"d3-drag@1.2\", \"d3-array@2.4\", \"d3-scale-chromatic@1.5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":324,"value":"equal = (array1, array2) => array1.length === array2.length && array1.every(function(v, i) { return v === array2[i]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"ewidth= Math.min(width, 400)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"height = ewidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"grid_count = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"grid_size = Math.min(ewidth, height) / grid_count","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"function fill_poly(vertices)\n{\n // Simple cases: Not a polygon or one triangle\n if(vertices.length < 3)\n return [];\n else if(vertices.length == 3)\n return fill_triangle(...vertices);\n return earcut(vertices);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":376,"value":"mod = (x, base) =>\n{\n // Want negative mod to return positive (like the rest of the world)\n return ((x % base) + base) % base;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":420,"value":"mutable ccw = undefined","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"{ \n if(control_points.length == 3)\n {\n // Determine orientation\n mutable ccw = cross(sub(control_points[1], control_points[0]), sub(control_points[2], control_points[0]))[2] > -zed;\n }\n \n mutable poly_points = [...fill_poly(control_points)];\n\n for(const pt of mutable poly_points) {\n const grid_rect = d3.select(viewof poly_grid).select(\"rect#poly\" + (grid_count * pt[1] + pt[0]));\n grid_rect.style(\"fill\", \"lightsteelblue\"); \n }\n \n return md`Update fill`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"{\n d3.select(viewof poly_grid).selectAll(\".vertices>circle\").each(function process() {\n const target = mutable control_grid[parseInt(this.classList[0])];\n d3.select(this).attr(\"cx\", target[0]).attr(\"cy\", target[1]);\n });\n \n d3.select(viewof poly_grid).selectAll(\".vertices>rect\").each(function process() {\n const target = mutable control_grid[parseInt(this.classList[0])];\n d3.select(this).attr(\"x\", grid_size*Math.trunc(target[0]/grid_size)).attr(\"y\", grid_size*Math.trunc(target[1]/grid_size));\n });\n \n if(control_grid.length > 0)\n d3.select(viewof poly_grid).select(\"path\")\n .attr(\"d\", \"M\" + control_grid.map(([i,j]) => \" \" + i + \" \" + j) + \" Z\");\n else\n d3.select(viewof poly_grid).select(\"path\")\n .attr(\"d\", \"\");\n\n\n return md`Update the outline`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"zed = -0.0000000000000005 // Error tolerance for the fact that javascript floats are pretty poor","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 30:"$2f:body"