3f:null 40:["$","title",null,{"children":"Zelda WFC | Eugene Karavaev | Observable"}] 46: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 }47:[{"id":"3623e7c23dae3db5fa7c578a5a81c87b47b90da337f8aac3e9073c019b4ce65a561b275f7e4116e891866e45658b47997f1f7b6a430af896a3321d2d54b4d5aa","href":"https://static.observableusercontent.com/files/3623e7c23dae3db5fa7c578a5a81c87b47b90da337f8aac3e9073c019b4ce65a561b275f7e4116e891866e45658b47997f1f7b6a430af896a3321d2d54b4d5aa","name":"Koholint Island.png","type":"image/png","lastModified":1623429477310.743,"size":172762},{"id":"5120c07636b8ca5e7991e9caf05df33e917cb7e74236acbfeb899f5f93d64008726e95a376fba26049864717e864538dee0e675ebb0d9613bab1382a414a8fd1","href":"https://static.observableusercontent.com/files/5120c07636b8ca5e7991e9caf05df33e917cb7e74236acbfeb899f5f93d64008726e95a376fba26049864717e864538dee0e675ebb0d9613bab1382a414a8fd1","name":"LegendOfZelda-Link-sAwakeningAdvance-Koholint.png","type":"image/png","lastModified":1623429477310.743,"size":405400},{"id":"4049e84006be6990787bed2df73470f99acdca912f4f87054577b6d3365a3d50c13f75af242772e7d8dba290699b197ebb14d52c4c72bd53696553f6cb4457cc","href":"https://static.observableusercontent.com/files/4049e84006be6990787bed2df73470f99acdca912f4f87054577b6d3365a3d50c13f75af242772e7d8dba290699b197ebb14d52c4c72bd53696553f6cb4457cc","name":"result (15).png","type":"image/png","lastModified":1623429477310.743,"size":76713},{"id":"0585af99035dc10f8cc0ee645c1969e11af40b7814cde80af7c00cf9f7116e66ef20d52217f6dd814c488f230942257316afb9359808da0b48dbde25c8c04b11","href":"https://static.observableusercontent.com/files/0585af99035dc10f8cc0ee645c1969e11af40b7814cde80af7c00cf9f7116e66ef20d52217f6dd814c488f230942257316afb9359808da0b48dbde25c8c04b11","name":"8166008583_9df443fef3_b.jpg","type":"image/jpeg","lastModified":1623429810891.089,"size":133674}] 44:{"id":"40f087323a29c70f","slug":"zelda-wfc","title":"Zelda WFC","thumbnail":"98e8ae852ce05343fbd452a19f799dc0af40b4c2159f97a76231f3554df170a9","access_level":"public","create_time":"$D2021-06-11T16:37:57.310Z","update_time":"$D2021-06-11T16:44:12.065Z","view_time":null,"first_public_time":"$D2021-06-11T16:46:17.092Z","has_unpublished_edits":null,"fork":{"id":"ffbc4a1438711686","slug":"zelda-wfc","title":"Zelda WFC","owner":{"id":"33d0c3f28420ec9c","login":"makio135","name":"Lionel Radisson"}},"stars":0,"starred":false,"owner":{"type":"team","id":"821f8a0fc4a29f51","login":"visionaire","name":"Eugene Karavaev","avatar_url":"https://avatars-next.observableusercontent.com/af070752c0d602c96532df9c0a5e13b6d5a841d0b3acf274ef9def09e2255404","tier":"starter_2024","bio":"","following":false},"version":1688,"publish_version":1688,"role":null,"authored":false,"authors":[{"type":"individual","id":"76094f59f01b6d9c","login":"visionaire","name":"Eugene Karavaev","avatar_url":"https://avatars-next.observableusercontent.com/af070752c0d602c96532df9c0a5e13b6d5a841d0b3acf274ef9def09e2255404","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"76094f59f01b6d9c","login":"visionaire","name":"Eugene Karavaev","avatar_url":"https://avatars-next.observableusercontent.com/af070752c0d602c96532df9c0a5e13b6d5a841d0b3acf274ef9def09e2255404","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1110,"value":"FileAttachment(\"result (15).png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"viewof world = {\n const files = new Map([\n FileAttachment(\"8166008583_9df443fef3_b.jpg\"),\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1142,"value":"img = world.image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1165,"value":"md`and retrieve its dimensions using \\`naturalWidth\\` & \\`naturalHeight\\` properties`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1140,"value":"imgWidth = img.naturalWidth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1145,"value":"imgHeight = img.naturalHeight","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"md`All images are using 16x16px tiles:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"tileSize = 16","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1176,"value":"md`Here are our ${canvas.tiles.length} unique tiles:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"nxOutput = 60","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"nyOutput = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1293,"value":"viewof b = button({ value: \"Generate new\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`___\n## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"wfc = require('https://bundle.run/wavefunctioncollapse@2.0.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"import {slider, select, button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1528,"value":"import {array} from '@makio135/utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"