2e:null 2f:["$","title",null,{"children":"Poisson Disc Generator | Luis Sevillano | Observable"}] 34:T7d1,circle = { resetCircle; mutable colorizedPoints = 0; const svg = d3 .create("svg") .attr("width", widthCircle) .attr("height", heightCircle) .style("overflow", "visible"); const data = []; let i = 0; for (const [x, y] of poissonDiscSampler( parseFloat(widthCircle), parseFloat(heightCircle), parseFloat(radiusCircle) * 2 + parseFloat(padding) )) { if (++i > nCircle) break; data.push([x, y]); } svg .selectAll("circle") .data(data) .enter() .append("circle") .attr("fill", c2) .attr("r", radiusCircle) .attr("cx", (d) => d[0]) .attr("cy", (d) => d[1]); const delaunay = d3.Delaunay.from(data); const voronoi = delaunay.voronoi([0, 0, widthCircle, heightCircle]); const cells = voronoi.cellPolygons(); // an iterator let polygons = Array.from(voronoi.cellPolygons()); detectNeighbors({ polygons, voronoi }); svg.on("click", (e, d) => { console.log(d3.pointer(e)); console.log(...d3.pointer(e)); const i = delaunay.find(...d3.pointer(e)); let queue = []; const start = i; let featuresAssigned = 0; let rangeIndex = 0; let outOfRange; console.log(polygons); console.log(polygons[start]); queue.push(start); for (let i = 0; i < queue.length; i++) { if (queue.length >= parseInt(selection)) { queue = queue.slice(0, parseInt(selection)); break; } polygons[queue[i]].neighbors.forEach(function (e, j) { if (polygons[e] && !polygons[e].used) { featuresAssigned++; ++outOfRange || null; polygons[e].used = 1; queue.push(e); } }); } svg .selectAll(".del") .data(queue.map((index) => data[index])) .enter() .append("circle") .attr("fill", selectionColor) .attr("r", radiusCircle) .attr("cx", (d) => d[0]) .attr("cy", (d) => d[1]) .each((d) => mutable colorizedPoints++); }); return svg.node(); }35:T482,function poissonFinish(width, height, count, first) { const points = []; console.log(Math.sqrt(((width * height) / count) * radius)); // Our first run takes us through the Poisson Disc sampler const sample = sampler( width, height, Math.sqrt(((width * height) / count) * 0.61), first || [width / 2, height / 2] ); for (let i = 0; i < count; i++) { const point = sample(); if (point) { point.original = true; points.push(point); } else { break; } } // Our second run uses a Delaunay triangulation to fill in the gaps let left = count - points.length; const polygons = voronoi() .size([width, height])(points) .triangles() .map((t) => { t.centroid = centroid(t); t.area = area(t); return t; }) .sort((a, b) => b.area - a.area); while (left) { for (let i = 0; i < left; i++) { const polygon = polygons[i]; if (polygon) { const point = polygons[i].centroid; point.original = false; points.push(point); } else { break; } } left = count - points.length; } return points; }36:T83a,function sampler(width, height, radius = 5, first) { var k = 30, // maximum number of samples before rejection radius2 = radius * radius, R = 3 * radius2, cellSize = radius * Math.SQRT1_2, gridWidth = Math.ceil(width / cellSize), gridHeight = Math.ceil(height / cellSize), grid = new Array(gridWidth * gridHeight), queue = [], queueSize = 0, sampleSize = 0, padding = radius / 2; return function() { if (!sampleSize) return first ? sample(...first) : sample(width / 2, height / 2); // start sample in middle // Pick a random existing sample and remove it from the queue. while (queueSize) { var i = Math.random() * queueSize | 0, s = queue[i]; // Make a new candidate between [radius, 2 * radius] from the existing sample. for (var j = 0; j < k; ++j) { var a = 2 * Math.PI * Math.random(), r = Math.sqrt(Math.random() * R + radius2), x = s[0] + r * Math.cos(a), y = s[1] + r * Math.sin(a); // Reject candidates that are outside the allowed extent, // or closer than 2 * radius to any existing sample. if (padding <= x && x < width - padding && padding <= y && y < height - padding && far(x, y)) return sample(x, y); } queue[i] = queue[--queueSize]; queue.length = queueSize; } }; function far(x, y) { var i = x / cellSize | 0, j = y / cellSize | 0, i0 = Math.max(i - 2, 0), j0 = Math.max(j - 2, 0), i1 = Math.min(i + 3, gridWidth), j1 = Math.min(j + 3, gridHeight); for (j = j0; j < j1; ++j) { var o = j * gridWidth; for (i = i0; i < i1; ++i) { if (s = grid[o + i]) { var s, dx = s[0] - x, dy = s[1] - y; if (dx * dx + dy * dy < radius2) return false; } } } return true; } function sample(x, y) { var s = [x, y]; queue.push(s); grid[gridWidth * (y / cellSize | 0) + (x / cellSize | 0)] = s; ++sampleSize; ++queueSize; return s; } }37:[] 32:{"id":"d8607f0ab2b23ff3","slug":"poisson-disc-generator","title":"Poisson Disc Generator","thumbnail":"6a4e1dfffa03dfad8108dc46f4cc4cd82a864adaea76c1366f9a1a793de6d545","access_level":"public","create_time":"$D2021-07-21T18:05:18.826Z","update_time":"$D2023-11-02T16:39:51.974Z","view_time":null,"first_public_time":"$D2023-10-17T07:59:37.037Z","has_unpublished_edits":null,"fork":{"id":"86e0045618510ec0","slug":"poisson-finish","title":"Poisson Finish","owner":{"id":"60e3fb348ea019b8","login":"washpostgraphics","name":"PostGraphics"}},"stars":1,"starred":false,"owner":{"type":"team","id":"aca7accb784cc34f","login":"luissevillano","name":"Luis Sevillano","avatar_url":"https://avatars-next.observableusercontent.com/3c9b0d4d8e2b79d27d5963625d270d87cbdc9c4cd5579c9464c09bd3db5d18ef","tier":"starter_2024"},"version":983,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7bd128609d447fe6","login":"luissevillano","name":"Luis Sevillano","avatar_url":"https://avatars-next.observableusercontent.com/3c9b0d4d8e2b79d27d5963625d270d87cbdc9c4cd5579c9464c09bd3db5d18ef","tier":null}],"members":[{"type":"individual","id":"7bd128609d447fe6","login":"luissevillano","name":"Luis Sevillano","avatar_url":"https://avatars-next.observableusercontent.com/3c9b0d4d8e2b79d27d5963625d270d87cbdc9c4cd5579c9464c09bd3db5d18ef","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"f761c2e15e717725","slug":"tools-for-journalists","title":"Tools for Journalists","owner":{"id":"aca7accb784cc34f","login":"luissevillano","name":"Luis Sevillano"}},"type":"notebook","body":{"title":"Poisson Disc Generator","cells":[{"id":0,"value":"md`# Poisson Disc Generator\n\nAjusta la configuración para crear el gráfico deseado. Puedes crear formas circulares o rectangulares. \n\nAlgunas notas:\n- Si vas a generar una gran cantidad de puntos lo recomendable es pegar directamente la cifra deseada en el campo del formulario _NÚMERO DE PUNTOS_ de una vez. Este notebook reacciona cada vez que pulsas una tecla. Por lo tanto, si quieres generar 10000 puntos y escribes en el campo del formulario **1**, luego **0**, luego otro **0**, etc. va a generar el gráfico primero para **1** punto, luego para **10**, para **100**, etc. afectando al rendimiento del navegador.\n\n- Si ves que los puntos se acumulan en uno de los extremos de la nube de puntos debes incrementar el tamaño del gráfico (Ancho y Alto en la configuración). Esto ocurre sobre todo con el gráfico de círculo.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"md`___`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"md`### Rectángulo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"html`Medidas del gráfico`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"viewof widthSquare = Inputs.text({\n label: \"Ancho\",\n placeholder,\n value: 500,\n width: inputWidth\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"viewof heightSquare = Inputs.text({\n label: \"Alto\",\n placeholder,\n value: 500,\n width: inputWidth\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"html`Otra configuración`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"viewof radius = Inputs.text({\n label: \"Tamaño de los círculos\",\n placeholder,\n value: 2,\n width: inputWidth\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"viewof n = Inputs.text({\n label: \"NÚMERO DE PUNTOS\",\n placeholder,\n value: 5000,\n width: inputWidth\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"viewof c1 = color({\n value: \"#94c2c2\",\n description: \"Elige un color para los círculos\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"viewof reset = Inputs.button(\"Recalcular\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"rect = {\n reset;\n const data = poissonFinish(widthSquare, heightSquare, n);\n\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", widthSquare)\n .attr(\"height\", heightSquare);\n\n svg\n .selectAll(\"circle\")\n .data(data)\n .enter()\n .append(\"circle\")\n .attr(\"fill\", c1)\n .attr(\"r\", radius)\n .attr(\"cx\", (d) => d[0] + Math.random())\n .attr(\"cy\", (d) => d[1] + Math.random());\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"html`\n

${DOM.download(\n () => serialize(rect),\n undefined,\n \"Descarga como SVG\"\n )}

${DOM.download(\n () => rasterize(rect),\n undefined,\n \"Descarga como PNG\"\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"md`### Círculo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"html`Medidas del gráfico`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"viewof widthCircle = Inputs.text({\n label: \"Ancho\",\n placeholder,\n value: width,\n width: inputWidth\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"viewof heightCircle = Inputs.text({\n label: \"Alto\",\n placeholder,\n value: 500,\n width: inputWidth\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"html`Otra configuración`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"viewof padding = Inputs.text({\n label: \"Distancia entre los círculos\",\n placeholder,\n value: 1.3,\n width: inputWidth\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"viewof radiusCircle = Inputs.text({\n label: \"Tamaño de los círculos\",\n placeholder,\n value: 1.8,\n width: inputWidth\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"viewof nCircle = Inputs.text({\n label: \"NÚMERO DE PUNTOS\",\n placeholder,\n value: 5000,\n width: inputWidth\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"viewof c2 = color({\n value: \"#94c2c2\",\n description: \"Elige un color para los círculos\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"html`Dibujar una selección`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"md`_Haz click en la nube de puntos para colorear ${selection} puntos._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"viewof selection = Inputs.text({\n placeholder,\n label: \"Número de puntos a colorear al hacer click\",\n value: 50,\n inputWidth\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"viewof selectionColor = color({\n value: \"#8b0000\",\n description: \"Elige un color para la selección\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":956,"value":"html`Número de puntos coloreados: ${colorizedPoints}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"viewof resetCircle = Inputs.button(\"Recalcular\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":807,"value":"html`\n

${DOM.download(\n () => serialize(circle),\n undefined,\n \"Descarga como SVG\"\n )}

${DOM.download(\n () => rasterize(circle),\n undefined,\n \"Descarga como PNG\"\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"md`---\n*_Este notebook está basado en el trabajo de [Harry Stevens](https://observablehq.com/@washpostgraphics/poission-finish) y [Mike Bostock](https://observablehq.com/@mbostock/circle-packing-methods)_.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"md`#### _Configuración interna:_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"function detectNeighbors(settings) {\n const { polygons, voronoi } = settings;\n // push neighbors indexes to each polygons element\n polygons.map(function (d, i) {\n d.index = i; // index of this element\n d.high = 0;\n const neighbors = Array.from(voronoi.neighbors(d.index));\n d.neighbors = neighbors;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"mutable colorizedPoints = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"function centroid(vertices){\n let a = 0, x = 0, y = 0, l = vertices.length;\n\n for (let i = 0; i < l; i++) {\n const s = i === l - 1 ? 0 : i + 1,\n v0 = vertices[i],\n v1 = vertices[s],\n f = (v0[0] * v1[1]) - (v1[0] * v0[1]);\n\n a += f;\n x += (v0[0] + v1[0]) * f;\n y += (v0[1] + v1[1]) * f;\n }\n\n const d = a * 3;\n\n return [x / d, y / d];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"function area(vertices, signed = false){\n let a = 0;\n\n for (let i = 0, l = vertices.length; i < l; i++) {\n const v0 = vertices[i],\n v1 = vertices[i === l - 1 ? 0 : i + 1];\n\n a += v0[0] * v1[1];\n a -= v1[0] * v0[1];\n }\n\n return signed ? a / 2 : Math.abs(a / 2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"voronoi = d3.voronoi","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"d3 = require(\"d3-voronoi@1\", \"d3-selection@3\", \"d3-delaunay\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"import { serialize } from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"import { poissonDiscSampler } from \"@mbostock/circle-packing-methods\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"inputWidth = 150","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"placeholder = \"Introduce un valor\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":721,"value":"import { color } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"function rasterize(svg) {\n console.log(svg);\n let resolve, reject;\n const promise = new Promise((y, n) => ((resolve = y), (reject = n)));\n const image = new Image();\n image.onerror = reject;\n image.onload = () => {\n const rect = svg.getBoundingClientRect();\n const context = DOM.context2d(rect.width, rect.height);\n context.drawImage(image, 0, 0, rect.width, rect.height);\n context.canvas.toBlob(resolve);\n };\n image.src = URL.createObjectURL(serialize(svg));\n return promise;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"