30:T559,viewof settings = { const form = html``; const numSides = form.querySelector("#num-sides"), size = form.querySelector("#size"), count = form.querySelector("#count"), minPoints = form.querySelector("#min-points"), maxPoints = form.querySelector("#max-points"); minPoints.oninput = () => { if (+minPoints.value > +maxPoints.value) maxPoints.value = minPoints.value; maxPoints.min = minPoints.value; }; form.oninput = () => (form.value = { numSides: +numSides.value, size: +size.value, count: +count.value, maxPoints: +maxPoints.value, minPoints: +minPoints.value }); form.oninput(); return form; }31:[] 2e:{"title":"Fractured Polygon","cells":[{"id":0,"value":"md`# Fractured Polygon`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"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\", `-${r} -${r} ${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\", \"currentColor\")\n .attr(\"opacity\", d => d.opacity);\n\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"r = settings.size / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"hull = {\n const points = [];\n\n const step = (Math.PI * 2) / settings.numSides;\n\n for (let angle = 0; angle < Math.PI * 2; angle += step) {\n points.push([r * Math.cos(angle), r * Math.sin(angle)]);\n }\n\n return points;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"x = d3.randomUniform(-r, r)","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"y = d3.randomUniform(-r, r)","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"opacity = d3\n .scaleLinear()\n .domain([-r, r])\n .range([1, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"nPoints = d3.randomUniform(settings.minPoints, settings.maxPoints)","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"polygons = {\n const polygons = [];\n\n while (polygons.length < settings.count) {\n const points = [],\n n = nPoints();\n\n while (points.length < n) {\n const p = [x(), y()];\n if (d3.polygonContains(hull, p)) points.push(p);\n }\n\n const triangles = [\n ...d3.Delaunay.from([...hull, ...points]).trianglePolygons()\n ].map(d => {\n const points = d.slice(0, -1),\n [cx, cy] = d3.polygonCentroid(points);\n\n return {\n points: points,\n opacity: opacity(cy)\n };\n });\n\n polygons.push(triangles);\n }\n\n return polygons;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}