2b:null 2c:["$","title",null,{"children":"055 Letter grid | Saneef H. Ansari | Observable"}] 31:[] 2f:{"id":"2be9111fbab1acd2","slug":"055-letter-grid","title":"055 Letter grid","thumbnail":"9f0ce959085368e761b66b34483b5ef3f118bff9e588893a62e885a15f6c7b3f","access_level":"public","create_time":"$D2022-05-19T18:45:08.239Z","update_time":"$D2022-09-29T11:48:59.734Z","view_time":null,"first_public_time":"$D2022-05-26T10:19:49.558Z","fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":"starter_2024"},"version":470,"publish_version":470,"role":null,"authored":false,"authors":[{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null}],"members":[{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"1134e6403a7e016d","slug":"re-plicas-mixes","title":"re(plicas + mixes)","owner":{"id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari"}},"type":"notebook","body":{"title":"055 Letter grid","cells":[{"id":0,"value":"# 055 Letter grid","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4,"value":"viewof title = Inputs.text({\n label: md`**Title**
👋 Try changing this text →`,\n value: random.pick(sampleTexts),\n maxlength: 36,\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":328,"value":"viewof randomzie = Inputs.button(\"🎲 Randomize\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":434,"value":"## Notes\n- Distance from the grid, botched calculation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":131,"value":"viewof marginUV = Inputs.range([0, 1], {\n label: \"Margin\",\n step: 1 / 16,\n value: 3 / 4\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"viewof gapUV = Inputs.range([0, 1], { label: \"Gap\", step: 1 / 16 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":291,"value":"viewof dotDensity = Inputs.range([0, 1], {\n label: \"Dot density\",\n value: 1 / 4,\n step: 1 / 16\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":147,"value":"viewof debug = Inputs.toggle({ label: \"Debug\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":283,"value":"drawDots = (dots, r = 2, fill) => {\n const dotEls = dots.map(\n ([x, y]) => svg``\n );\n\n return svg`${dotEls}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":209,"value":"drawLetters = (cells, fill) => {\n const cellElems = cells.map(\n ({ x, y, size, letter }) => svg`${letter}`\n );\n\n return svg`${cellElems}\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"drawGrid = (cells, color) =>\n cells.map(\n ({ x, y, size }) =>\n svg``\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":351,"value":"baseDots = {\n randomzie;\n const minDistance = 4.5 + dotDensity * 6.5;\n return poissonSampling2d(width, height, { minDistance });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":269,"value":"dots = {\n // Remove dots within the squares\n let dots = baseDots.filter(\n (pt) => !cells.find((cell) => isPointInsideCell(pt, cell))\n );\n\n return dots;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":189,"value":"cells = d3\n .range(cols)\n .map((j) =>\n d3.range(cols).map((i) => ({\n x: marginX + i * (cellSize + gap),\n y: marginY + j * (cellSize + gap),\n size: cellSize,\n letter: titleCells[j][i]\n }))\n )\n .flat()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"titleCells = {\n return chunk(titleChars, cols);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":302,"value":"isPointInsideCell = (pt, cell) => {\n const [px, py] = pt;\n const { x, y, size } = cell;\n\n return px >= x && px <= x + size && py >= y && py <= y + size;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"cols = Math.ceil(Math.sqrt(title.length))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"targetLength = cols * cols","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"paddedTitle = {\n randomzie;\n let padding = targetLength - title.length;\n let padLeft = random.rangeFloor(Math.round(padding / 2));\n let padRight = padding - padLeft;\n\n return \" \".repeat(padLeft) + title + \" \".repeat(padRight);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"fillerChars = [\n { value: \"·\", weight: 45 },\n { value: \"+\", weight: 45 },\n { value: \"*\", weight: 5 },\n { value: \"×\", weight: 5 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":68,"value":"getRandomFillerChar = () => random.weightedSet(fillerChars)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"titleChars = paddedTitle\n .toLocaleUpperCase()\n .split(\"\")\n .map((c) => (c === \" \" ? getRandomFillerChar() : c))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":121,"value":"palette = ({\n bg: `hsl(0,0%,95%)`,\n fg: `hsl(0,0%,5%)`,\n debug: `hsl(300, 100%, 50%)`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"maxSize = Math.min(width, height)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"margin = (maxSize / 3) * marginUV","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":133,"value":"size = maxSize - 2 * margin","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":135,"value":"marginX = (width - size) / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":137,"value":"marginY = (height - size) / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"gap = (gapUV * size) / 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"value":"cellSize = (size - gap * (cols - 1)) / cols","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":102,"value":"height = Math.floor((width * 9) / 16)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"svg = htl.svg","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":387,"value":"sampleTexts = [\"simple challenge\", \"special delivery\", \"yesterday\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":222,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":95,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":53,"value":"import { CSMath as math, CSRandom as random } from \"@saneef/canvas-sketch-util\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"import { chunk } from \"@saneef/micro-lodash\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":262,"value":"import { poissonSampling2d } from \"@saneef/poisson-sampling\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":460,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":464,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":466,"value":"footer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"