2d:null 2e:["$","title",null,{"children":"Voroblobinoids | asgersp | Observable"}] 33:T52e,canvas = { const context = DOM.context2d(width, height); context.lineCap = "round"; context.lineJoin = "round"; context.lineWidth = 4; context.strokeStyle = "#fff"; while (true) { context.clearRect(0, 0, width, height); for (let i = 0; i < n; ++i) { const cell = voronoi.cellPolygon(i); if (cell === null) continue; context.beginPath(); drawRoundedPolygon(context, cell, radius); context.fillStyle = d3.schemeTableau10[i % 10]; context.fill(); context.stroke(); } context.beginPath(); voronoi.delaunay.renderPoints(context); context.fillStyle = "#000"; context.fill(); yield context.canvas; for (let i = 0; i < n; ++i) { const x = i << 1; const y = x + 1; positions[x] += velocities[x]; positions[y] += velocities[y]; if (positions[x] < -margin) positions[x] += width + margin * 2; else if (positions[x] > width + margin) positions[x] -= width + margin * 2; if (positions[y] < -margin) positions[y] += height + margin * 2; else if (positions[y] > height + margin) positions[y] -= height + margin * 2; velocities[x] += 0.1 * (Math.random() - 0.5) - 0.01 * velocities[x]; velocities[y] += 0.1 * (Math.random() - 0.5) - 0.01 * velocities[y]; } voronoi.update(); } }34:T7fe,function drawRoundedPolygon(context, points, r) { // The rounding radius can’t be bigger than the polygon’s incircle. // TODO Abort the search for the incircle if one is found larger than r. const [cx, cy, cr] = polygonIncircle(points); r = Math.min(r, cr); if (r <= 0) return; // Build a linked list from the array of vertices so we can splice. let n = points.length - 1, p0, p1, p2, p3; points = points.slice(1).map(([x, y]) => [x, y]); p1 = points[n - 2], p2 = points[n - 1]; for (let i = 0; i < n; ++i) { p0 = p1, p1 = p2, p2 = points[i]; p1.previous = p0; p1.next = p2; } // TODO do we need to make all these extra passes? p3 = p2.next; for (let i = 0; i <= n; ++i) { p0 = p1, p1 = p2, p2 = p3, p3 = p3.next; const t012 = cornerTangent(p0, p1, p2, r); const t123 = 1 - cornerTangent(p3, p2, p1, r); // If the following corner’s tangent is before this corner’s tangent, // replace p1 and p2 with the intersection of the lines 01 and 23. if (!(t012 + 1e-6 < t123)) { p2 = p0.next = p3.previous = lineLineIntersect(p0, p1, p2, p3); p2.previous = p0; p2.next = p3; p3 = p2; p2 = p3.previous; p1 = p2.previous; p0 = p1.previous; if (--n < 3) break; i = 0; } } // If we removed too many points, just draw the previously computed incircle. if (n < 3) { context.moveTo(cx + cr, cy); context.arc(cx, cy, cr, 0, 2 * Math.PI); return; } // Draw the rounded polygon, compting the corner tangents. for (let i = 0, moved = false; i <= n; ++i) { p0 = p1, p1 = p2, p2 = p3, p3 = p3.next; const t012 = cornerTangent(p0, p1, p2, r); const t123 = 1 - cornerTangent(p3, p2, p1, r); const x21 = p2[0] - p1[0], y21 = p2[1] - p1[1]; const x4 = p1[0] + t012 * x21, y4 = p1[1] + t012 * y21; const x5 = p1[0] + t123 * x21, y5 = p1[1] + t123 * y21; if (moved) context.arcTo(p1[0], p1[1], x4, y4, r); else moved = true, context.moveTo(x4, y4); context.lineTo(x5, y5); } }35:[] 31:{"id":"2ce318e4dad3a956","slug":"voroblobinoids","title":"Voroblobinoids","thumbnail":"1c017830bee2ea445eef11f48803f67e86318e838b61239b050f06d49b0ba14f","access_level":"public","create_time":"$D2020-12-15T12:18:09.795Z","update_time":"$D2021-03-01T14:33:50.038Z","view_time":null,"first_public_time":"$D2021-03-01T13:10:02.255Z","fork":{"id":"e0b92e27b8155e40","slug":"voroblobinoids","title":"Voroblobinoids","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":2,"starred":false,"owner":{"type":"team","id":"dc3877dcae433b00","login":"asgersp","name":"","avatar_url":"https://avatars-next.observableusercontent.com/dbd83c7da4decd8de55ee510ba27fc4dceabd946c8abf114e12f4c75c024895e","tier":"starter_2024"},"version":362,"publish_version":362,"role":null,"authored":false,"authors":[{"type":"individual","id":"659be6f3bd7aecec","login":"asgersp","name":"","avatar_url":"https://avatars-next.observableusercontent.com/dbd83c7da4decd8de55ee510ba27fc4dceabd946c8abf114e12f4c75c024895e","tier":null}],"members":[{"type":"individual","id":"659be6f3bd7aecec","login":"asgersp","name":"","avatar_url":"https://avatars-next.observableusercontent.com/dbd83c7da4decd8de55ee510ba27fc4dceabd946c8abf114e12f4c75c024895e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Voroblobinoids","cells":[{"id":0,"value":"md`# Voroblobinoids\n\nDrawing [rounded convex polygons](/@mbostock/rounded-convex-polygon).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"positions = Float64Array.from({length: n * 2}, (_, i) => Math.random() * (i & 1 ? height : width))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"velocities = new Float64Array(n * 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"voronoi = new d3.Delaunay(positions).voronoi([0, 0, width, height])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"function polygonIncircle(polygon) {\n let circle = [NaN, NaN, 0];\n for (let i = 0, n = polygon.length - 1; i < n; ++i) {\n const pi0 = polygon[i], pi1 = polygon[i + 1];\n for (let j = i + 1; j < n; ++j) {\n const pj0 = polygon[j], pj1 = polygon[j + 1];\n search: for (let k = j + 1; k < n; ++k) {\n const pk0 = polygon[k], pk1 = polygon[k + 1];\n const c = circleTangent(pi0, pi1, pj0, pj1, pk0, pk1);\n if (!(c[2] > circle[2])) continue;\n for (let l = 0; l < n; ++l) {\n if (l === i || l === j || l === k) continue;\n const d = pointLineDistance(c, polygon[l], polygon[l + 1]);\n if (d + 1e-6 < c[2]) continue search;\n }\n circle = c;\n }\n }\n }\n return circle;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"// Given a circle of radius r that is tangent to the line segments 01 and 12,\n// returns the parameter t of the tangent along the line segment 12.\nfunction cornerTangent([x0, y0], [x1, y1], [x2, y2], r) {\n const theta = innerAngle([x0, y0], [x1, y1], [x2, y2]);\n const x21 = x2 - x1, y21 = y2 - y1;\n const l21 = Math.sqrt(x21 * x21 + y21 * y21);\n const l14 = r / Math.tan(theta / 2);\n return l14 / l21;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"// Returns the angle between segments 01 and 12.\nfunction innerAngle([x0, y0], [x1, y1], [x2, y2]) {\n const x01 = x0 - x1, y01 = y0 - y1, l01_2 = x01 * x01 + y01 * y01;\n const x12 = x1 - x2, y12 = y1 - y2, l12_2 = x12 * x12 + y12 * y12;\n const x02 = x0 - x2, y02 = y0 - y2, l02_2 = x02 * x02 + y02 * y02;\n return Math.acos((l12_2 + l01_2 - l02_2) / (2 * Math.sqrt(l12_2 * l01_2)));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"function circleTangent(p0, p1, p2, p3, p4, p5) {\n const b0 = lineLineBisect(p0, p1, p3, p2);\n const b1 = lineLineBisect(p2, p3, p5, p4);\n const i = lineLineIntersect(...b0, ...b1);\n return [...i, pointLineDistance(i, p0, p1)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"function pointLineDistance([x0, y0], [x2, y2], [x1, y1]) {\n const x21 = x2 - x1, y21 = y2 - y1;\n return (y21 * x0 - x21 * y0 + x2 * y1 - y2 * x1) / Math.sqrt(y21 * y21 + x21 * x21);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"function lineLineBisect([x0, y0], [x1, y1], [x2, y2], [x3, y3]) {\n const x02 = x0 - x2, y02 = y0 - y2;\n const x10 = x1 - x0, y10 = y1 - y0, l10 = Math.sqrt(x10 ** 2 + y10 ** 2);\n const x32 = x3 - x2, y32 = y3 - y2, l32 = Math.sqrt(x32 ** 2 + y32 ** 2);\n const ti = (x32 * y02 - y32 * x02) / (y32 * x10 - x32 * y10);\n const xi = x0 + ti * x10, yi = y0 + ti * y10;\n return [[xi, yi], [xi + x10 / l10 + x32 / l32, yi + y10 / l10 + y32 / l32]];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"function lineLineIntersect([x0, y0], [x1, y1], [x2, y2], [x3, y3]) {\n const x02 = x0 - x2, y02 = y0 - y2;\n const x10 = x1 - x0, y10 = y1 - y0;\n const x32 = x3 - x2, y32 = y3 - y2;\n const t = (x32 * y02 - y32 * x02) / (y32 * x10 - x32 * y10);\n return [x0 + t * x10, y0 + t * y10];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"height = 200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"margin = 60","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"radius = 12","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"n = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3-delaunay@5\", \"d3-scale-chromatic@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"