31:[] 2f:{"title":"Grids and patterns","cells":[{"id":0,"value":"md`# Grids and patterns`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"grid = {\n const svg = d3.create(\"svg\")\n // .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(cells.filter(c => c.size))\n .join(\"path\")\n .attr(\"d\", d => halfCircle.size((cellH * d.size) + (gap * (d.size-1)))())\n .attr(\"opacity\", d => d.opacity)\n .attr(\"fill\", d => d.color)\n .attr(\"visibility\", d => d.visible ? 'visible' : 'hidden')\n .attr(\"transform\", d => transformFn(d))\n .style(\"cursor\", \"not-allowed\")\n .on(\"click\", (d, i, g) => d3.select(g[i]).remove())\n\n svg.append(\"g\")\n .attr(\"fill\", 'rgba(0,0,0,0.2)')\n .attr(\"visibility\", () => showGrid ? 'visible' : 'hidden')\n .selectAll(\"circle\")\n .data(cells)\n .join(\"circle\")\n .attr(\"cx\", d => x(d.coords[0]))\n .attr(\"cy\", d => y(d.coords[1]))\n .attr(\"r\", 0.5)\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"viewof cellH = slider({min: 5, max: 20, value: 15, step: 1, description: \"Cell Height\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"viewof width = slider({min: 100, max: 1000, value: 500, step: 100, description: \"Width\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"viewof height = slider({min: 100, max: 500, value: 300, step: 100, description: \"Height\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"viewof numberList = listInput({\n input: (v, i) => html.fragment`Size ${i+1}: ${v}`,\n min: 1,\n value: [0.5, 0, 0.1],\n defaultValue: 0.5,\n title: \"Sizes\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"viewof seed = slider({min: 1, max: 50, value: 1, step: 1, description: \"Random Seed\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"viewof opacityRange = rangeSlider({\n min: 0,\n max: 1,\n value: [.5, 1],\n step: 0.05,\n description: 'Opacity range',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":842,"value":"viewof gap = slider({min: 0, max: 15, value: 0, step: 1, description: \"Gap (experimental)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":871,"value":"viewof flip = slider({min: 0, max: 1, value: 0, step: 0.05, description: \"Flip probability\"})","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":662,"value":"viewof shuffle = checkbox({\n options: [{ value: \"shuffle\", label: \"Shuffle\" }],\n value: \"shuffle\"\n})","pinned":false,"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":528,"value":"viewof color2 = color({ value: '#0bd09f'})","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 sizes.forEach(size => cells = fillCells(cells, size, densities[size]/size**2));\n return cells\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"fillCells = (cells, size, density) => {\n let shuffled = shuffle ? d3.shuffle([...cells]) : [...cells];\n for (let c of shuffled) {\n if (c.visible) continue;\n if (checkCollisions && isPositionTakenOptimized(c.coords, size, cells, d3.max(sizes))) continue;\n if (!visibilityFn(c, size, density)) continue;\n c.size = size;\n c.opacity = opacityFn(c, cells);\n c.color = colorFn(c, cells);\n c.visible = true;\n }\n return cells;\n}","pinned":false,"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":true,"hidden":false,"mode":"ojs"},{"id":254,"value":"opacityFn = (c) => opacityScale(rnd.rnd());","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"colorFn = (c, cells) => colorScale(rnd.rnd())","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"md`## Stuff`","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 for (let p of cells) {\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}","pinned":false,"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 x: d3random.randomLcg(seed),\n y: d3random.randomLcg(seed)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"sizes = numberList.map((d, i) => [parseFloat(d), i]).filter(d => d[0]).map(d => d[1]+1).sort().reverse()","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"densities = {\n const a = numberList.map(d => parseFloat(d))\n a.unshift(null)\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"cellW = cellH/2","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"nCols = Math.floor(width / (cellW + gap))","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"nRows = Math.floor(height/(cellH + gap))","pinned":false,"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":86,"value":"y = d3.scaleLinear()\n .domain([0, nRows])\n .range([0, height]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"colorScale = d3.interpolateLab(color1, color2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"opacityScale = d3.scaleLinear().domain([0, 1]).range(opacityRange).clamp(true);","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":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}