31:T954,canvas = { const ny = imgHeight / tileSize const w = nx * tileSize const h = ny * tileSize const context = DOM.context2d(w, h) // we draw the image to the canvas context.drawImage(await img, -dx * tileSize, 0) // and get the pixels colors const imageData = context.getImageData(0, 0, w * devicePixelRatio, h * devicePixelRatio) // from imageData, we search unique tiles and create a map of the tiles const tiles = [] const mapData = context.createImageData(nx, ny) let mapIndex = 0 for(let y = 0; y < ny; y ++) { for(let x = 0; x < nx; x ++) { const tileData = context.createImageData(tileSize * devicePixelRatio, tileSize * devicePixelRatio) let tileIndex = 0 let tileID = '' let average = [0, 0, 0] for(let yy = 0; yy < tileSize * devicePixelRatio; yy ++) { for(let xx = 0; xx < tileSize * devicePixelRatio; xx ++) { const pixelX = x * tileSize * devicePixelRatio + xx const pixelY = y * tileSize * devicePixelRatio + yy const pixelIndex = (pixelY * (w * devicePixelRatio) + pixelX) * 4 for(let i = 0; i < 4; i++) { tileData.data[tileIndex ++] = imageData.data[pixelIndex + i] if(xx > 0 && xx < tileSize * devicePixelRatio - 1 && yy > 0 && yy < tileSize * devicePixelRatio - 1 && i < 3) { average[i] += imageData.data[pixelIndex + i] if(xx % 2 == 0 && yy % 2 == 0) tileID += imageData.data[pixelIndex + i].toString(36) } } } } average = average.map(d => d / ((tileSize * devicePixelRatio - 2) ** 2) | 0) // if the tile is already referenced we use its index as grey level for our map of tiles let c = tiles.findIndex(tile => tile.tileID === tileID) // else we add it to our unique tiles and use its index as grey level for our map of tiles if(c === - 1) { tiles.push({ tileData, tileID }) c = tiles.length - 1 } mapData.data[mapIndex] = c mapData.data[mapIndex + 1] = c mapData.data[mapIndex + 2] = c mapData.data[mapIndex + 3] = 255 mapIndex += 4 } } const image = new Image() image.style.border = 'solid 1px red' image.src = context.canvas.toDataURL('image/png') image.mapData = mapData image.tiles = tiles return image }32:[{"id":"53927ea680fdb372350854ef8d43e0ba13280ff74c16f209a652b812f4b7c1a6099114bf3eb9757694a7abf08ddca3ab53eb494a158b929794ee4d929778219f","href":"https://static.observableusercontent.com/files/53927ea680fdb372350854ef8d43e0ba13280ff74c16f209a652b812f4b7c1a6099114bf3eb9757694a7abf08ddca3ab53eb494a158b929794ee4d929778219f","name":"téléchargement (5).png","type":"image/png","lastModified":1591135920216.214,"size":111327},{"id":"206a360e09c9be9ca5152121338ed9e3828615fe305e58e870d20c859ed81adb765637927318546b0ff9ef6b8bac723b74b96af11c3458a9556a906d6f809963","href":"https://static.observableusercontent.com/files/206a360e09c9be9ca5152121338ed9e3828615fe305e58e870d20c859ed81adb765637927318546b0ff9ef6b8bac723b74b96af11c3458a9556a906d6f809963","name":"smworld1d@2.png","type":"image/png","lastModified":1591310247398.782,"size":7239},{"id":"01f0df81cda644d76c99b4a7c8bdc8046be82f5706acd3adb8715992b2772a927f4ca7eb862bec395a16133addeeca56f24d890c86373db4ee455401497522fe","href":"https://static.observableusercontent.com/files/01f0df81cda644d76c99b4a7c8bdc8046be82f5706acd3adb8715992b2772a927f4ca7eb862bec395a16133addeeca56f24d890c86373db4ee455401497522fe","name":"smworld1c@2.png","type":"image/png","lastModified":1591310242094.029,"size":10888},{"id":"0dd2ece5a57bd0de95f61a70fcdb83cedb39cbcc86947ca4f9bdd579fe64dda567dee57a4eae871fcd89a1be7d1f4dec8127ed055a33bb1eb852fa97fc9773f1","href":"https://static.observableusercontent.com/files/0dd2ece5a57bd0de95f61a70fcdb83cedb39cbcc86947ca4f9bdd579fe64dda567dee57a4eae871fcd89a1be7d1f4dec8127ed055a33bb1eb852fa97fc9773f1","name":"smworld3a@1.png","type":"image/png","lastModified":1591364632554.307,"size":15105},{"id":"b8bbe8045b6c64134c5c9b2f44de3fd216071868d35cdbd5ae4064017f5382e33acba96327d14d22101bfd4d8d32d79141a41202f3758a1ec0dc33615cd41454","href":"https://static.observableusercontent.com/files/b8bbe8045b6c64134c5c9b2f44de3fd216071868d35cdbd5ae4064017f5382e33acba96327d14d22101bfd4d8d32d79141a41202f3758a1ec0dc33615cd41454","name":"smworld1b@2.png","type":"image/png","lastModified":1591310237574.271,"size":8769},{"id":"44e96ad02f3bc58e62bad81876596f0306c607a0cd2b0781a529940f3782fa856780d94359f86546e2e03b1856b13c27bd319d2506c96e75941b620be6b22a0f","href":"https://static.observableusercontent.com/files/44e96ad02f3bc58e62bad81876596f0306c607a0cd2b0781a529940f3782fa856780d94359f86546e2e03b1856b13c27bd319d2506c96e75941b620be6b22a0f","name":"smworld1a@2.png","type":"image/png","lastModified":1591310203107.846,"size":10087},{"id":"b767729266deb33f5edc4bba4f8f14119c4ab688fd0ea2cb7a30af0110fb16db15cd892c61ee2108fa616c4fda37fc09ca8ce751a624c6e275316f988e3ba6ea","href":"https://static.observableusercontent.com/files/b767729266deb33f5edc4bba4f8f14119c4ab688fd0ea2cb7a30af0110fb16db15cd892c61ee2108fa616c4fda37fc09ca8ce751a624c6e275316f988e3ba6ea","name":"smworld8a.png","type":"image/png","lastModified":1591310070790.914,"size":15599},{"id":"09f5eb92081c84376cfac8c661116a43c712c67b0a7ff6841e96207cfc28e4fa97bc1a12dbf4ec9f6d091bb61dc0c76708dc0c76db96b083cfbf1b26298d1b3e","href":"https://static.observableusercontent.com/files/09f5eb92081c84376cfac8c661116a43c712c67b0a7ff6841e96207cfc28e4fa97bc1a12dbf4ec9f6d091bb61dc0c76708dc0c76db96b083cfbf1b26298d1b3e","name":"smworld7a.png","type":"image/png","lastModified":1591310066049.035,"size":12299},{"id":"3d6318025c451e96ea1fc8c2fdc311ee29c6aa58553c742b11c8ce610ddfb2c27b8e95c50daeb104e24a8c5149fc7a29d0f577f8739a4752e7d63ac515c0a2db","href":"https://static.observableusercontent.com/files/3d6318025c451e96ea1fc8c2fdc311ee29c6aa58553c742b11c8ce610ddfb2c27b8e95c50daeb104e24a8c5149fc7a29d0f577f8739a4752e7d63ac515c0a2db","name":"smworld6a.png","type":"image/png","lastModified":1591310062946.118,"size":9417},{"id":"a60b788d912d7ab40339ecb7bbb6444635e8808f06fbb84ec92ec5e5934f763c93ac696872ca374ef35885fed8ae2a6384ce55a121f2af3279e16bad2efbc8a9","href":"https://static.observableusercontent.com/files/a60b788d912d7ab40339ecb7bbb6444635e8808f06fbb84ec92ec5e5934f763c93ac696872ca374ef35885fed8ae2a6384ce55a121f2af3279e16bad2efbc8a9","name":"smworld5a.png","type":"image/png","lastModified":1591310058828.988,"size":11101},{"id":"071d78b8d9962c93761c55278131340c3290bbc4cc4e6a63432a332e73e60c151c08fd36f4decb9270d48bdba558310de576127ff4d99a08df9fd8011eac404e","href":"https://static.observableusercontent.com/files/071d78b8d9962c93761c55278131340c3290bbc4cc4e6a63432a332e73e60c151c08fd36f4decb9270d48bdba558310de576127ff4d99a08df9fd8011eac404e","name":"smworld4a.png","type":"image/png","lastModified":1591310055414.72,"size":10795},{"id":"ce36c8fe9e2c1659039f8275fc309108a8a0a7ed2400f8a720110186417c8b3e3151e722fbbd7c71480a61cd3fe2d0731805fb695c12c933c531ed36a591fe48","href":"https://static.observableusercontent.com/files/ce36c8fe9e2c1659039f8275fc309108a8a0a7ed2400f8a720110186417c8b3e3151e722fbbd7c71480a61cd3fe2d0731805fb695c12c933c531ed36a591fe48","name":"smworld2d.png","type":"image/png","lastModified":1591310049037.812,"size":9482},{"id":"9d66015844d7e5c3fab9dd8efe81254989a9d8060d73e11fe8b044d46a70bc95dbec3b9412f85f488b9cc02eea03d07c76d61d3ef06cc1ba638604e6b6312e16","href":"https://static.observableusercontent.com/files/9d66015844d7e5c3fab9dd8efe81254989a9d8060d73e11fe8b044d46a70bc95dbec3b9412f85f488b9cc02eea03d07c76d61d3ef06cc1ba638604e6b6312e16","name":"smworld2c.png","type":"image/png","lastModified":1591310045323.4,"size":13258},{"id":"c9c445c063fda526b03e38a91b83c2fa96c2190f7f033797b19155d4e6f06be3e3b4b3b6d674604c29a4380642282749cc5492b27d61fb143bd172f8427695c9","href":"https://static.observableusercontent.com/files/c9c445c063fda526b03e38a91b83c2fa96c2190f7f033797b19155d4e6f06be3e3b4b3b6d674604c29a4380642282749cc5492b27d61fb143bd172f8427695c9","name":"smworld2b.png","type":"image/png","lastModified":1591310041759.101,"size":11809},{"id":"de5d364ab9ea6ee35719ac27d2694c3ea1e87fab93bf4642ec81b298f66208833dda50a6f7658cd0c227bbcebaf5457a5fd608265c9c8eeae6e35a980e6aa01b","href":"https://static.observableusercontent.com/files/de5d364ab9ea6ee35719ac27d2694c3ea1e87fab93bf4642ec81b298f66208833dda50a6f7658cd0c227bbcebaf5457a5fd608265c9c8eeae6e35a980e6aa01b","name":"smworld2a.png","type":"image/png","lastModified":1591310035043.018,"size":27221}] 2f:{"title":"Super Mario WFC","cells":[{"id":1108,"value":"md`# Super Mario WFC\nPlaying with Wave Function Collapse by generating variations of Super Mario Bros worlds.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1110,"value":"FileAttachment(\"téléchargement (5).png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`## About Wave Function Collapse\n\nUseful resources:\n- https://github.com/mxgmn/WaveFunctionCollapse Original repo from [Maxim Gumin](https://twitter.com/ExUtumno)\n- https://github.com/kchapelier/wavefunctioncollapse\n- http://www.procjam.com/tutorials/wfc/\n- https://robertheaton.com/2018/12/17/wavefunction-collapse-algorithm/\n- https://procedural-generation.tumblr.com/post/183250614976/wavefunctioncollapse-and-you-i-recently-put\n- https://observablehq.com/@tomlarkworthy/wave-function-collapse by [@tomlarkworthy](https://observablehq.com/@tomlarkworthy)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"md`___\n## How does it work ?\nFirst we select an image:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1251,"value":"viewof world = {\n const files = new Map([\n FileAttachment(\"smworld1a@2.png\"),\n FileAttachment(\"smworld1b@2.png\"),\n FileAttachment(\"smworld1c@2.png\"),\n FileAttachment(\"smworld1d@2.png\"),\n FileAttachment(\"smworld2a.png\"),\n FileAttachment(\"smworld2b.png\"),\n FileAttachment(\"smworld2c.png\"),\n FileAttachment(\"smworld2d.png\"),\n FileAttachment(\"smworld3a@1.png\"),\n FileAttachment(\"smworld4a.png\"),\n FileAttachment(\"smworld5a.png\"),\n FileAttachment(\"smworld6a.png\"),\n FileAttachment(\"smworld7a.png\"),\n FileAttachment(\"smworld8a.png\"),\n ].map(f => [f.name, f]))\n \n const form = select({\n description: \"Select a world\",\n options: Array.from(files.keys()),\n value: \"smworld1a@2.png\"\n })\n \n return Object.defineProperty(html`

${form}`, 'value', { get() { return files.get(form.value) } })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1142,"value":"img = world.image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1165,"value":"md`and retrieve its dimensions using \\`naturalWidth\\` & \\`naturalHeight\\` properties`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1140,"value":"imgWidth = img.naturalWidth","pinned":true,"hidden":false,"mode":"ojs"},{"id":1145,"value":"imgHeight = img.naturalHeight","pinned":true,"hidden":false,"mode":"ojs"},{"id":881,"value":"md`All images are using 16x16px tiles:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"tileSize = 16","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"md`Now, we get its pixels using a canvas, and look for unique tiles and where they are on the original map:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1261,"value":"viewof nx = slider({\n min: 30, \n max: imgWidth / tileSize, \n step: 1, \n value: 60, \n title: \"nx\", \n description: \"Number of tiles on X axis for input\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"viewof dx = slider({\n min: 0, \n max: imgWidth / tileSize - nx, \n step: 1, \n value: 0, \n title: \"deltaX\", \n description: \"Which part of the original level should be used as model\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1176,"value":"md`Here are our ${canvas.tiles.length} unique tiles:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1001,"value":"{\n const context = DOM.context2d(width, tileSize + (canvas.tiles.length * (tileSize + 10) / width | 0) * (tileSize + 10))\n \n const nx = (width * devicePixelRatio / (tileSize + 10) | 0)\n const step = (tileSize * devicePixelRatio + 10)\n \n canvas.tiles.forEach((tile, i) => {\n const X = (i % nx) * step\n const Y = (i / nx | 0) * step\n context.putImageData(tile.tileData, X, Y)\n })\n \n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1180,"value":"md`And the created map of tiles, with one unique color per unique tile, that WFC will use as input:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1184,"value":"{\n const ny = imgHeight / tileSize\n const context = DOM.context2d(nx * tileSize, ny * tileSize)\n for(let y = 0; y < ny; y ++) {\n for(let x = 0; x < nx; x ++) {\n let index = (y * nx + x) * 4\n const c = 255 / (canvas.tiles.length - 1) * canvas.mapData.data[index]\n context.fillStyle = `rgb(${c}, ${c}, ${c})`\n context.fillRect(x * tileSize, y * tileSize, tileSize, tileSize)\n }\n }\n // context.canvas.style.border = 'solid 1px red'\n // return context.canvas\n \n const image = new Image()\n image.style.border = 'solid 1px red'\n\timage.src = context.canvas.toDataURL('image/png')\n\treturn image\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":856,"value":"md`Now, we create our model from our map using the [Overlapping Model constructor](https://github.com/kchapelier/wavefunctioncollapse#overlappingmodel-constructor):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":860,"value":"nxOutput = 60","pinned":true,"hidden":false,"mode":"ojs"},{"id":864,"value":"nyOutput = 20","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"model = new wfc.OverlappingModel(canvas.mapData.data, nx, imgHeight / tileSize, 2, nxOutput, nyOutput, true, false, 1, 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"{\n b\n\n const context = DOM.context2d(nxOutput * tileSize, nyOutput * tileSize)\n const tiles = array(nyOutput).map(i => array(nxOutput).map(i => -1))\n \n model.initialize()\n model.clear()\n // model.iterate(1, Math.random)\n // return model.graphics()\n\n while(!model.isGenerationComplete()) {\n model.iterate(3, Math.random)\n const result = model.graphics()\n\n for(let y = 0; y < nyOutput; y ++) {\n for(let x = 0; x < nxOutput; x ++) {\n const index = (y * nxOutput + x) * 4\n const tileIndex = result[index]\n if(tiles[y][x] !== tileIndex) {\n tiles[y][x] = tileIndex\n context.putImageData(canvas.tiles[tileIndex].tileData, x * tileSize * devicePixelRatio, y * tileSize * devicePixelRatio)\n }\n }\n }\n yield context.canvas\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1293,"value":"viewof b = button({ value: \"Generate new\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1354,"value":"md`And we can now generate as many new world variations as we want 🧙🏽‍♀️✨`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1038,"value":"md`___\n## Utils`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1041,"value":"rgbToHex = arr => arr.reduce((acc, d) => `${acc}${d.toString(16).padStart(2, '0')}`, '#')","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"function lcgRandom (seed) {\n function normalizeSeed (seed) {\n if (typeof seed === 'number') {\n seed = Math.abs(seed);\n } else if (typeof seed === 'string') {\n const string = seed;\n seed = 0;\n\n for(let i = 0; i < string.length; i++) {\n seed = (seed + (i + 1) * (string.charCodeAt(i) % 96)) % 2147483647;\n }\n }\n\n if (seed === 0) {\n seed = 311;\n }\n\n return seed;\n }\n \n let state = normalizeSeed(seed);\n\n return function () {\n const result = (state * 48271) % 2147483647;\n state = result;\n return result / 2147483647;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"md`___\n## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"wfc = require('https://bundle.run/wavefunctioncollapse@2.0.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":939,"value":"import {slider, select, button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1462,"value":"import {array} from '@makio135/utilities'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}