25:["$","title",null,{"children":"Voronoi Incircles | Ang Lee | Observable"}] 4b:T8ee,canvas = { const width = 960; const height = 768; const context = DOM.context2d(width, height); const margin = 60; const particles = Array.from({length: n}, () => [Math.random() * width, Math.random() * height, 0, 0]); while (true) { const delaunay = new d3.Delaunay.from(particles); const voronoi = delaunay.voronoi([0.5, 0.5, width - 0.5, height - 0.5]); context.fillStyle = "#eee"; context.fillRect(0, 0, width, height); if (mutable isShowCircles) { for (const cell of voronoi.cellPolygons()) { context.beginPath(); const [x, y, r] = polygonIncircle(cell); if (r < 1.5) continue; context.moveTo(x + r - 1.5, y); context.arc(x, y, r - 1.5, 0, 2 * Math.PI); // context.fillStyle = getRandomColor(); context.fillStyle = rgb2Hex(getColorFromImage(Math.floor(x), Math.floor(y))); context.fill(); } } else { for (const cell of voronoi.cellPolygons()) { context.beginPath(); context.moveTo(cell[0][0], cell[0][1]); for (let i = 1; i < cell.length; ++i) { context.lineTo(cell[i][0],cell[i][1]); } context.closePath(); // context.fillStyle = getRandomColor(); const [x, y, r] = polygonIncircle(cell); try { context.fillStyle = rgb2Hex(getColorFromImage(Math.floor(x), Math.floor(y))) } catch (e) { context.fillStyle = "#fff"; } context.fill(); } } context.beginPath(); voronoi.render(context); voronoi.renderBounds(context); context.strokeStyle = "rgba(255, 255, 255, 0.5)"; context.stroke(); context.beginPath(); delaunay.renderPoints(context); context.fillStyle = "rgba(0, 0, 0, 0.2)"; context.fill(); yield context.canvas; for (const p of particles) { p[0] += p[2]; p[1] += p[3]; if (p[0] < -margin) p[0] += width + margin * 2; else if (p[0] > width + margin) p[0] -= width + margin * 2; if (p[1] < -margin) p[1] += height + margin * 2; else if (p[1] > height + margin) p[1] -= height + margin * 2; p[2] += 0.2 * (Math.random() - 0.5) - 0.01 * p[2]; p[3] += 0.2 * (Math.random() - 0.5) - 0.01 * p[3]; } } }4c:[] 47:{"id":"33049cad026dd369","slug":"voronoi","title":"Voronoi Incircles","thumbnail":"1244f3b7d68548b1790247197c9eebf8ac37e072ccc9fd3f65d923dbfa82a236","access_level":"public","create_time":"$D2019-03-15T19:50:43.929Z","update_time":"$D2019-03-18T15:57:31.648Z","view_time":null,"first_public_time":"$D2019-03-15T20:43:51.678Z","has_unpublished_edits":null,"fork":{"id":"ba0d23af0509620f","slug":"voronoi-incircles","title":"Voronoi Incircles","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":3,"starred":false,"owner":{"type":"team","id":"b490bb3c2eba71dc","login":"anglee","name":"Ang Lee","avatar_url":"https://avatars-next.observableusercontent.com/9f99cc05b0f8c20eaf1867c9a84edab76fa85847e4b14e14854d84ea154e3b5b","tier":"starter_2024","bio":"","following":false},"version":699,"publish_version":699,"role":null,"authored":false,"authors":[{"type":"individual","id":"b52ef55b5f9bf7a8","login":"anglee","name":"Ang Lee","avatar_url":"https://avatars-next.observableusercontent.com/9f99cc05b0f8c20eaf1867c9a84edab76fa85847e4b14e14854d84ea154e3b5b","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"b52ef55b5f9bf7a8","login":"anglee","name":"Ang Lee","avatar_url":"https://avatars-next.observableusercontent.com/9f99cc05b0f8c20eaf1867c9a84edab76fa85847e4b14e14854d84ea154e3b5b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Voronoi Incircles","cells":[{"id":0,"value":"md`# Voronoi Incircles\n\nFor each Voronoi cell, the [largest contained circle](/@mbostock/convex-polygon-incircle) is shown in white.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"md`# voronoi`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"viewof f = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"function fetchImage(src) {\n return new Promise((resolve, reject) => {\n const image = new Image;\n image.crossOrigin = \"anonymous\";\n image.src = src;\n image.onload = () => resolve(image);\n image.onerror = reject;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"image = {\n const width = 960;\n const height = 768;\n const context = DOM.context2d(width, 768, 1);\n context.drawImage(jaconda, 0, 0);\n return context.getImageData(0, 0, width, height);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"viewof n = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"nextBtn = {\n const button = createButton(\"toggle circles\")\n button.onclick = () => {\n mutable isShowCircles = !(mutable isShowCircles);\n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"getColorFromImage = (x, y) => {\n const width = 960;\n return {\n r: image.data[(y * width + x) * 4 + 0],\n g: image.data[(y * width + x) * 4 + 1],\n b: image.data[(y * width + x) * 4 + 2]\n } \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"jaconda = {\n const width = 960;\n const height = 768;\n const context = DOM.context2d(width, height, 1);\n return await fetchImage(\"https://i.imgur.com/LRYP5Cz.png\");\n //fetchImage(\"https://gist.githubusercontent.com/mbostock/9511ae067889eefa5537eedcbbf87dab/raw/944b6e5fe8dd535d6381b93d88bf4a854dac53d4/mona-lisa.jpg\");\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"getColorFromImage(100, 100)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"rgb2Hex = ({r, g, b}) => {\n function componentToHex(c) {\n var hex = c.toString(16);\n return hex.length == 1 ? \"0\" + hex : hex;\n }\n return \"#\" + componentToHex(r) + componentToHex(g) + componentToHex(b);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"getRandomColor = () => {\n const color1 = \"#00747A\"\n const color2 = \"#009AA6\"\n const color3 = \"#63CECA\"\n\n return [color1, color2, color3][Math.floor(Math.random() * 3)]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"data = d3_5.csvParse(await Files.text(f))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"maxVolume = 189.509995","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"getRandomColor()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"maxPrice = 28645500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"delay = ms => new Promise(resolve => {\n setTimeout(() => resolve(), ms)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"function polygonIncircle(polygon) {\n let circle = [NaN, NaN, 0];\n\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"tickers = [\"ACLS\", \"AEGN\", \"ANGO\", \"ANSS\", \"ARCE\", \"ATRO\", \"ATSG\", \"BCBP\", \"BMCH\", \"BPMC\", \"BSET\", \"CAMT\", \"CATS\", \"CECE\", \"CHEK\", \"CIVEC\", \"CNBKA\", \"CONE\", \"COOP\", \"CORE\", \"CORV\", \"CRUS\", \"CSGS\", \"CSQ\", \"CTIB\", \"CTRN\", \"CYBE\", \"DLBS\", \"DNKN\", \"DXPE\", \"EGHT\", \"ESBK\", \"ESGRO\", \"FDEF\", \"FDT\", \"FFBW\", \"FIVN\", \"FMCIU\", \"FNSR\", \"FWONK\", \"GLIBP\", \"HBNC\", \"HBP\", \"HEWG\", \"HLIT\", \"INTG\", \"INVE\", \"IRDM\", \"ISSC\", \"LECO\", \"LPTX\", \"MATW\", \"MBUU\", \"MIK\", \"MOGO\", \"MRTX\", \"MYND\", \"NBTB\", \"NERV\", \"NGHCN\", \"NTGN\", \"NTRA\", \"NVIV\", \"NWSA\", \"OFIX\", \"OPHT\", \"OPRA\", \"OXSQ\", \"PEBK\", \"PFBC\", \"PHIO\", \"PODD\", \"PXI\", \"QLC\", \"RBKB\", \"RDVT\", \"RETO\", \"RP\", \"RRD\", \"SAMA\", \"SLDB\", \"TAIT\", \"TBNK\", \"TECD\", \"TRIB\", \"TROV\", \"TXMD\", \"UBNK\", \"VALU\", \"VC\", \"VIVE\", \"WBND\", \"ZS\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3-delaunay@4\")\n// d3 = require(\"d3@^5.9\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"_ = require(\"lodash\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"d3_5 = require(\"d3@^5.9\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"getParticles = (row) => {\n const width = 960;\n const height = 768;\n const myParticles = tickers.map(ticker => {\n const volume = parseFloat(data[row][`${ticker}_Volume`]) || 0.1\n const price = parseInt(data[row][`${ticker}_Close`]) || 1\n return [\n _.clamp(volume * 4, maxVolume) * width / maxVolume, \n _.clamp(price * 100, maxPrice) * height / maxPrice,\n 0,\n 0\n ]\n }) \n return myParticles \n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"createButton = (text = '') => {\n const button = html``;\n button.style.width = \"150px\";\n button.style.height = \"40px\";\n button.style.backgroundImage = \"linear-gradient(#f3f3f3, #efefef)\";\n button.style.borderRadius = \"4px\";\n button.style.marginBottom = \"8px\";\n setButtonText(button, text);\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"setButtonText = (button, text) => {\n button.innerHTML = `${text}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"mutable isShowCircles = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null