2c:null 2d:["$","title",null,{"children":"Drawing Triangles | T.J. Jankun-Kelly | Observable"}] 32:T1087,viewof tri_grid = { const tri = raster_grid({size: grid_size, grid_width: ewidth, grid_height: height, mousedown: () => null}); tri.append(html`

Triangle Fill. Drag vertices to generate points.

Interpolated colors on a triangle. Drag vertices to generate points.

Issue with triangles that overlap.

`); let svg = tri.getElementsByTagName("svg")[0]; svg.style.margin = "auto"; svg.style.display = "block"; svg = d3.select(svg); svg.selectAll(".raster_grid") .style("fill", "transparent") .attr("id", ([i,j]) => "tri" + (grid_count*j+i)); for(let pt of left_pts) { svg.append("rect") .attr("stroke", "black") .attr("stroke-dasharray", "none") .style("fill-opacity", 0) .attr("stroke-width", 3) .attr("width", grid_size) .attr("height", grid_size) .attr("x", pt[0] * grid_size).attr("y", height - grid_size * (pt[1] + 1)); svg.append("circle") .attr("r", 3) .attr("fill", "black") .attr("cx", (pt[0] + 0.5)*grid_size).attr("cy", height - grid_size * (pt[1] + 0.5)); } svg.append("rect") .attr("stroke", "black") .attr("stroke-dasharray", "none") .style("fill-opacity", 0) .attr("stroke-width", 3) .attr("width", grid_size) .attr("height", grid_size) .attr("x", right_pts[0][0] * grid_size).attr("y", height - grid_size * (right_pts[0][1] + 1)); svg.append("circle") .attr("r", 3) .attr("fill", "black") .attr("cx", (right_pts[0][0] + 0.5)*grid_size).attr("cy", height - grid_size * (right_pts[0][1] + 0.5)); for(let pt of [left_pts[0], right_pts[0]]) { svg.append("line") .attr("stroke-width", "3") .attr("stroke-dasharray", "4") .attr("stroke", "black") .attr("x1", (pt[0] + 0.5)*grid_size).attr("y1", height - grid_size * (pt[1] + 0.5)) .attr("x2", (left_pts[1][0] + 0.5)*grid_size).attr("y2", height - grid_size * (left_pts[1][1] + 0.5)) svg.append("line") .attr("stroke-width", "3") .attr("stroke-dasharray", "4") .attr("stroke", "black") .attr("x1", (pt[0] + 0.5)*grid_size).attr("y1", height - grid_size * (pt[1] + 0.5)) .attr("x2", (left_pts[2][0] + 0.5)*grid_size).attr("y2", height - grid_size * (left_pts[2][1] + 0.5)) } svg.append("line") .attr("stroke-width", "3") .attr("stroke-dasharray", "4") .attr("stroke", "black") .attr("x1", (left_pts[1][0] + 0.5)*grid_size).attr("y1", height - grid_size * (left_pts[1][1] + 0.5)) .attr("x2", (left_pts[2][0] + 0.5)*grid_size).attr("y2", height - grid_size * (left_pts[2][1] + 0.5)) return tri; }36:T417,md`To address this, we can choose a point ${tex`\mathrm{p}`} (usually off-screen) to test against each vertex not part of a triangle edge (thus we test ${tex`\color{${d3.schemeCategory10[0]}}{\mathrm{a}}`} for points along edge ${tex`\color{${d3.schemeCategory10[0]}}{\overrightarrow{\mathrm{bc}}}`}); for one of the triangles, the vertex will be on the same side as ${tex`\mathrm{p}`} while the other triangle sharing the edge will have the point on the opposite side of the edge from the non-edge vertex. Thus, we can choose one side which is drawn, while the other is not. In the following example, points where the vertex opposite an edge is on the same side of ${tex`\mathrm{p}`} are only lightly shaded and outlined:`37:T115b,viewof offscreen_grid = { const tri = raster_grid({size: grid_size, grid_width: ewidth, grid_height: height, mousedown: () => null}); tri.append(html`

Offscreen point ${tex`\mathrm{p}=\left(-1, -1\right)`} used as on-edge tie-breaker; points failing the test are only lightly filled and outlined. Drag vertices to generate points.

`); let svg = tri.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]) => "tri" + (grid_count*j+i)); svg.append("line") .attr("class", "bc") .attr("stroke-width", "3") .attr("stroke", "black"); svg.append("line") .attr("class", "ac") .attr("stroke-width", "3") .attr("stroke", "black"); svg.append("line") .attr("class", "ab") .attr("stroke-width", "3") .attr("stroke", "black"); svg.append("rect") .attr("class", "endbox a") .attr("stroke", "black") .style("fill-opacity", 0) .attr("stroke-width", 3) .attr("width", grid_size) .attr("height", grid_size) .style("cursor", "move") .call(d3.drag() .on("start", clear) .on("drag", dragging) .on("end", update)); svg.append("rect") .attr("class", "endbox b") .attr("stroke", "black") .style("fill-opacity", 0) .attr("stroke-width", 3) .attr("width", grid_size) .attr("height", grid_size) .style("cursor", "move") .call(d3.drag() .on("start", clear) .on("drag", dragging) .on("end", update)); svg.append("rect") .attr("class", "endbox c") .attr("stroke", "black") .style("fill-opacity", 0) .attr("stroke-width", 3) .attr("width", grid_size) .attr("height", grid_size) .style("cursor", "move") .call(d3.drag() .on("start", clear) .on("drag", dragging) .on("end", update)); svg.append("circle") .style("cursor", "move") .attr("class", "vertex a") .attr("r", 4) .attr("fill", "black") .call(d3.drag() .on("start", clear) .on("drag", dragging) .on("end", update)); svg.append("circle") .style("cursor", "move") .attr("class", "vertex b") .attr("r", 4) .attr("fill", "black") .call(d3.drag() .on("start", clear) .on("drag", dragging) .on("end", update)); svg.append("circle") .style("cursor", "move") .attr("class", "vertex c") .attr("r", 4) .attr("fill", "black") .call(d3.drag() .on("start", clear) .on("drag", dragging) .on("end", update)); function clear() { mutable tri_points.splice(0, mutable tri_points.length); mutable tri_points = mutable tri_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 draggable = {"a": mutable a_grid, "b": mutable b_grid, "c": mutable c_grid}; const dragged = draggable[this.classList[1]]; 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 a_grid = mutable a_grid; mutable b_grid = mutable b_grid; mutable c_grid = mutable c_grid; } } function update() { mutable a[0] = Math.round((mutable a_grid[0]) / grid_size - 0.5); mutable a[1] = Math.round(grid_count - (mutable a_grid[1]) / grid_size - 0.5); mutable b[0] = Math.round((mutable b_grid[0]) / grid_size - 0.5); mutable b[1] = Math.round(grid_count - (mutable b_grid[1]) / grid_size - 0.5); mutable c[0] = Math.round((mutable c_grid[0]) / grid_size - 0.5); mutable c[1] = Math.round(grid_count - (mutable c_grid[1]) / grid_size - 0.5); mutable a = mutable a; mutable b = mutable b; mutable c = mutable c; } return tri; }38:T513,md`There are complications with this approach if the triangles are not oriented the same or if the off-screen point intersects the edge. In addition, if antialiasing is performed, then this test is superfluous as both triangles must be rastered for the blending to occur. The second issue with this approach is that, in serial, the cost of calculating the barycentric test is non-trivial, especially in comparison to incremental integer-based approaches like [the Midpoint Algorithm](https://observablehq.com/@infowantstobeseen/drawing-lines "Drawing Lines") for lines. While such an incremental approach is possible by updating the distances from each edge over individual scan-lines, modern graphics cards instead utilize massive parallelism to test multiple pixels in the potential triangle concurently. Serial approaches are less suited to the asychronous environment of the GPU. ## Summary Drawing triangles is very straightforward with an understanding of barycentric coordinates; their use extends to interpolation and antialiasing as well. This approach is particularly appropriate for the parallel computation of GPUs; for older, serial hardware, approaches like [scanline rendering](https://en.wikipedia.org/wiki/Scanline_rendering "Wikipedia: Scanline Rendering") could be considered.`39:T7bf,{ mutable tri_points.splice(0, mutable tri_points.length, ...fill_triangle(a, b, c)); mutable tri_points = mutable tri_points; const offscreen_barycenters = calc_barycentric([-1, -1], a, b, c); for(const pt of mutable tri_points) { // All the top points let grid_rect = d3.select(viewof tri_grid).select("rect#tri" + (grid_count * pt[1] + pt[0])); grid_rect.style("fill", "lightsteelblue"); // Color interpolated points. Ideally, this would be in the same code as your loop for the original pixels const barycenters = calc_barycentric(pt, a, b, c); grid_rect = d3.select(viewof color_grid).select("rect#tri" + (grid_count * pt[1] + pt[0])); const color = trilerp_colors(...calc_barycentric(pt, a, b, c)); grid_rect.style("fill", "rgb(" + color[0] + "," + color[1] + "," + color[2] + ")" ); // Neighbor corrected points. Again, should be part of the original code, not separate. Remember zed corrects // for JS precision. grid_rect = d3.select(viewof offscreen_grid).select("rect#tri" + (grid_count * pt[1] + pt[0])); grid_rect.style("fill", barycenters.map((x,i) => (x > zed || offscreen_barycenters[i] > zed)).every(x => x) ? "lightsteelblue" : "lavender"); grid_rect.style("stroke", barycenters.map((x,i) => (x > zed || offscreen_barycenters[i] > zed)).every(x => x) ? "steelblue" : "white"); grid_rect.style("stroke-dasharray", barycenters.map((x,i) => (x > zed || offscreen_barycenters[i] > zed)).every(x => x) ? "none" : "4"); grid_rect.style("stroke", barycenters.map((x,i) => (x > zed || offscreen_barycenters[i] > zed)).every(x => x) ? "steelblue" : "white"); grid_rect.style("stroke-width", barycenters.map((x,i) => (x > zed || offscreen_barycenters[i] > zed)).every(x => x) ? "1" : "1"); yield Promises.tick(10).then(() => md`Update points`); } return md`Update points` }3a:T452,{ for(let grid of [viewof tri_grid, viewof color_grid, viewof offscreen_grid]) { d3.select(grid).selectAll(".vertex").each(function process() { const target = {"a": a_grid, "b": b_grid, "c": c_grid}[this.classList[1]]; d3.select(this).attr("cx", target[0]).attr("cy", target[1]); }); d3.select(grid).selectAll(".endbox").each(function process() { const target = {"a": a_grid, "b": b_grid, "c": c_grid}[this.classList[1]]; d3.select(this).attr("x", grid_size*Math.trunc(target[0]/grid_size)).attr("y", grid_size*Math.trunc(target[1]/grid_size)); }); d3.select(grid).select(".bc") .attr("x1", b_grid[0]) .attr("y1", b_grid[1]) .attr("x2", c_grid[0]) .attr("y2", c_grid[1]); d3.select(grid).select(".ac") .attr("x1", a_grid[0]) .attr("y1", a_grid[1]) .attr("x2", c_grid[0]) .attr("y2", c_grid[1]); d3.select(grid).select(".ab") .attr("x1", a_grid[0]) .attr("y1", a_grid[1]) .attr("x2", b_grid[0]) .attr("y2", b_grid[1]); } return md`Update the lines`; }3b:[] 30:{"id":"e5f70ef58cbee8e5","slug":"drawing-triangles","title":"Drawing Triangles","thumbnail":"a8a6464fea60e823e755afbe36c95040065fa05c3291db28fb9809872dd8433d","access_level":"public","create_time":"$D2018-09-17T15:47:05.414Z","update_time":"$D2022-09-08T14:57:41.048Z","view_time":null,"first_public_time":"$D2019-09-28T04:13:12.162Z","has_unpublished_edits":null,"fork":false,"stars":12,"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":412,"publish_version":null,"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,"lapsed":null,"subscribed":null,"forks":9,"collection":{"id":"fa97e7eb1e9d2163","slug":"computer-graphics","title":"Computer Graphics","owner":{"id":"57cbc1498c70b426","login":"infowantstobeseen","name":"T.J. Jankun-Kelly"}},"type":"notebook","body":{"titling":"auto","title":"Drawing Triangles","cells":[{"id":0,"value":"md`# Drawing Triangles\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"mutable tri_points = fill_triangle(a, b, c)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"md`Triangles are the most important primitive in computer graphics; all modern hardware is centered around rendering triangles very quickly. All other 2D polygons are then rendered via triangle via tesseltation first. Thus, it is important to have an efficient algorithm. The key to the algorithm described here is the use of [Barycentric coordinates](https://observablehq.com/@infowantstobeseen/barycentric-coordinates \"Observable: Barycentric Coordinates\"): We test each potential pixel to see if it is in the triangle and render if it is. \n\nThe first step is trivial: If the ${tex`\\mathrm{\\textcolor{${d3.schemeCategory10[0]}}{\\alpha}, \\textcolor{${d3.schemeCategory10[1]}}{\\beta}}`}, ${tex`\\mathrm{\\textcolor{${d3.schemeCategory10[2]}}{\\gamma}}`} coordinates are all non-negative, then the point is in the triangle or along the edge; usually, the pixel center is used at the candidate point:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"function in_triangle(pt, vert_a, vert_b, vert_c)\n{\n let [alpha, beta, gamma] = calc_barycentric(pt, vert_a, vert_b, vert_c);\n // zed is our error tolerance. Occasionally, points will be negative but pretty \n // much zero and thus we are in the triangle. zed corrects for this. Higher \n // precision floats or tiny tiny pixels avoid or ignore this\n if(alpha >= zed && beta >= zed && gamma >= zed )\n return true;\n else\n return false;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"md`To choose the candidate points, we use an [axis-aligned bounding box](https://en.wikipedia.org/wiki/Minimum_bounding_box#Axis-aligned_minimum_bounding_box \"Wikipedia: Minimum Bounding Box\") that contains only the triangle extents; this is cheaper than considering the entire display:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"function fill_triangle(vert_a, vert_b, vert_c)\n{\n const pts = [];\n let i_min = d3.min([vert_a, vert_b, vert_c], ([x,y]) => (Math.floor(x)));\n let i_max = d3.max([vert_a, vert_b, vert_c], ([x,y]) => (Math.ceil(x)));\n let j_min = d3.min([vert_a, vert_b, vert_c], ([x,y]) => (Math.floor(y)));\n let j_max = d3.max([vert_a, vert_b, vert_c], ([x,y]) => (Math.ceil(y)));\n\n for(let i = i_min; i <= i_max; ++i)\n for(let j = j_min; j <= j_max; ++j)\n if(in_triangle([i,j], vert_a, vert_b, vert_c)) pts.push([i,j]);\n return pts;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"md`## Issues\n\nThis algorithm, though simple, has some issues. First and foremost is that adjacent triangles will often render to the same raster; this occurs when the triangle edge passes through the pixel center, which is always true for the endpoints. Thus the color and other attributes at that pixel will vary on render order, which is not ideal:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"md`## Appendix: Implementation\n\nMost of the magic is in my [Barycentric coordinates](coordinates \"Observable: Barycentric Coordinates\") notebook; I just put it together to show the individual raster pixels, the use of trilinear interpolation, and potential issues. The tie-breaker strategy for shared edges is from [Shirley & Marschner](https://www.cs.cornell.edu/~srm/fcg4/ \"Fundamentals of Computer Graphics, 4th Ed.\").\n\nDue to the [numerical imprecision and error](https://en.wikipedia.org/wiki/Numerical_error \"Wikipedia: Numerical Error\"), I cannot safely compare against zero for the alpha/beta/gamma tests. Thus, I cheat and use a small enough tolerance that has worked for me. [A more robust method](https://floating-point-gui.de/errors/comparison/) or restructuring the calculations (such as intergerizing) could be more ideal, but this is sufficient for the demonstration here.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import {raster_grid} from \"@infowantstobeseen/raster-grid\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {calc_barycentric} from \"@infowantstobeseen/barycentric-coordinates\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"ewidth=Math.min(width, 400)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"height = ewidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"grid_count = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"grid_size = Math.min(ewidth, height) / grid_count","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"mutable a = [12, 18]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"mutable b = [0, 8]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"mutable c = [8,0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"mutable a_grid = [(mutable a[0] + 0.5) * grid_size, height - ((mutable a[1] + 0.5) * grid_size)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"mutable b_grid = [(mutable b[0] +0.5)* grid_size, height - ((mutable b[1] + 0.5)* grid_size)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"mutable c_grid = [(mutable c[0] + 0.5) * grid_size, height - (mutable c[1] + 0.5) * grid_size]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"right_pts = [[16,16], [3, 10], [12,1]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"right_tri = fill_triangle(...right_pts)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"left_pts = [[1,3], [12,1], [3,10]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"left_tri = fill_triangle(...left_pts)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"unhex = (hexrgb) => \n{\n // Hex string to rgb tuple via https://gist.github.com/rosszurowski/67f04465c424a9bc0dae\n var h = +hexrgb.replace('#', '0x'), r = h >> 16, g = h >> 8 & 0xff, b = h & 0xff;\n return [r, g, b];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"ca = unhex(d3.schemeCategory10[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"cb = unhex(d3.schemeCategory10[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"cc = unhex(d3.schemeCategory10[2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"trilerp_colors = (alpha, beta, gamma) =>\n{\n return [0,1,2].map((i) => ca[i] * alpha + cb[i] * beta + cc[i] * gamma);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"{\n d3.select(viewof intersect_grid).selectAll(\".raster_grid\").style(\"fill\", \"none\");\n while(true)\n {\n for(const pt of right_tri) {\n const grid_rect = d3.select(viewof intersect_grid).select(\"rect#tri\" + (grid_count * pt[1] + pt[0]));\n grid_rect.style(\"fill\", \"coral\"); \n }\n yield Promises.tick(1000).then(() => md`Animate intersection`);\n for(const pt of left_tri) {\n const grid_rect = d3.select(viewof intersect_grid).select(\"rect#tri\" + (grid_count * pt[1] + pt[0]));\n grid_rect.style(\"fill\", \"lightsteelblue\"); \n }\n yield Promises.tick(1000).then(() => md`Animate intersection`);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1"}} 31:"$30:body"