31:T4b8,grid = { const svg = d3.create("svg") .attr("width", width+cellW+(margin*2)) .attr("height", height+(margin*2)) const g = svg.append("g") .attr("transform", `translate(${margin},${margin})`) g.append("g") .attr("stroke", 'rgba(230,230,230,1)') .attr("stroke-width", '0.5') .attr("fill", 'transparent') .attr("visibility", () => showGrid ? 'visible' : 'hidden') .selectAll("circle") .data(cells) .join("rect") .attr("x", d => x(d.coords[0])) .attr("y", d => y(d.coords[1])) .attr("width", cellW) .attr("height", cellH) g.append("g") .selectAll("path") .data(cells.filter(c => c.size)) .join("path") .attr("d", d => halfCircle.size((cellH * d.size) + (gap * (d.size-1)))()) .attr("opacity", d => d.opacity) .attr("fill", d => d.color) .attr("visibility", d => d.visible ? 'visible' : 'hidden') .attr("transform", d => transformFn(d)) .style("cursor", "not-allowed") .on("click", (d, i, g) => d3.select(g[i]).remove()) g.append("g") .append("image") .attr("href", ddd) .attr("width", width+(cellW/2)) .attr("y", cellH*2) return svg.node(); }32:[{"id":"383a4ca491c6aa465c3f0c5f1a3b0edcb9afc125de98ab1e3a1acc205d9bbc1f5db4b8eac5992a7ed3a624ec105f39e9da5b780bc736e43bd7fac584fc8b23d6","href":"https://static.observableusercontent.com/files/383a4ca491c6aa465c3f0c5f1a3b0edcb9afc125de98ab1e3a1acc205d9bbc1f5db4b8eac5992a7ed3a624ec105f39e9da5b780bc736e43bd7fac584fc8b23d6","name":"ddd.svg","type":"image/svg+xml","lastModified":1611676530619.33,"size":10977}] 2f:{"title":"Pattern Dipartimento","cells":[{"id":0,"value":"md`# Pattern Dipartimento`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1105,"value":"viewof seed = slider({min: 1, max: 100, value: 1, step: 1, description: \"Random seed\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1258,"value":"viewof sizeRange = rangeSlider({\n min: 1,\n max: 6,\n step: 1,\n value: this ? this.value : [2, 3],\n description: 'Sizes',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1242,"value":"viewof compact = checkbox({\n options: [{ value: \"compact\", label: \"Compact\" }],\n value: null\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1056,"value":"viewof height = slider({min: 200, max: 1000, value: 300, step: 100, description: \"Height\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"viewof showGrid = checkbox({\n options: [{ value: \"grid\", label: \"Show grid\" }],\n value: \"grid\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1263,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":675,"value":"viewof checkCollisions = checkbox({\n options: [{ value: \"check\", label: \"Check collisions\" }],\n value: \"check\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"viewof color1 = color({ value: '#00ff66'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"cells = {\n let cells = createEmptyCells(nCols * nRows)\n rnd.rnd = d3random.randomLcg(seed); // reset random generator\n fillCellsWithAmount(cells, sizeRange, 3);\n return cells\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"fillCellsWithAmount = (cells, sizeRange, number) => {\n let shuffled = rnd.shuffle([...cells]);\n let i = 0;\n let j = 0\n while (i < number && j < shuffled.length) {\n const size = Math.round(rnd.size(...sizeRange)());\n const c = shuffled[j++];\n if (c.visible) continue;\n if (checkCollisions && isPositionTaken(c.coords, size, cells)) continue;\n // if (!visibilityFn(c, size, density)) continue;\n c.size = size;\n c.opacity = 1;\n c.color = color1;\n c.visible = true;\n i++;\n }\n return cells;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1315,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"visibilityFn = (c, size, density) => rnd.rnd() < density","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"transformFn = (d) => {\n const flips = rnd.rnd() < flip;\n const xPos = x(d.coords[0] + (flips ? d.size : 0));\n const yPos = y(d.coords[1]);\n const scaleX = flips ? -1 : 1;\n return `translate(${xPos},${yPos}) scale(${scaleX}, 1)`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"createEmptyCells = (nCells) => {\n return Array(nCells).fill(0).map((d, i) => ({ coords: indexToRowColumn(i)}));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"isPositionTaken = ([cx, cy], csize, cells) => {\n // can be optimized if we know the possible sizes\n const startRow = compact ? 1 : 0;\n const endRow = compact ? nRows-1 : nRows;\n if (cx + csize > nCols || cy + csize > endRow || cy < startRow) return true;\n for (let p of cells) {\n if (!p.visible) continue;\n let px = p.coords[0];\n let py = p.coords[1];\n if (p.size == 1) continue;\n let psy = p.size;\n let psx = Math.ceil(p.size/2);\n if (cx + csize <= px || cx >= px + psx) continue; // is either to the left or right \n if (cy + csize <= py || cy >= py + psy) continue; // is either to the above or below \n return true;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":683,"value":"isPositionTakenOptimized = ([cx, cy], csize, cells, maxsize) => {\n const minCol = Math.max(cx - maxsize + 1, 0);\n const minRow = Math.max(cy - maxsize + 1, 0);\n const maxCol = Math.min(cx + csize, nCols - 1);\n const maxRow = Math.min(cy + csize, nRows - 1);\n for (let col = minCol; col <= maxCol; col++) {\n for (let row = minRow; row <= maxRow; row++) {\n let p = cells[rowColumnToIndex(row, col)];\n if (!p.visible) continue;\n let px = p.coords[0];\n let py = p.coords[1];\n let ps = p.size;\n if (ps == 1) continue;\n if (cx + csize <= px || cx >= px + ps) continue; // is either to the left or right \n if (cy + csize <= py || cy >= py + ps) continue; // is either to the above or below \n return true;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"indexToRowColumn = (i) => [i%nCols, Math.floor(i/nCols)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":685,"value":"rowColumnToIndex = (row, col) => row*nCols + col","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"rnd = ({\n rnd: d3random.randomLcg(seed),\n size: d3random.randomUniform.source(d3random.randomLcg(seed)),\n shuffle: d3array.shuffler(d3random.randomLcg(seed))\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"x = d3.scaleLinear()\n .domain([0, nCols])\n .range([0, width]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1089,"value":"md`## Consts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"nCols = 6","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"nRows = 6","pinned":false,"hidden":false,"mode":"ojs"},{"id":1059,"value":"width = height","pinned":false,"hidden":false,"mode":"ojs"},{"id":1029,"value":"cellH = width/nRows","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"cellW = cellH","pinned":false,"hidden":false,"mode":"ojs"},{"id":1169,"value":"margin = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":1068,"value":"gap = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1113,"value":"sizes = [3,2,1,4,5,6]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1073,"value":"flip = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"y = d3.scaleLinear()\n .domain([0, nRows])\n .range([0, height]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"halfCircle = {\n const customShapeCircle = {\n draw: function(context, size) {\n let r = size/2;\n let orgin = size/2; //the orgin of the circle, not of the symbol\n context.arc(0, orgin, r, Math.PI/2, -Math.PI/2, true);\n context.closePath();\n }\n }\n\n return d3.symbol().type(customShapeCircle).size(500);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"import {slider, checkbox, color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"import { rangeSlider } from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":771,"value":"import { listInput } from '@harrislapiroff/list-input'","pinned":false,"hidden":false,"mode":"ojs"},{"id":775,"value":"import { html } from '@observablehq/htl'","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"d3random = require(\"d3-random@>=2.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1306,"value":"d3array = require(\"d3-array@>=2.11\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1041,"value":"ddd = await FileAttachment(\"ddd.svg\").url()","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}