30:T57d,viewof settings = { const form = html` `; const size = form.querySelector("#size"), count = form.querySelector("#count"), minPoints = form.querySelector("#minPoints"), maxPoints = form.querySelector("#maxPoints"), background = form.querySelector("#background"); minPoints.oninput = () => { maxPoints.value = Math.max(+minPoints.value, +maxPoints.value); maxPoints.min = minPoints.value; }; form.oninput = () => { form.value = { size: +size.value, count: +count.value, minPoints: +minPoints.value, maxPoints: +maxPoints.value, background: background.value }; }; form.oninput(); return form; }31:[] 2e:{"title":"Polygon Endcaps","cells":[{"id":0,"value":"md`# Polygon Endcaps`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"{\n const div = html`

`;\n\n const svg = d3\n .select(div)\n .selectAll(\"svg\")\n .data(polygons)\n .join(\"svg\")\n .attr(\"viewBox\", `0 0 ${settings.size} ${settings.size}`)\n .attr(\"width\", settings.size)\n .attr(\"height\", settings.size)\n .style(\"color\", \"gold\");\n\n svg\n .selectAll(\"polygon\")\n .data(d => d)\n .join(\"polygon\")\n .attr(\"points\", d => d.points.map(p => p.join(\",\")).join(\" \"))\n .attr(\"fill\", d => fill(d.center[0]));\n\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"x = d3.randomUniform(settings.size)","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"y = d3.randomUniform(settings.size)","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"nPoints = d3.randomUniform(settings.minPoints, settings.maxPoints)","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"opacity = d3\n .scaleLinear()\n .domain([0, settings.size])\n .range([1, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"fill = d3\n .scaleLinear()\n .domain([0, settings.size])\n .range([\"#FFD700\", settings.background])","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"polygons = {\n const polygons = [];\n\n while (polygons.length < settings.count) {\n const n = nPoints(),\n poly = [];\n\n while (poly.length < n) {\n poly.push([x(), y()]);\n }\n\n const triangles = [\n ...d3.Delaunay.from([\n ...[[0, 0], [0, settings.size]],\n ...poly\n ]).trianglePolygons()\n ].map(d => {\n const points = d.slice(0, -1),\n [cx, cy] = d3.polygonCentroid(points);\n\n return {\n points,\n center: [cx, cy],\n opacity: opacity(cx)\n };\n });\n\n polygons.push(triangles);\n }\n\n return polygons;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}