2c:null 2d:["$","title",null,{"children":"Grids and patterns (line) | Marco Q | Observable"}] 32:[] 30:{"id":"14406f3d48c0a4bf","slug":null,"title":"Grids and patterns (line)","thumbnail":"ff371a2f1f4292031667b0e96310e04789e7c1264463a2bb3171aaf2e897494b","access_level":"public","create_time":"$D2023-01-19T16:17:45.005Z","update_time":"$D2023-01-19T21:46:26.929Z","view_time":null,"first_public_time":"$D2023-01-19T16:17:45.005Z","has_unpublished_edits":null,"fork":{"id":"309b67bb17574d82","slug":"grids-and-patterns","title":"Grids and patterns","owner":{"id":"6e14342e91f52f30","login":"marcoqu","name":"Marco Q"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6e14342e91f52f30","login":"marcoqu","name":"Marco Q","avatar_url":"https://avatars-next.observableusercontent.com/155641707a4e7e52e419f477fc6b9524cd23ffea34a3369a48a2243a30f5a179","tier":"starter_2024"},"version":1103,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"508a005ebab6ccf4","login":"marcoqu","name":"Marco Q","avatar_url":"https://avatars-next.observableusercontent.com/155641707a4e7e52e419f477fc6b9524cd23ffea34a3369a48a2243a30f5a179","tier":null}],"members":[{"type":"individual","id":"508a005ebab6ccf4","login":"marcoqu","name":"Marco Q","avatar_url":"https://avatars-next.observableusercontent.com/155641707a4e7e52e419f477fc6b9524cd23ffea34a3369a48a2243a30f5a179","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Grids and patterns (line)","cells":[{"id":0,"value":"md`# Grids and patterns (line)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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 => shapeFns[shape].size((cellH * d.size) + (gap * (d.size-1)))())\n .attr(\"opacity\", d => d.opacity)\n .attr(\"fill\", d => d.color)\n .attr(\"stroke\", d => d.color)\n .attr(\"stroke-width\", 2)\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"viewof cellH = Inputs.range([5, 20], {value: 15, step: 1, label: \"Cell Height\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"viewof width = Inputs.range([100, 1000], {value: 500, step: 100, label: \"Width\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"viewof height = Inputs.range([100, 500], {value: 300, step: 100, label: \"Height\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"viewof seed = Inputs.range([1, 50], {value: 1, step: 1, label: \"Random Seed\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"viewof gap = Inputs.range([0, 15], {value: 0, step: 1, label: \"Gap (experimental)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":871,"value":"viewof hflip = Inputs.range([0, 1], {value: 0, step: 0.05, label: \"Horizontal flip prob\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1087,"value":"viewof vflip = Inputs.range([0, 1], {value: 0, step: 0.05, label: \"Vertical flip prob\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1044,"value":"viewof shape = Inputs.radio(Object.keys(shapeFns), {value:'halfCircle', label: \"Shape\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"viewof showGrid = checkbox({\n options: [{ value: \"grid\", label: \"Show grid\" }],\n value: \"grid\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"viewof shuffle = checkbox({\n options: [{ value: \"shuffle\", label: \"Shuffle\" }],\n value: \"shuffle\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"viewof checkCollisions = checkbox({\n options: [{ value: \"check\", label: \"Check collisions\" }],\n value: \"check\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"viewof color1 = color({ value: '#00ff66'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"viewof color2 = color({ value: '#0bd09f'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"visibilityFn = (c, size, density) => rnd.rnd() < density","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"transformFn = (d) => {\n const hflips = rnd.rnd() < hflip;\n const vflips = rnd.rnd() < vflip;\n const xPos = x(d.coords[0] + (hflips ? d.size : 0));\n const yPos = y(d.coords[1] + (vflips ? d.size : 0));\n const scaleX = hflips ? -1 : 1;\n const scaleY = vflips ? -1 : 1;\n return `translate(${xPos},${yPos}) scale(${scaleX}, ${scaleY})`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"opacityFn = (c) => opacityScale(rnd.rnd());","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"colorFn = (c, cells) => colorScale(rnd.rnd())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"md`## Stuff`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"createEmptyCells = (nCells) => {\n return Array(nCells).fill(0).map((d, i) => ({ coords: indexToRowColumn(i)}));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"indexToRowColumn = (i) => [i%nCols, Math.floor(i/nCols)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"rowColumnToIndex = (row, col) => row*nCols + col","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"cellW = cellH/2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"nCols = Math.floor(width / (cellW + gap))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"nRows = Math.floor(height/(cellH + gap))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"x = d3.scaleLinear()\n .domain([0, nCols])\n .range([0, width]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"y = d3.scaleLinear()\n .domain([0, nRows])\n .range([0, height]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"colorScale = d3.interpolateLab(color1, color2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"opacityScale = d3.scaleLinear().domain([0, 1]).range(opacityRange).clamp(true);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1023,"value":"obliqueLine = {\n const customShapeLine = {\n draw: function(context, size) {\n //context.beginPath();\n context.moveTo(0,0);\n context.lineTo(size/2, size);\n //context.stroke();\n context.closePath();\n }\n }\n\n return d3.symbol().type(customShapeLine).size(500);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1084,"value":"triangle = {\n const customShapeLine = {\n draw: function(context, size) {\n //context.beginPath();\n context.moveTo(0,0);\n context.lineTo(0, size);\n context.lineTo(size/2, size);\n //context.stroke();\n context.closePath();\n }\n }\n\n return d3.symbol().type(customShapeLine).size(500);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1040,"value":"shapeFns = ({\n halfCircle,\n obliqueLine,\n triangle\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"import {slider, checkbox, color, radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"import { rangeSlider } from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"import { listInput } from '@harrislapiroff/list-input'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"import { html } from '@observablehq/htl'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"d3random = require(\"d3-random@>=2.2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 31:"$30:body"