2d:null 2e:["$","title",null,{"children":"Wave Function Collapse Tiles | Zach Pino | Observable"}] 33:T47b,complexTiles = [ [ [0, 1, 2, 1, 0], [0, 1, 2, 1, 0], [0, 1, 2, 1, 0], [0, 1, 2, 1, 0], [0, 1, 2, 1, 0] ], [ [0, 1, 3, 1, 0], [0, 1, 3, 1, 0], [0, 1, 3, 1, 0], [0, 1, 3, 1, 0], [0, 1, 3, 1, 0] ], [ [0, 1, 2, 1, 0], [1, 1, 2, 1, 0], [2, 2, 2, 1, 0], [1, 1, 2, 1, 0], [0, 1, 2, 1, 0] ], [ [0, 1, 3, 1, 0], [1, 1, 3, 1, 0], [3, 3, 3, 1, 0], [1, 1, 3, 1, 0], [0, 1, 3, 1, 0] ], [ [0, 1, 2, 1, 0], [1, 1, 2, 1, 1], [3, 1, 2, 1, 3], [1, 1, 2, 1, 1], [0, 1, 2, 1, 0] ], [ [0, 1, 3, 1, 0], [1, 1, 3, 1, 1], [2, 1, 3, 1, 2], [1, 1, 3, 1, 1], [0, 1, 3, 1, 0] ], [ [0, 1, 2, 1, 0], [1, 1, 2, 1, 0], [2, 2, 2, 1, 0], [1, 1, 1, 1, 0], [0, 0, 0, 0, 0] ], [ [0, 1, 3, 1, 0], [1, 1, 3, 1, 0], [3, 3, 3, 1, 0], [1, 1, 1, 1, 0], [0, 0, 0, 0, 0] ], [ [0, 1, 2, 1, 0], [1, 1, 2, 1, 1], [2, 2, 2, 1, 3], [1, 1, 1, 1, 1], [0, 1, 3, 1, 0] ], [ [0, 1, 3, 1, 0], [1, 1, 3, 1, 1], [3, 3, 3, 1, 2], [1, 1, 1, 1, 1], [0, 1, 2, 1, 0] ] ]34:T16a2,complicatedTiles = [ [ [0, 0, 0, 4, 0, 0, 0], [0, 0, 0, 4, 0, 0, 0], [0, 0, 4, 0, 0, 4, 0], [0, 0, 4, 0, 4, 4, 0], [0, 0, 4, 0, 4, 4, 0], [0, 0, 4, 0, 4, 0, 0], [0, 0, 0, 4, 0, 0, 0] ], [ [0, 0, 0, 4, 0, 0, 0], [0, 4, 0, 4, 0, 0, 0], [0, 4, 0, 0, 4, 0, 0], [0, 4, 4, 0, 4, 0, 4], [0, 4, 4, 0, 4, 4, 0], [0, 0, 4, 4, 0, 0, 0], [0, 0, 0, 4, 0, 0, 0] ], [ [4, 0, 0, 4, 0, 0, 4], [0, 4, 0, 4, 0, 4, 0], [0, 4, 0, 4, 4, 0, 0], [0, 0, 4, 4, 0, 0, 0], [0, 0, 4, 0, 0, 0, 0], [0, 0, 0, 4, 0, 0, 0], [0, 0, 0, 4, 0, 0, 0] ], [ [4, 0, 0, 0, 0, 0, 4], [0, 4, 0, 0, 0, 4, 0], [0, 4, 0, 0, 4, 0, 0], [0, 0, 4, 4, 0, 4, 0], [0, 0, 4, 0, 4, 4, 0], [0, 0, 0, 4, 4, 0, 0], [0, 0, 0, 4, 0, 0, 0] ], [ [4, 0, 0, 0, 0, 0, 0], [0, 4, 0, 0, 4, 4, 0], [0, 4, 0, 4, 4, 4, 0], [0, 0, 4, 4, 4, 0, 0], [0, 0, 4, 0, 0, 0, 0], [0, 0, 0, 4, 0, 0, 0], [0, 0, 0, 4, 0, 0, 0] ], [ [4, 0, 0, 4, 0, 0, 4], [0, 4, 0, 4, 0, 4, 0], [0, 4, 0, 4, 4, 0, 0], [0, 0, 4, 4, 0, 0, 0], [0, 0, 4, 4, 4, 4, 0], [0, 4, 0, 0, 4, 4, 0], [4, 0, 0, 0, 0, 0, 0] ], [ [4, 0, 0, 0, 0, 0, 0], [0, 4, 0, 0, 0, 0, 0], [0, 4, 0, 0, 4, 0, 0], [0, 4, 0, 0, 4, 4, 0], [0, 4, 0, 0, 4, 4, 0], [0, 4, 0, 0, 0, 4, 0], [4, 0, 0, 0, 0, 0, 4] ], [ [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 4, 4, 0, 0, 0], [0, 4, 4, 4, 0, 0, 0], [0, 4, 4, 4, 0, 0, 0], [0, 4, 4, 0, 0, 0, 0], [4, 0, 0, 0, 0, 0, 0] ], [ [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 4, 4, 0, 0, 0], [0, 4, 4, 4, 0, 4, 0], [0, 4, 4, 4, 0, 4, 0], [0, 4, 4, 0, 0, 4, 0], [4, 0, 0, 0, 0, 0, 4] ], [ [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 4, 4, 0, 0], [0, 0, 4, 4, 0, 0, 0], [0, 4, 4, 4, 4, 0, 0], [0, 4, 4, 4, 4, 0, 0], [0, 0, 4, 4, 0, 0, 0], [0, 0, 0, 4, 0, 0, 0] ], [ [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 4, 4, 0, 0], [0, 0, 4, 4, 0, 0, 0], [0, 0, 4, 4, 4, 0, 0], [0, 0, 4, 4, 4, 0, 0], [0, 0, 0, 0, 4, 4, 0], [0, 0, 0, 0, 0, 0, 4] ], [ [4, 0, 0, 0, 0, 0, 0], [0, 4, 0, 4, 0, 0, 0], [0, 4, 4, 0, 0, 4, 0], [0, 4, 0, 0, 4, 4, 0], [0, 4, 0, 0, 4, 4, 0], [0, 4, 0, 0, 0, 4, 0], [4, 0, 0, 0, 0, 0, 4] ], [ [0, 0, 0, 0, 0, 0, 0], [0, 0, 4, 0, 4, 0, 0], [0, 4, 4, 0, 4, 4, 0], [0, 4, 0, 0, 4, 4, 0], [0, 4, 4, 0, 0, 4, 0], [0, 4, 0, 4, 0, 4, 0], [4, 0, 0, 4, 0, 0, 4] ], [ [0, 0, 0, 4, 0, 0, 0], [0, 0, 0, 4, 4, 0, 0], [0, 0, 4, 4, 4, 0, 0], [0, 0, 4, 4, 4, 0, 0], [0, 0, 4, 4, 0, 0, 0], [0, 0, 0, 4, 0, 0, 0], [0, 0, 0, 4, 0, 0, 0] ], [ [0, 0, 0, 4, 0, 0, 0], [0, 0, 4, 0, 0, 4, 0], [0, 0, 4, 0, 4, 4, 0], [0, 0, 4, 0, 4, 4, 0], [0, 0, 4, 0, 4, 4, 0], [0, 0, 4, 0, 4, 0, 0], [0, 0, 0, 4, 0, 0, 0] ], [ [3, 3, 3, 2, 2, 2, 0], [3, 3, 2, 2, 2, 0, 0], [3, 2, 0, 0, 0, 0, 0], [2, 2, 0, 0, 0, 0, 0], [2, 2, 0, 0, 0, 0, 0], [2, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0] ], [ [3, 3, 3, 2, 2, 2, 0], [3, 3, 0, 0, 0, 0, 0], [3, 0, 2, 2, 0, 0, 0], [2, 0, 2, 2, 2, 0, 0], [2, 0, 0, 2, 2, 0, 0], [2, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0] ], [ [3, 3, 3, 0, 0, 0, 0], [3, 3, 2, 2, 2, 0, 0], [3, 2, 0, 2, 2, 2, 0], [2, 2, 0, 0, 2, 2, 0], [2, 2, 0, 0, 0, 0, 0], [2, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0] ], [ [3, 3, 3, 0, 0, 0, 0], [3, 3, 2, 0, 0, 0, 0], [3, 2, 2, 2, 2, 0, 0], [0, 0, 2, 2, 2, 0, 0], [0, 0, 2, 2, 2, 2, 0], [0, 0, 0, 2, 2, 2, 0], [0, 0, 0, 0, 0, 0, 0] ], [ [3, 3, 3, 2, 2, 2, 0], [3, 3, 4, 0, 0, 0, 0], [3, 4, 4, 0, 0, 4, 0], [2, 0, 4, 0, 4, 4, 0], [2, 0, 4, 0, 4, 4, 0], [2, 0, 0, 4, 4, 0, 0], [0, 0, 0, 4, 0, 0, 0] ], [ [3, 3, 3, 2, 2, 2, 0], [3, 3, 4, 0, 0, 0, 0], [3, 4, 4, 0, 0, 4, 0], [2, 0, 4, 4, 0, 4, 0], [2, 0, 0, 0, 4, 0, 0], [2, 0, 4, 4, 0, 4, 0], [0, 0, 0, 0, 0, 0, 4] ], [ [3, 3, 3, 2, 2, 2, 0], [3, 3, 0, 0, 0, 0, 0], [3, 4, 0, 0, 4, 4, 0], [2, 0, 4, 0, 0, 0, 4], [2, 2, 4, 0, 0, 4, 0], [2, 0, 0, 4, 0, 0, 0], [0, 0, 0, 4, 0, 0, 0] ], [ [3, 3, 3, 2, 2, 2, 0], [3, 3, 2, 2, 2, 0, 2], [3, 2, 0, 0, 0, 2, 2], [2, 2, 0, 0, 0, 2, 2], [2, 2, 0, 0, 0, 2, 3], [2, 0, 2, 2, 2, 3, 3], [0, 2, 2, 2, 3, 3, 3] ], [ [3, 3, 3, 0, 0, 0, 0], [3, 3, 0, 4, 4, 4, 0], [3, 4, 0, 0, 4, 4, 0], [2, 0, 4, 0, 0, 0, 4], [2, 2, 4, 0, 0, 4, 0], [2, 0, 0, 4, 0, 0, 0], [0, 0, 0, 4, 0, 0, 0] ], [ [3, 3, 3, 2, 2, 2, 0], [3, 3, 2, 2, 0, 0, 2], [3, 2, 2, 0, 0, 2, 2], [0, 2, 2, 0, 0, 2, 2], [0, 2, 0, 0, 0, 2, 3], [0, 0, 2, 2, 2, 3, 3], [0, 2, 2, 2, 3, 3, 3] ], [ [3, 3, 3, 0, 0, 0, 0], [3, 3, 2, 2, 2, 0, 0], [3, 0, 2, 2, 2, 2, 0], [0, 0, 0, 0, 2, 2, 0], [0, 0, 0, 4, 0, 0, 0], [0, 0, 4, 4, 4, 4, 0], [0, 0, 0, 0, 0, 0, 4] ], [ [3, 3, 3, 0, 0, 0, 0], [3, 3, 0, 0, 0, 0, 2], [3, 2, 2, 0, 0, 2, 2], [0, 2, 2, 2, 0, 2, 2], [0, 0, 2, 2, 0, 2, 3], [0, 0, 0, 0, 0, 3, 3], [0, 0, 0, 0, 3, 3, 3] ], [ [4, 0, 0, 4, 0, 0, 4], [0, 4, 0, 4, 0, 4, 0], [0, 4, 0, 0, 4, 0, 0], [4, 0, 4, 0, 0, 0, 0], [0, 0, 4, 0, 4, 4, 0], [0, 4, 0, 0, 4, 4, 0], [4, 0, 0, 0, 0, 0, 4] ], [ [4, 0, 0, 0, 0, 0, 0], [0, 4, 0, 0, 4, 4, 0], [0, 4, 0, 4, 4, 4, 0], [0, 0, 4, 4, 4, 0, 0], [0, 0, 0, 4, 0, 0, 0], [0, 0, 0, 0, 4, 4, 0], [0, 0, 0, 0, 0, 0, 4] ] ] .map((d) => [d, d.map((e) => e.toReversed())]) .flat()35:T504,allTiles = { const uniqueTiles = new Set(); function gridToString(grid) { return grid.flat().join(""); } function generateSymmetries(grid) { const symmetries = []; let current = grid; for (let i = 0; i < 4; i++) { current = rotateGrid(current); symmetries.push(current); symmetries.push(reflectGrid(current)); } return symmetries.map(gridToString).sort(); } function rotateGrid(grid) { return grid[0].map((val, index) => grid.map((row) => row[index]).toReversed() ); } function reflectGrid(grid) { return grid.map((row) => row.slice().toReversed()); } for (let i = 0; i < 512; i++) { const binaryString = i.toString(2).padStart(9, "0"); const grid = [ binaryString.slice(0, 3).split("").map(Number), binaryString.slice(3, 6).split("").map(Number), binaryString.slice(6).split("").map(Number) ]; const symmetries = generateSymmetries(grid); const uniqueIdentifier = symmetries[0]; uniqueTiles.add(uniqueIdentifier); } return Array.from(uniqueTiles).map((tileString) => { return [ tileString.slice(0, 3).split("").map(Number), tileString.slice(3, 6).split("").map(Number), tileString.slice(6).split("").map(Number) ]; }); }36:T536,tileSet = baseTiles .map((d, i) => ({ id: i, tileData: d, edges: [ [...d[0]], d.map((e) => e[e.length - 1]), [...d[d.length - 1]].toReversed(), d.map((e) => e[0]).toReversed() ].map((e) => e.join("")) })) .map((d) => d3.range(4).map((n) => ({ id: d.id + "-" + n, baseTile: d.id, rotation: n, edges: d3.range(4).map((i) => d.edges[(i - n + 4) % 4]), tileData: rotateArray(d.tileData, n) })) ) .flat() .reduce((a, v) => { let uniqueTiles = a.map((d) => d.edges.join(",")); if (!uniqueTiles.includes(v.edges.join(","))) { a.push(v); } return a; }, []) .map((obs, i, arr) => { let thisTile = { ...obs, up: [], right: [], down: [], left: [] }; arr.map((tile, i) => { if (tile.edges[2] == thisTile.edges[0].split("").toReversed().join("")) { thisTile.up.push(i); } if (tile.edges[3] == thisTile.edges[1].split("").toReversed().join("")) { thisTile.right.push(i); } if (tile.edges[0] == thisTile.edges[2].split("").toReversed().join("")) { thisTile.down.push(i); } if (tile.edges[1] == thisTile.edges[3].split("").toReversed().join("")) { thisTile.left.push(i); } }); return thisTile; }) .map((d, i) => ({ ...d, index: i }))37:T5e7,simulation = { const newGrid = structuredClone(grid); while (true) { const remainingCellCount = newGrid.filter((d) => !d.collapsed).length; if (remainingCellCount == 0) { return "done!"; } const lowestEntropy = d3.min( newGrid.filter((d) => !d.collapsed), (d) => d.options.length ); const candidates = newGrid.filter( (cell) => cell.options.length == lowestEntropy ); const candidate = candidates[Math.floor(Math.random() * candidates.length)]; const selection = candidate.options[Math.floor(Math.random() * candidate.options.length)]; candidate.contents = tileSet[selection]; candidate.options = [selection]; candidate.collapsed = true; newGrid.forEach((cell) => { if (!cell.collapsed) { let up = newGrid[cell.neighbors.up]?.contents?.down; let down = newGrid[cell.neighbors.down]?.contents?.up; let right = newGrid[cell.neighbors.right]?.contents?.left; let left = newGrid[cell.neighbors.left]?.contents?.right; let newOptions = d3 .range(tileSet.length) .filter((c) => [up, down, left, right].filter((e) => e).every((f) => f.includes(c)) ); cell.options = newOptions; } }); newGrid.forEach((cell) => { if (cell.options.length == 1) { cell.contents = tileSet[cell.options[0]]; cell.collapsed = true; } }); yield newGrid; //.filter((d) => d.collapsed == true); } }38:T523,{ let cellSize = tileSet[0].tileData.length; let context = DOM.context2d(wfcColumns * cellSize, wfcRows * cellSize); context.fillStyle = "black"; context.fillRect(0, 0, wfcColumns * cellSize, wfcRows * cellSize); //for clean rendering pixel art context.canvas.style.width = width + "px"; context.canvas.style["image-rendering"] = "pixelated"; context.canvas.style["image-rendering"] = "crisp-edges"; context.fillStyle = "black"; context.strokeStyle = "black"; context.lineWidth = 0.05; simulation.forEach((cell) => { context.strokeRect( cell.x * cellSize, cell.y * cellSize, cellSize, cellSize ); }); simulation.forEach((cell) => { if (cell.collapsed) { if (!cell.contents?.tileData) { context.fillStyle = "white"; context.fillRect( cell.x * cellSize, cell.y * cellSize, cellSize, cellSize ); } else { cell.contents.tileData.map((tileRow, dY) => tileRow.map((tileCell, dX) => { context.fillStyle = colors[tileCell]; context.fillRect( cell.x * cellSize + dX, cell.y * cellSize + dY, 1, 1 ); }) ); } } }); return context.canvas; }39:T65c,spriteView = { let context = DOM.context2d( spriteColumns * kernelSize, spriteRows * kernelSize ); context.fillStyle = "white"; context.fillRect(0, 0, spriteColumns * kernelSize, spriteRows * kernelSize); //for clean rendering pixel art context.canvas.style.width = width + "px"; context.canvas.style["image-rendering"] = "pixelated"; context.canvas.style["image-rendering"] = "crisp-edges"; context.strokeStyle = "black"; context.lineWidth = 0.02; spriteSimulation.forEach((cell) => { context.strokeRect( cell.x * kernelSize, cell.y * kernelSize, kernelSize, kernelSize ); }); spriteSimulation.forEach((cell) => { if (cell.collapsed) { if (!cell.contents?.tileData) { context.fillStyle = "black"; context.fillRect( cell.x * kernelSize, cell.y * kernelSize, kernelSize, kernelSize ); } else { for (let i = 0; i < cell.contents.tileData.length; i += 4) { const tileData = cell.contents.tileData; const color = "rgb(" + tileData[i] + "," + tileData[i + 1] + "," + tileData[i + 2] + ")"; const pixelIndex = i / 4; const dx = pixelIndex % kernelSize; const dy = Math.floor(pixelIndex / kernelSize); context.fillStyle = color; context.fillRect( cell.x * kernelSize + dx, cell.y * kernelSize + dy, 1, 1 ); } } } }); return context.canvas; }3a:Tbfd,spriteTiles = { let spriteSheet = await selectedSpriteSheet.image(); let image = spriteSheet; let ctx = DOM.context2d(spriteSheet.width, spriteSheet.height); ctx.canvas.style["image-rendering"] = "pixelated"; ctx.canvas.style["image-rendering"] = "crisp-edges"; const edgeSize = kernelSize; // The size of the tile and step size ctx.drawImage(spriteSheet, 0, 0, spriteSheet.width, spriteSheet.height); const tileOccurrences = new Map(); // Track tile data and occurrences instead of uniqueTilesSet // Helper to reverse edges while preserving color channel order remains unchanged const reverseEdge = (edgeData) => { if (!edgeData) return undefined; const reversed = new Uint8ClampedArray(edgeData.length); for ( let i = 0, j = edgeData.length - 4; i < edgeData.length; i += 4, j -= 4 ) { reversed[i] = edgeData[j]; reversed[i + 1] = edgeData[j + 1]; reversed[i + 2] = edgeData[j + 2]; reversed[i + 3] = edgeData[j + 3]; } return reversed; }; for (let y = 0; y < image.height; y += edgeSize) { for (let x = 0; x < image.width; x += edgeSize) { // Capture the tile and its edges const tileData = ctx.getImageData(x, y, edgeSize, edgeSize).data; const topEdge = y === 0 ? ctx.getImageData(x, y, edgeSize, 1).data : ctx.getImageData(x, y - 1, edgeSize, 1).data; const bottomEdgeData = y + edgeSize >= image.height ? ctx.getImageData(x, y + edgeSize - 1, edgeSize, 1).data : ctx.getImageData(x, y + edgeSize, edgeSize, 1).data; const leftEdgeData = x === 0 ? ctx.getImageData(x, y, 1, edgeSize).data : ctx.getImageData(x - 1, y, 1, edgeSize).data; const rightEdge = x + edgeSize >= image.width ? ctx.getImageData(x + edgeSize - 1, y, 1, edgeSize).data : ctx.getImageData(x + edgeSize, y, 1, edgeSize).data; const bottomEdge = reverseEdge(bottomEdgeData); const leftEdge = reverseEdge(leftEdgeData); // Convert tile and edges to string for uniqueness check const tileString = Array.from(tileData).join(",") + "|" + Array.from(topEdge).join(",") + "|" + Array.from(rightEdge).join(",") + "|" + Array.from(bottomEdge).join(",") + "|" + Array.from(leftEdge).join(","); // Update occurrences instead of simply adding to a set if (tileOccurrences.has(tileString)) { tileOccurrences.get(tileString).occurrences++; } else { tileOccurrences.set(tileString, { tileData, edges: { top: topEdge, right: rightEdge, bottom: bottomEdge, left: leftEdge }, occurrences: 1 // Initialize occurrence count }); } } } // Convert the Map entries to an array, including the occurrence count for each tile const tilesWithOccurrences = Array.from(tileOccurrences.values()); return tilesWithOccurrences; }3b:T925,spriteTileAdjacencies = { let edgeSize = kernelSize; // Helper function to reverse an array in chunks of 4 (for RGBA data) function reverseInChunks(array) { let result = []; for (let i = array.length - 4; i >= 0; i -= 4) { result.push(...array.slice(i, i + 4)); } return result; } return spriteTiles .map((tile, index) => { let updatedTile = { ...tile, up: [], right: [], down: [], left: [] }; spriteTiles.forEach((neighbor, neighborIndex) => { // if (index === neighborIndex) return; // Skip self // Calculate the number of RGBA values per edge const rgbaPerEdge = edgeSize * 4; // Extract and prepare neighbor's internal edge data, considering original reversals let neighborTopEdge = reverseInChunks( neighbor.tileData.slice(0, rgbaPerEdge) ); // Reverse for matching let neighborBottomEdge = neighbor.tileData.slice(-rgbaPerEdge); // No reversal needed let neighborLeftEdge = []; let neighborRightEdge = []; for (let i = 0; i < edgeSize; i++) { neighborLeftEdge.push( ...neighbor.tileData.slice(i * rgbaPerEdge, i * rgbaPerEdge + 4) ); neighborRightEdge.push( ...neighbor.tileData.slice( i * rgbaPerEdge + (edgeSize - 1) * 4, i * rgbaPerEdge + edgeSize * 4 ) ); } let neighborLeftEdgeStr = neighborLeftEdge.join(","); // Already reversed during generation let neighborRightEdgeStr = reverseInChunks(neighborRightEdge).join(","); // Reverse for matching // Check compatibility based on the adjusted edge reversals if (tile.edges.top.join(",") === neighborBottomEdge.join(",")) { updatedTile.up.push(neighborIndex); } if (tile.edges.right.join(",") === neighborLeftEdgeStr) { updatedTile.right.push(neighborIndex); } if (tile.edges.bottom.join(",") === neighborTopEdge.join(",")) { updatedTile.down.push(neighborIndex); } if (tile.edges.left.join(",") === neighborRightEdgeStr) { updatedTile.left.push(neighborIndex); } }); return updatedTile; }) .map((tile, i) => ({ ...tile, index: i })); // Reassign indexes to the updated tiles }3c:T994,spriteTileSet = { let tileDataMap = new Map(); // Tracks original tiles by tileData for merging adjacencies and counts occurrences // Step 1: Consolidate tiles based on tileData and merge their adjacencies, track occurrences spriteTileAdjacencies.forEach((tile, index) => { const tileDataKey = tile.tileData.join(","); if (!tileDataMap.has(tileDataKey)) { tileDataMap.set(tileDataKey, { ...tile, up: tile.up || [], right: tile.right || [], down: tile.down || [], left: tile.left || [], occurrences: 1, // Initialize occurrences count originalIndexes: [index] // Track original indexes for updating adjacencies later }); } else { let existingTile = tileDataMap.get(tileDataKey); // Merge adjacencies for duplicates ["up", "right", "down", "left"].forEach((direction) => { existingTile[direction] = Array.from( new Set([...existingTile[direction], ...tile[direction]]) ); }); existingTile.occurrences += 1; existingTile.originalIndexes.push(index); } }); // Calculate total occurrences for probability calculation const totalOccurrences = Array.from(tileDataMap.values()).reduce( (sum, { occurrences }) => sum + occurrences, 0 ); // Convert the map to an array and assign probabilities based on occurrences let consolidatedTiles = Array.from(tileDataMap.values()).map( (tile, newIndex) => { tile.probability = tile.occurrences / totalOccurrences; // Assign probability tile.newIndex = newIndex; // Prepare for updating indices return tile; } ); // Update adjacency lists using newIndex property and clean up consolidatedTiles.forEach((tile) => { ["up", "right", "down", "left"].forEach((direction) => { tile[direction] = tile[direction] .map((originalIndex) => { const foundTile = consolidatedTiles.find((t) => t.originalIndexes.includes(originalIndex) ); return foundTile ? foundTile.newIndex : undefined; }) .filter((index) => index !== undefined); // Ensure uniqueness after mapping tile[direction] = [...new Set(tile[direction])]; }); }); // Finalize by removing temporary properties and keeping the probability consolidatedTiles = consolidatedTiles.map( ({ originalIndexes, newIndex, ...tile }) => tile ); return consolidatedTiles; }3d:Te3a,spriteSimulation = { const newGrid = structuredClone(spriteGrid); // Map tile indices to probabilities for quick access const tileProbabilities = spriteTileSet.map((tile) => tile.probability); function selectOptionWeighted(options, probabilities) { const totalProbability = probabilities.reduce((sum, prob) => sum + prob, 0); let threshold = Math.random() * totalProbability; for (let i = 0; i < options.length; i++) { threshold -= probabilities[i]; if (threshold < 0) return options[i]; } return options[options.length - 1]; // Fallback to the last option } function heuristicChoice(cell) { // Simplified heuristic: choose the most common option among the available ones // Note: This example does not take adjacency rules into account and may need adjustment if (cell.options.length === 0) { return Math.floor(Math.random() * spriteTileSet.length); // Totally random for demonstration } return cell.options[0]; // Default fallback to the first option if available } while (true) { let changesMade = false; // Initialize flag to track changes const remainingCellCount = newGrid.filter((d) => !d.collapsed).length; if (remainingCellCount === 0) { break; // Exit the loop if all cells are collapsed } newGrid.forEach((cell, cellIndex) => { if (!cell.collapsed) { let up = newGrid[cell.neighbors.up]?.contents?.down; let down = newGrid[cell.neighbors.down]?.contents?.up; let right = newGrid[cell.neighbors.right]?.contents?.left; let left = newGrid[cell.neighbors.left]?.contents?.right; let newOptions = cell.options.filter((c) => [up, down, left, right].every((f) => !f || f.includes(c)) ); if (newOptions.length !== cell.options.length) { cell.options = newOptions; changesMade = true; } // // Additional check if there are no options left // if (cell.options.length === 0) { // const selectedOption = heuristicChoice(cell); // cell.contents = spriteTileSet[selectedOption]; // cell.options = [selectedOption]; // Reassign with the heuristic choice // cell.collapsed = true; // changesMade = true; // } else if (cell.options.length === 1 && !cell.collapsed) { // cell.contents = spriteTileSet[cell.options[0]]; // cell.collapsed = true; // changesMade = true; // } } }); if (!changesMade) { // Collapse the cell with the lowest entropy, now with weighted probabilities const lowestEntropyIndex = newGrid.reduce((lowest, cell, index) => { if ( !cell.collapsed && (lowest === -1 || cell.options.length < newGrid[lowest].options.length) ) { return index; } return lowest; }, -1); if (lowestEntropyIndex !== -1) { const cell = newGrid[lowestEntropyIndex]; // Prepare for weighted selection const optionProbabilities = cell.options.map( (option) => tileProbabilities[option] ); // Perform weighted selection of the tile based on its probability const selectedOption = selectOptionWeighted( cell.options, optionProbabilities ); cell.contents = spriteTileSet[selectedOption]; cell.options = [selectedOption]; cell.collapsed = true; } else { break; // Exit if no changes were made and no cells can be collapsed } } yield newGrid; // Yield the current state of the grid } }3e:Td10,// probView = { // let context = DOM.context2d( // spriteColumns * kernelSize, // spriteRows * kernelSize // ); // context.fillStyle = "white"; // context.fillRect(0, 0, spriteColumns * kernelSize, spriteRows * kernelSize); // // For clean rendering pixel art // context.canvas.style.width = width + "px"; // context.canvas.style["image-rendering"] = "pixelated"; // context.canvas.style["image-rendering"] = "crisp-edges"; // context.strokeStyle = "black"; // context.lineWidth = 0.02; // // Helper function to calculate average color // const calculateAverageColor = (colors) => { // const sumColor = colors.reduce( // (acc, color) => { // acc[0] += color[0]; // acc[1] += color[1]; // acc[2] += color[2]; // return acc; // }, // [0, 0, 0] // ); // return sumColor.map((val) => Math.floor(val / colors.length)); // }; // spriteSimulation.forEach((cell) => { // context.strokeRect( // cell.x * kernelSize, // cell.y * kernelSize, // kernelSize, // kernelSize // ); // if (!cell.collapsed) { // // For non-collapsed cells, calculate and draw the blurry average // const pixelColors = Array.from( // { length: kernelSize * kernelSize }, // () => [] // ); // cell.options.forEach((optionIndex) => { // const tileData = spriteTileSet[optionIndex].tileData; // for (let i = 0; i < tileData.length; i += 4) { // const pixelIndex = i / 4; // pixelColors[pixelIndex].push([ // tileData[i], // tileData[i + 1], // tileData[i + 2] // ]); // } // }); // pixelColors.forEach((colors, index) => { // if (colors.length > 0) { // const averageColor = calculateAverageColor(colors); // const colorString = `rgb(${averageColor[0]},${averageColor[1]},${averageColor[2]})`; // const dx = index % kernelSize; // const dy = Math.floor(index / kernelSize); // context.fillStyle = colorString; // context.fillRect( // cell.x * kernelSize + dx, // cell.y * kernelSize + dy, // 1, // 1 // ); // } // }); // } else if (cell.contents?.tileData) { // // For collapsed cells with contents, draw as before // for (let i = 0; i < cell.contents.tileData.length; i += 4) { // const tileData = cell.contents.tileData; // const color = `rgb(${tileData[i]},${tileData[i + 1]},${ // tileData[i + 2] // })`; // const pixelIndex = i / 4; // const dx = pixelIndex % kernelSize; // const dy = Math.floor(pixelIndex / kernelSize); // context.fillStyle = color; // context.fillRect( // cell.x * kernelSize + dx, // cell.y * kernelSize + dy, // 1, // 1 // ); // } // } else { // // Fallback for collapsed cells without contents (should not happen in a correct simulation) // context.fillStyle = "black"; // context.fillRect( // cell.x * kernelSize, // cell.y * kernelSize, // kernelSize, // kernelSize // ); // } // }); // return context.canvas; // } 3f:[{"id":"a76b30aa19e08d7d735c5e40cb62646e766cbd86b86ff3335590ee8343b116b579f5fb8d6d067ed45db4064ea597c679206c9d83cdf580a37fb4645796c8d536","href":"https://static.observableusercontent.com/files/a76b30aa19e08d7d735c5e40cb62646e766cbd86b86ff3335590ee8343b116b579f5fb8d6d067ed45db4064ea597c679206c9d83cdf580a37fb4645796c8d536","name":"pokemon-town.png","type":"image/png","lastModified":1712521079357.221,"size":27998},{"id":"ac578e0cc93015f939c652f23ea60b11590f8553d88df130ecde8dcc71afdc1615b0f54bb924de3631fc82cce87f4a502e9ac65207446f48b21772e250660e84","href":"https://static.observableusercontent.com/files/ac578e0cc93015f939c652f23ea60b11590f8553d88df130ecde8dcc71afdc1615b0f54bb924de3631fc82cce87f4a502e9ac65207446f48b21772e250660e84","name":"mario1-1.png","type":"image/png","lastModified":1712521331382.003,"size":18211},{"id":"db1c965086a70f807b2865391cf3793ce88e844b419bb11ba1e25a42d84dcbfae48941080de757a7144c08a4455dddbfb35d1f9c98045874d54a044c976c216d","href":"https://static.observableusercontent.com/files/db1c965086a70f807b2865391cf3793ce88e844b419bb11ba1e25a42d84dcbfae48941080de757a7144c08a4455dddbfb35d1f9c98045874d54a044c976c216d","name":"kirby-popstar@1.png","type":"image/png","lastModified":1712524497742.568,"size":37882},{"id":"bd4a0df03c46e85c955449193c1b8dccac9496fbefcc26c4d24c9d4493627d49fb8650a8da2283f0c514646615ad90d50bd8bed417bc600fb0172923cda4b644","href":"https://static.observableusercontent.com/files/bd4a0df03c46e85c955449193c1b8dccac9496fbefcc26c4d24c9d4493627d49fb8650a8da2283f0c514646615ad90d50bd8bed417bc600fb0172923cda4b644","name":"mario3.png","type":"image/png","lastModified":1712525840759.162,"size":24302},{"id":"d8c0a832ca8a90f4b8181f8acd4e8346ba962f1f5e18bb64655f8005ed053130738329afcfe92ee84509c18870d9ea1e3bd513f5ac15b1b8f5cbb1abbcd00c3f","href":"https://static.observableusercontent.com/files/d8c0a832ca8a90f4b8181f8acd4e8346ba962f1f5e18bb64655f8005ed053130738329afcfe92ee84509c18870d9ea1e3bd513f5ac15b1b8f5cbb1abbcd00c3f","name":"megaman.png","type":"image/png","lastModified":1712533231101.766,"size":32128},{"id":"65dcc2b076ab89e4f4240004ae0a23625a696ba5b689327750a6370078b013adc22a5a84c67cdffcac82395729677a4de1b0d3e22d9f6eba183dbc7a8402b5ec","href":"https://static.observableusercontent.com/files/65dcc2b076ab89e4f4240004ae0a23625a696ba5b689327750a6370078b013adc22a5a84c67cdffcac82395729677a4de1b0d3e22d9f6eba183dbc7a8402b5ec","name":"hardikazu.png","type":"image/png","lastModified":1713370104153.659,"size":7474},{"id":"008cd688c3ea34b4d8e3d74b39408c4fdb04357525de23565f028dd31fa0d200dcb79bb2931c6dae6d80fa5a14abf0383e430db9d0ed412081afe86c5172794c","href":"https://static.observableusercontent.com/files/008cd688c3ea34b4d8e3d74b39408c4fdb04357525de23565f028dd31fa0d200dcb79bb2931c6dae6d80fa5a14abf0383e430db9d0ed412081afe86c5172794c","name":"Fire-Red.png","type":"image/png","lastModified":1712526581555.227,"size":26138},{"id":"23b1d7f571cc78211af1d2867864ae3e36de5feb58cc59d3757851ed35ca66060e8de76993833371f212a881bd138ffad8ac1abdb68c542c536d254f21c6f48b","href":"https://static.observableusercontent.com/files/23b1d7f571cc78211af1d2867864ae3e36de5feb58cc59d3757851ed35ca66060e8de76993833371f212a881bd138ffad8ac1abdb68c542c536d254f21c6f48b","name":"michael-woomi.png","type":"image/png","lastModified":1713387514985.899,"size":2196}] 31:{"id":"ca298d6ae5b80aca","slug":"wave-function-collapse","title":"Wave Function Collapse Tiles","thumbnail":"ceca50f2a9938da1cfcd08a66044301570114bd2687b984ffa9c5aa8e63df692","access_level":"public","create_time":"$D2024-03-27T00:17:46.618Z","update_time":"$D2024-04-26T14:35:49.733Z","view_time":null,"first_public_time":"$D2024-04-20T22:03:56.930Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"e13322fbaa35cc24","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":"starter_2024","bio":""},"version":2927,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"90c59c5f3ef39e0a","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":null,"bio":""}],"members":[{"type":"individual","id":"90c59c5f3ef39e0a","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":null,"role":"editor"},{"type":"team","id":"e13322fbaa35cc24","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Wave Function Collapse Tiles","cells":[{"id":0,"value":"# Wave Function Collapse Tiles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":405,"value":"-----\n### Simple Tiles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":296,"value":"simpleTiles = [\n [\n [0, 0, 0],\n [0, 0, 0],\n [0, 0, 0]\n ],\n\n [\n [0, 0, 0],\n [1, 1, 1],\n [0, 0, 0]\n ],\n\n [\n [0, 0, 0],\n [1, 1, 0],\n [0, 1, 0]\n ],\n\n [\n [0, 0, 0],\n [1, 1, 1],\n [0, 1, 0]\n ],\n\n [\n [0, 1, 0],\n [1, 1, 1],\n [0, 1, 0]\n ]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"viewof simpleSpacing = Inputs.range([0, 10], {\n step: 1,\n value: 1,\n label: \"Tile Spacing\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"{\n let cellSize = simpleSpacing + 3;\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", `0 0 ${simpleTiles.length * cellSize} 3`);\n\n simpleTiles.forEach((tile, t) => {\n tile.forEach((row, y) => {\n row.forEach((cell, x) => {\n svg\n .append(\"rect\")\n .attr(\"x\", t * cellSize + x)\n .attr(\"y\", y)\n .attr(\"width\", 1)\n .attr(\"height\", 1)\n .attr(\"fill\", cell ? \"black\" : \"white\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", \".05\");\n });\n });\n });\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1077,"value":"----\n### Multi-Color Tiles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1080,"value":"multiTiles = [\n [\n [0, 0, 0],\n [0, 0, 0],\n [0, 0, 0]\n ],\n [\n [0, 0, 0],\n [0, 3, 0],\n [0, 0, 0]\n ],\n [\n [0, 0, 0],\n [1, 1, 1],\n [0, 0, 0]\n ],\n [\n [0, 0, 0],\n [2, 2, 2],\n [0, 0, 0]\n ],\n\n [\n [0, 0, 0],\n [1, 1, 0],\n [0, 1, 0]\n ],\n\n [\n [0, 0, 0],\n [2, 2, 0],\n [0, 2, 0]\n ],\n [\n [0, 2, 0],\n [1, 1, 0],\n [0, 1, 0]\n ],\n\n [\n [0, 1, 0],\n [2, 2, 0],\n [0, 2, 0]\n ],\n\n [\n [0, 0, 0],\n [1, 1, 1],\n [0, 2, 0]\n ],\n [\n [0, 0, 0],\n [2, 2, 2],\n [0, 1, 0]\n ],\n [\n [0, 1, 0],\n [2, 2, 2],\n [0, 1, 0]\n ],\n [\n [0, 1, 0],\n [2, 1, 2],\n [0, 1, 0]\n ]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1089,"value":"viewof multiSpacing = Inputs.range([0, 10], {\n step: 1,\n value: 1,\n label: \"Tile Spacing\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1116,"value":"colors = [\"white\", \"black\", \"#FFBC42\", \"#D81159\", \"#218380\", \"dark green\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1084,"value":"{\n let cellSize = multiSpacing + 3;\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", `0 0 ${multiTiles.length * cellSize} 3`);\n\n multiTiles.forEach((tile, t) => {\n tile.forEach((row, y) => {\n row.forEach((cell, x) => {\n svg\n .append(\"rect\")\n .attr(\"x\", t * cellSize + x)\n .attr(\"y\", y)\n .attr(\"width\", 1)\n .attr(\"height\", 1)\n .attr(\"fill\", colors[cell])\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", \".05\");\n });\n });\n });\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1198,"value":"### Complex Tiles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1185,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1203,"value":"viewof complexSpacing = Inputs.range([0, 10], {\n step: 1,\n value: 1,\n label: \"Tile Spacing\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"{\n let cellSize = complexSpacing + 5;\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", `0 0 ${complexTiles.length * cellSize} 5`);\n\n complexTiles.forEach((tile, t) => {\n tile.forEach((row, y) => {\n row.forEach((cell, x) => {\n svg\n .append(\"rect\")\n .attr(\"x\", t * cellSize + x)\n .attr(\"y\", y)\n .attr(\"width\", 1)\n .attr(\"height\", 1)\n .attr(\"fill\", colors[cell])\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", \".05\");\n });\n });\n });\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1302,"value":"### Complicated Tiles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1304,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1308,"value":"viewof complicatedSpacing = Inputs.range([0, 10], {\n step: 1,\n value: 1,\n label: \"Tile Spacing\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1557,"value":"{\n const tileSize = complicatedTiles[0][0].length + allSpacing;\n\n const svg = d3\n .create(\"svg\")\n .attr(\n \"viewBox\",\n `0 0 ${perRow * tileSize} ${\n tileSize * Math.ceil(complicatedTiles.length / perRow)\n }`\n );\n\n complicatedTiles.forEach((tile, t) => {\n tile.forEach((row, y) => {\n row.forEach((cell, x) => {\n svg\n .append(\"rect\")\n .attr(\"x\", (t % perRow) * tileSize + x)\n .attr(\"y\", Math.floor(t / perRow) * tileSize + y)\n .attr(\"width\", 1)\n .attr(\"height\", 1)\n .attr(\"fill\", colors[cell])\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", \".05\");\n });\n });\n });\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"-----\n### All Possible 3x3 Tiles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":251,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"viewof perRow = Inputs.range([1, 20], {\n step: 1,\n value: 12,\n label: \"Tiles per Row\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"viewof allSpacing = Inputs.range([0, 10], {\n step: 1,\n value: 1,\n label: \"Tile Spacing\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"{\n const tileSize = 3 + allSpacing;\n\n const svg = d3\n .create(\"svg\")\n .attr(\n \"viewBox\",\n `0 0 ${perRow * tileSize} ${\n tileSize * Math.ceil(allTiles.length / perRow)\n }`\n );\n\n allTiles.forEach((tile, t) => {\n tile.forEach((row, y) => {\n row.forEach((cell, x) => {\n svg\n .append(\"rect\")\n .attr(\"x\", (t % perRow) * tileSize + x)\n .attr(\"y\", Math.floor(t / perRow) * tileSize + y)\n .attr(\"width\", 1)\n .attr(\"height\", 1)\n .attr(\"fill\", cell ? \"black\" : \"white\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", \".05\");\n });\n });\n });\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1153,"value":"----\n\n### Wave Function Collapse","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":950,"value":"viewof tileChoice = Inputs.select(\n [\n \"Simple Tiles\",\n \"Multi Tiles\",\n \"All Tiles\",\n \"Complex Tiles\",\n \"Complicated Tiles\"\n ],\n {\n label: \"Tile Set\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"baseTiles = tileChoice == \"Simple Tiles\"\n ? simpleTiles\n : tileChoice == \"Multi Tiles\"\n ? multiTiles\n : tileChoice == \"Complex Tiles\"\n ? complexTiles\n : tileChoice == \"Complicated Tiles\"\n ? complicatedTiles\n : allTiles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":822,"value":"function rotateArray(matrix, rotations) {\n const n = rotations % 4;\n if (n === 0) return matrix;\n\n const rotateOnce = (mat) =>\n mat[0].map((val, index) => mat.map((row) => row[index]).toReversed());\n\n let rotatedMatrix = matrix;\n for (let i = 0; i < n; i++) {\n rotatedMatrix = rotateOnce(rotatedMatrix);\n }\n\n return rotatedMatrix;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"grid = {\n restart;\n return d3\n .range(wfcRows)\n .map((y) =>\n d3.range(wfcColumns).map((x) => ({\n x,\n y,\n collapsed: false,\n contents: undefined,\n options: d3.range(tileSet.length),\n neighbors: {\n up: y > 0 ? (y - 1) * wfcColumns + x : undefined,\n down: y < wfcRows - 1 ? (y + 1) * wfcColumns + x : undefined,\n left: x > 0 ? y * wfcColumns + (x - 1) : undefined,\n right: x < wfcColumns - 1 ? y * wfcColumns + (x + 1) : undefined\n }\n }))\n )\n .flat();\n // .map((cell) => {\n // if (Math.random() < 0.01) {\n // cell.collapsed = true;\n // let sel = Math.floor(Math.random() * tileSet.length);\n // cell.options = [sel];\n // cell.contnents = tileSet[sel];\n // }\n // return cell;\n // });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"simulation.filter((d) => !d.contents && d.collapsed)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"viewof wfcColumns = Inputs.range([1, 100], {\n label: \"Column Count\",\n step: 1,\n value: 90\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1158,"value":"viewof wfcRows = Inputs.range([1, 100], {\n label: \"Row Count\",\n step: 1,\n value: 30\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"viewof restart = Inputs.button(\"Restart\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1916,"value":"---\n### Video Game Sprites!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1771,"value":"spriteImages = ({\n \"Pokemon Red/Blue/Green\": await FileAttachment(\"pokemon-town.png\"),\n \"Kirby's Adventure\": await FileAttachment(\"kirby-popstar@1.png\"),\n \"Super Mario Bros.\": await FileAttachment(\"mario1-1.png\"),\n \"Super Mario Bros. 3\": await FileAttachment(\"mario3.png\"),\n \"Pokemon Fire Red/Leaf Green\": await FileAttachment(\"Fire-Red.png\"),\n Megaman: await FileAttachment(\"megaman.png\"),\n \"Hardik and Kazu\": await FileAttachment(\"hardikazu.png\"),\n \"Michael and Woo-Mi\": await FileAttachment(\"michael-woomi.png\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2734,"value":"viewof spriteSource = Inputs.radio(Object.keys(spriteImages), {\n label: \"Sprite Source\",\n value: Object.keys(spriteImages)[0]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2701,"value":"selectedSpriteSheet.image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1919,"value":"viewof spriteColumns = Inputs.range([1, 100], {\n label: \"Column Count\",\n step: 1,\n value: 30\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1922,"value":"viewof spriteRows = Inputs.range([1, 100], {\n label: \"Row Count\",\n step: 1,\n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2762,"value":"$${ spriteSimulation.filter((tile) => tile.collapsed && !tile.contents).length } cells failed to collapse properly, which is ${(\n (spriteSimulation.filter((tile) => tile.collapsed && !tile.contents).length /\n spriteSimulation.length) *\n 100\n).toFixed(4) + \"%\"} of the ${spriteSimulation.length} total cells.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2170,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2452,"value":"selectedSpriteSheet = spriteImages[spriteSource]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2535,"value":"kernelSize = 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2499,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2540,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2568,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1929,"value":"spriteGrid = {\n spriteRestart;\n return d3\n .range(spriteRows)\n .map((y) =>\n d3.range(spriteColumns).map((x) => ({\n x,\n y,\n collapsed: false,\n contents: undefined,\n options: d3.range(spriteTileSet.length),\n neighbors: {\n up: y > 0 ? (y - 1) * spriteColumns + x : undefined,\n down: y < spriteRows - 1 ? (y + 1) * spriteColumns + x : undefined,\n left: x > 0 ? y * spriteColumns + (x - 1) : undefined,\n right: x < spriteColumns - 1 ? y * spriteColumns + (x + 1) : undefined\n }\n }))\n )\n .flat();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1926,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1931,"value":"viewof spriteRestart = Inputs.button(\"Restart\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2710,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1"}} 32:"$31:body"