30:T40c,rules = ({ // In the order top, right, bottom, left (clockwise order) [tile.blank]: [ [tile.blank, tile.up], // top [tile.blank, tile.right], // right [tile.blank, tile.down], // bottom [tile.blank, tile.left] //left ], [tile.up]: [ [tile.right, tile.left, tile.down], // top [tile.up, tile.down, tile.left], // right [tile.blank, tile.down], // bottom [tile.down, tile.up, tile.right] // left ], [tile.down]: [ [tile.blank, tile.up], // top [tile.left, tile.up, tile.down], // right [tile.right, tile.left, tile.up], // bottom [tile.up, tile.down, tile.right] // left ], [tile.right]: [ [tile.right, tile.left, tile.down], // top [tile.left, tile.up, tile.down], // right [tile.right, tile.left, tile.up], // bottom [tile.blank, tile.left] // left ], [tile.left]: [ [tile.right, tile.left, tile.down], // top [tile.blank, tile.right], // right [tile.right, tile.left, tile.up], // bottom [tile.up, tile.down, tile.right] // left ] })31:T783,function drawTile(pattern, { palette, props } = {}) { const { tileWidth, tileHeight, strokeWidth = 15 } = props; const highlightStrokeWidth = strokeWidth / 10; let paths = []; switch (pattern) { case tile.down: // down paths.push(svg``); paths.push(svg``); break; case tile.up: // up paths.push(svg``); break; case tile.right: // right paths.push(svg``); paths.push(svg``); break; case tile.left: // left paths.push(svg``); paths.push(svg``); break; } // stroke-linecap="round" return svg` ${paths} `; }32:T799,data = { // To make sure the random things are always generated in the order: // 1. color palette // 2. data // 3. wave collapsing randomPalette; let base = d3.range(rows).flatMap((j) => { return d3.range(cols).map((i) => { return { xIndex: i, yIndex: j, collapsed: false, options: Object.values(tile) }; }); }); while (base.filter((d) => !d.collapsed).length) { const next = _.cloneDeep(base).map((d, index, arr) => { if (d.collapsed) return d; const i = index % cols; const j = Math.floor(index / cols); const options = Object.values(tile); // Look up if (j > 0) { let up = arr[i + (j - 1) * cols]; d.options = removeInvalidOptions(options, up.options, 2); } // look right if (i < cols - 1) { let right = arr[i + 1 + j * cols]; d.options = removeInvalidOptions(d.options, right.options, 3); } // look down if (j < rows - 1) { let down = arr[i + (j + 1) * cols]; d.options = removeInvalidOptions(d.options, down.options, 0); } // look left if (i > 0) { let left = arr[i - 1 + j * cols]; d.options = removeInvalidOptions(d.options, left.options, 1); } return d; }); base = _.cloneDeep(next); // Pick a cell with least entropy // base[2].options = [0, 1]; // base[7].options = [0, 1]; let copy = base .slice() .filter((d) => !d.collapsed) .sort((a, b) => a.options.length - b.options.length); const baseLength = copy[0].options.length; copy = copy.filter((c) => c.options.length === baseLength); const cell = rnd.pick(copy); if (cell.options.length === 0) { console.log(cell, copy); return base; } cell.collapsed = true; cell.options = [rnd.pick(cell.options)]; yield base; // await Promises.delay(250); } }33:[{"id":"3a29a61f03d82a97767777051e3ab85aa529d364515faed8d733f97966c0ea867be7e1b3964f4eb5b276383ece600842b15e6f9b97f34991f9a52eb77e8677b0","href":"https://static.observableusercontent.com/files/3a29a61f03d82a97767777051e3ab85aa529d364515faed8d733f97966c0ea867be7e1b3964f4eb5b276383ece600842b15e6f9b97f34991f9a52eb77e8677b0","name":"fail_02.png","type":"image/png","lastModified":1692164057932.29,"size":64542}] 2e:{"title":"064 Blank arcade","cells":[{"id":0,"value":"# 064 Blank arcade\n## Implementing a simple wave function collapse method","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"sketch = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"viewof randomize = seedButton(\"🎲 Generate\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`[Link to this variation](${getNotebookUrlWithParams({\n seed: randomize,\n size,\n strokeWidthUV,\n colourScheme\n})})
You can get back to this particular generated graphic using this link.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"viewof colourScheme = {\n const options = [\"Random colours\", \"Greyscale\"];\n return Inputs.radio(options, {\n label: \"Colour scheme\",\n value: params.get(\"colourScheme\") ?? options[0]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"viewof strokeWidthUV = Inputs.range([1 / 16, 1], {\n label: \"Stroke width\",\n step: 1 / 16,\n value: params.get(\"strokeWidthUV\") ?? 0.75\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"viewof size = Inputs.range([2, 30], {\n label: \"Size (cells in a row)\",\n step: 2,\n value: params.get(\"size\") ?? 16\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":421,"value":"## Notes","pinned":false,"hidden":false,"mode":"md"},{"id":583,"value":"I followed Daniel Shiffman’s tutorial on [Wave Function Collapse (video)](https://www.youtube.com/watch?v=rI_y2GAlQFM) to create this.\nTo get an introduction to the concept of Wave Function Collapse algorithm, checkout linked video.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":608,"value":"These tiles are the building blocks.","pinned":false,"hidden":false,"mode":"md"},{"id":429,"value":"tileSamples = {\n const tileWidth = 100;\n const tileHeight = 100;\n\n const svgs = Object.entries(tile).map(([k, t]) => {\n const img = svg``;\n return htl.html`

\n ${img}\n

${k}

`;\n });\n\n return htl.html`

\n ${svgs}\n

The individual tiles that are used to generate the above image.

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"The algorithm starts with a random empty cell, then it places a random tile on it.\nThen, it moves to one of the neighbouring empty cell.\nA tile is placed here based on preset rules.\nA sample rule: only UP, DOWN, or LEFT tiles can be placed on the right side of the RIGHT tile.\nThe process is continued until all the space is filled in.","pinned":false,"hidden":false,"mode":"md"},{"id":592,"value":"This implementation is a simpler version, without any back tracking.\nSo once in a while you will see wrongly filled tile.","pinned":false,"hidden":false,"mode":"md"},{"id":635,"value":"

\n","pinned":false,"hidden":false,"mode":"md"},{"id":574,"value":"_Why is this titled blind arcade?_\n\nRead about [blind arcade](https://en.wikipedia.org/wiki/Blind_arcade) on\nWikipedia. The generated image reminded me about them.\n","pinned":false,"hidden":false,"mode":"md"},{"id":656,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":96,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":101,"value":"viewof debug = Inputs.toggle({ label: \"Show debug marks\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"rows = size","pinned":true,"hidden":false,"mode":"ojs"},{"id":536,"value":"cols = size","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"tile = ({\n blank: 0,\n down: 1,\n up: 2,\n right: 3,\n left: 4\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"function drawTiles({ data = [], props, palette, strokeWidth }) {\n const { tileWidth, tileHeight } = props;\n const tiles = data\n .filter((d) => d.collapsed)\n .map(({ xIndex, yIndex, options }) => {\n return svg`\n ${drawTile(options[0] ?? 0, { palette, props, strokeWidth })} \n`;\n });\n return svg`${tiles}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":284,"value":"function removeInvalidOptions(options, neighborsOptions, dirIndex) {\n let newOptions = neighborsOptions.flatMap((no) =>\n options.filter((possible) => rules[no][dirIndex].includes(possible))\n );\n newOptions = _.uniq(newOptions);\n if (newOptions.length === 0) {\n console.log(\"Non fitting tile\", options, newOptions);\n return options;\n }\n return newOptions;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"function drawDebugMarks(debug = false, { props, palette, cols, rows }) {\n if (!debug) return \"\";\n const { tileWidth, tileHeight } = props;\n const cells = d3.range(rows).flatMap((j) => {\n return d3.range(cols).map((i) => {\n return svg``;\n });\n });\n\n return svg`\n ${cells}\n`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"aspectRatio = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"props = {\n const w = Math.max(480, width);\n const h = Math.floor(width / aspectRatio);\n const tileWidth = w / cols;\n const tileHeight = h / rows;\n\n const strokeWidth = math.lerp(0.5, w / 35, strokeWidthUV);\n return {\n aspectRatio,\n width: w,\n height: h,\n tileWidth,\n tileHeight,\n strokeWidth\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":522,"value":"randomPalette = rnd.pick(colors)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"palette = {\n const debug = \"#f0f\";\n const base = {\n // greyscale\n bg: \"hsl(0,0%,95%)\",\n fg: \"hsl(0,0%,5%)\",\n debug\n };\n\n if (colourScheme === \"Greyscale\") return base;\n\n const { primary, accent } = randomPalette;\n return { ...base, bg: primary, fg: accent };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"rnd = {\n CSRandom.setSeed(randomize);\n return CSRandom;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":437,"value":"svg = htl.svg","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"import { CSRandom, CSMath as math } from \"@saneef/canvas-sketch-util\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"import { seedButton } from \"@saneef/seed-button\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"import { getNotebookUrlWithParams, params } from \"@saneef/notebook-url\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"import { colors } from \"@saneef/mindfully-curated-colors\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}