2b:null 2c:["$","title",null,{"children":"Voronoi Cell Test | Ralph Spandl | Observable"}] 31:[] 2f:{"id":"26a665009a86de6d","slug":"voronoi-cell-test","title":"Voronoi Cell Test","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2019-07-16T00:55:28.125Z","update_time":"$D2019-07-31T20:14:19.529Z","view_time":null,"first_public_time":"$D2019-07-17T19:53:40.153Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"eb6ec950587094cf","login":"ralph_spandl","name":"Ralph Spandl","avatar_url":"https://avatars-next.observableusercontent.com/11d5e4f1031dd5359ba1f519d5116c8c5c015606a2f87ee87b3369caba7609db","tier":"starter_2024"},"version":288,"publish_version":288,"role":null,"authored":false,"authors":[{"type":"individual","id":"1c314000bb651721","login":"ralph_spandl","name":"Ralph Spandl","avatar_url":"https://avatars-next.observableusercontent.com/11d5e4f1031dd5359ba1f519d5116c8c5c015606a2f87ee87b3369caba7609db","tier":null}],"members":[{"type":"individual","id":"1c314000bb651721","login":"ralph_spandl","name":"Ralph Spandl","avatar_url":"https://avatars-next.observableusercontent.com/11d5e4f1031dd5359ba1f519d5116c8c5c015606a2f87ee87b3369caba7609db","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Voronoi Cell Test","cells":[{"id":0,"value":"md`# Voronoi Cell Test\n\nThe purpose of this sketch is to demonstrate rendering issues of the d3 delaunay voronoi render cell function, as documented here: https://github.com/d3/d3-delaunay#voronoi_renderCell when rendered in a canvas.\n\nThe first graphic is showing all points from an array rendered as dots. Works fine.\nThe second graphic is rendering the voronoi grid. Perfect as well.\nThe third graphic is using the render cell function and some vectors seem to be off.\n\nThe whole purpose is to get a voronoi canvas drawing with different colors to be able to detect mouse overs.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"pointCanvas = d3\n .select(\"#pointContainer\")\n .append(\"canvas\")\n .attr(\"id\", \"pointCanvas\")\n .attr(\"width\", dimensions)\n .attr(\"height\", dimensions)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"function drawPoints() {\n var context = document.getElementById('pointCanvas').getContext(\"2d\");\n context.clearRect(0, 0, dimensions, dimensions)\n points.forEach((d, i) => {\n //Drawing a circle\n\n context.beginPath();\n context.fillStyle = \"DarkCyan\";\n context.arc(d.x, d.y, 1, 0, 2 * Math.PI, true)\n context.fill();\n context.closePath();\n })\n return \"Draw Points\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"md `## Voronoi\n\nThe Voronoi grid is rendered correctly.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":102,"value":"voronoiContainer = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"voronoiCanvas = d3\n .select(\"#voronoiContainer\")\n .append(\"canvas\")\n .attr(\"id\", \"voronoiCanvas\")\n .attr(\"width\", dimensions)\n .attr(\"height\", dimensions)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":123,"value":"delaunay = new d3.Delaunay.from(pointArray)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":125,"value":"voronoi = delaunay.voronoi([\n 0,\n 0,\n dimensions,\n dimensions\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"VoronoiDrawing = {\n var contextVoronoi = document.getElementById('voronoiCanvas').getContext(\"2d\");\n contextVoronoi.clearRect(0, 0, dimensions, dimensions)\n contextVoronoi.beginPath();\n delaunay.render(contextVoronoi);\n contextVoronoi.strokeStyle = \"PaleTurquoise\";\n contextVoronoi.lineWidth = 1\n contextVoronoi.stroke();\n contextVoronoi.closePath()\n return \"Voronoi\"\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":137,"value":"md `## Voronoi Cells\nThe Voronoi cells is rendered buggy.\n\nIf you look at the middle, there are some vectors that go all over the place.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"md `### Proposed fix: Adding Jitter\n\nCheck the checkbox below to fix the issue.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":180,"value":"viewof jitter = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":142,"value":"voronoiCellContainer = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"value":"html`\n

Screenshot

Screenshot indicating the problem vectors.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"voronoiCellCanvas = d3\n .select(\"#voronoiCellContainer\")\n .append(\"canvas\")\n .attr(\"id\", \"voronoiCellCanvas\")\n .attr(\"width\", dimensions)\n .attr(\"height\", dimensions)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":149,"value":"VoronoiCellDrawing = {\n var contextCellVoronoi = document.getElementById('voronoiCellCanvas').getContext(\"2d\");\n contextCellVoronoi.clearRect(0, 0, dimensions, dimensions)\n for (var i = 0; i < pointArray.length; i++) {\n contextCellVoronoi.beginPath()\n voronoi.renderCell(i, contextCellVoronoi)\n const color = \"rgb(\" + rgbColorGenerator(i) + \")\"\n contextCellVoronoi.fillStyle = color\n contextCellVoronoi.fill()\n contextCellVoronoi.closePath()\n }\n return \"Voronoi Cells\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":147,"value":"md `## All the other stuff`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"points = (fetch(\"https://gist.githubusercontent.com/spandl/4392601e73666c4ea514aefeb0cb7397/raw/88780f991d6fb9b839420397960e2bcece524398/d3-data\")\n .then(response => response.json())\n .then(jitter ? data => data.map((d) => {\n d.x = d.x + Math.random() / 1000\n d.y = d.y + Math.random() / 1000\n return d\n }) : data => data))\n \n \n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"d3 = require(\"d3-fetch\", \"d3-delaunay\", \"d3-selection\", \"d3-array\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"dimensions = 750","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":119,"value":"function rgbColorGenerator(index = 1) {\n\n const colorstep = 271\n const nextColor = index*colorstep\n if (nextColor < 16777216) {\n const rgb = []\n rgb.push(nextColor & 0xff) // R.\n rgb.push((nextColor & 0xff00) >> 8) // G.\n rgb.push((nextColor & 0xff0000) >> 16) // B.\n\n return rgb\n } else {\n return \"Color out of scope\"\n }\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"pointArray = {\n const arr = []\n points.forEach ((d,i) => {\n arr.push([d.x, d.y, 0 ,0])\n })\n return arr\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":279,"value":"drawPoints()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"