2b:null 2c:["$","title",null,{"children":"Zelda WFC | Lionel Radisson | Observable"}] 31:T965,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, -dy * tileSize) // 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 % 4 == 0 && yy % 4 == 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":"5120c07636b8ca5e7991e9caf05df33e917cb7e74236acbfeb899f5f93d64008726e95a376fba26049864717e864538dee0e675ebb0d9613bab1382a414a8fd1","href":"https://static.observableusercontent.com/files/5120c07636b8ca5e7991e9caf05df33e917cb7e74236acbfeb899f5f93d64008726e95a376fba26049864717e864538dee0e675ebb0d9613bab1382a414a8fd1","name":"LegendOfZelda-Link-sAwakeningAdvance-Koholint.png","type":"image/png","lastModified":1591876292428.879,"size":405400},{"id":"3623e7c23dae3db5fa7c578a5a81c87b47b90da337f8aac3e9073c019b4ce65a561b275f7e4116e891866e45658b47997f1f7b6a430af896a3321d2d54b4d5aa","href":"https://static.observableusercontent.com/files/3623e7c23dae3db5fa7c578a5a81c87b47b90da337f8aac3e9073c019b4ce65a561b275f7e4116e891866e45658b47997f1f7b6a430af896a3321d2d54b4d5aa","name":"Koholint Island.png","type":"image/png","lastModified":1591876292428.879,"size":172762},{"id":"327e2ff43f76bfdd2ff606d71c9424138a6e80ccd631b308855e758e5c1886bcd5e5dd2d07343b001c8803b70fcce508e986d937bf0bd3baa7a2956b40d642b8","href":"https://static.observableusercontent.com/files/327e2ff43f76bfdd2ff606d71c9424138a6e80ccd631b308855e758e5c1886bcd5e5dd2d07343b001c8803b70fcce508e986d937bf0bd3baa7a2956b40d642b8","name":"ZeldaOverworld.png","type":"image/png","lastModified":1591876292428.879,"size":151532},{"id":"4049e84006be6990787bed2df73470f99acdca912f4f87054577b6d3365a3d50c13f75af242772e7d8dba290699b197ebb14d52c4c72bd53696553f6cb4457cc","href":"https://static.observableusercontent.com/files/4049e84006be6990787bed2df73470f99acdca912f4f87054577b6d3365a3d50c13f75af242772e7d8dba290699b197ebb14d52c4c72bd53696553f6cb4457cc","name":"result (15).png","type":"image/png","lastModified":1591876345097.786,"size":76713}] 2f:{"id":"ffbc4a1438711686","slug":"zelda-wfc","title":"Zelda WFC","thumbnail":"11ab9423153bf0d9d43513fea13b10fa8663efa3baacff13214f228fc51a3f11","access_level":"public","create_time":"$D2020-06-11T11:51:32.428Z","update_time":"$D2023-02-09T09:04:58.242Z","view_time":null,"first_public_time":"$D2020-12-05T23:34:10.625Z","fork":{"id":"f5f414470ce552c7","slug":"super-mario-wfc","title":"Super Mario WFC","owner":{"id":"33d0c3f28420ec9c","login":"makio135","name":"Lionel Radisson"}},"stars":36,"starred":false,"owner":{"type":"team","id":"33d0c3f28420ec9c","login":"makio135","name":"Lionel Radisson","avatar_url":"https://avatars-next.observableusercontent.com/1ebff675951134ccb48ffd1faaeabdecafe0daf8d168685c768f506435e400f0","tier":"starter_2024"},"version":1687,"publish_version":1687,"role":null,"authored":false,"authors":[{"type":"individual","id":"cae924adff874d09","login":"makio135","name":"Lionel Radisson","avatar_url":"https://avatars-next.observableusercontent.com/1ebff675951134ccb48ffd1faaeabdecafe0daf8d168685c768f506435e400f0","tier":null}],"members":[{"type":"individual","id":"cae924adff874d09","login":"makio135","name":"Lionel Radisson","avatar_url":"https://avatars-next.observableusercontent.com/1ebff675951134ccb48ffd1faaeabdecafe0daf8d168685c768f506435e400f0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":15,"collection":null,"type":"notebook","body":{"title":"Zelda WFC","cells":[{"id":1108,"value":"md`# Zelda WFC\nPlaying with [Wave Function Collapse](https://github.com/mxgmn/WaveFunctionCollapse) by generating variations of Zelda maps. \n(You may also like [@makio135/super-mario-wfc](https://observablehq.com/@makio135/super-mario-wfc) 😁)\n\nUsing [Kevin Chapelier](https://twitter.com/kchplr)'s JS port: https://github.com/kchapelier/wavefunctioncollapse`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1110,"value":"FileAttachment(\"result (15).png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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/mxgmn/WaveFunctionCollapse/issues/3#issuecomment-251439257\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)\n\nLinks:\n- https://www.nesmaps.com/maps/Zelda/Zelda.html\n- https://www.vgmaps.com/NewsArchives/April2005/LegendOfZelda-Link'sAwakeningAdvance-Koholint.png\n- https://www.linkshideaway.com/images/z4/z4overworld.png\n- https://revned77.github.io/maps/The%20Legend%20of%20Zelda%20-%20Link%27s%20Awakening/Koholint%20Island.png`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":664,"value":"md`___\n## How does it work ?\nFirst we select an image:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1251,"value":"viewof world = {\n const files = new Map([\n FileAttachment(\"ZeldaOverworld.png\"),\n FileAttachment(\"Koholint Island.png\"),\n FileAttachment(\"LegendOfZelda-Link-sAwakeningAdvance-Koholint.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: \"Koholint Island.png\"\n })\n \n return Object.defineProperty(html`

${form}`, 'value', { get() { return files.get(form.value) } })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1142,"value":"img = world.image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1165,"value":"md`and retrieve its dimensions using \\`naturalWidth\\` & \\`naturalHeight\\` properties`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1140,"value":"imgWidth = img.naturalWidth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1145,"value":"imgHeight = img.naturalHeight","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":881,"value":"md`All images are using 16x16px tiles:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":292,"value":"tileSize = 16","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1261,"value":"viewof nx = slider({\n min: 20, \n max: imgWidth / tileSize, \n step: 1, \n value: 40, \n title: \"nx\", \n description: \"Number of tiles on X axis for input\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":943,"value":"viewof dx = slider({\n min: 0, \n max: imgWidth / tileSize - nx, \n step: 1, \n value: 8, \n title: \"deltaX\", \n description: \"Which part of the original level should be used as model\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1435,"value":"viewof ny = slider({\n min: 20, \n max: imgHeight / tileSize, \n step: 1, \n value: 60, \n title: \"ny\", \n description: \"Number of tiles on Y axis for input\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1440,"value":"viewof dy = slider({\n min: 0, \n max: imgHeight / tileSize - ny,\n step: 1,\n value: 28, \n title: \"deltaY\", \n description: \"Which part of the original level should be used as model\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1176,"value":"md`Here are our ${canvas.tiles.length} unique tiles:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":860,"value":"nxOutput = 60","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":864,"value":"nyOutput = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"model = new wfc.OverlappingModel(canvas.mapData.data, nx, ny, 2, nxOutput, nyOutput, true, false, 1, 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1293,"value":"viewof b = button({ value: \"Generate new\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1354,"value":"md`And we can now generate as many new world variations as we want 🧙🏽‍♀️✨`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"md`___\n## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"wfc = require('https://bundle.run/wavefunctioncollapse@2.0.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":939,"value":"import {slider, select, button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1528,"value":"import {array} from '@makio135/utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"