31:[] 2f:{"title":"Expand tiles in distance order","cells":[{"id":0,"value":"md`# Expand tiles in distance order\n\nIdea: precalculate distances for ∆x, ∆y and then sort them in distance order. Then you can answer questions like:\n\n1. What are all the tiles within some distance D to some center point? (demo 1)\n1. What are the N tiles closest to some center point? (demo 2)\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"md`## Demo: all tiles within some distance`","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"makeGrid((tile, i) => (tile.distance === 0? \"center\" : tile.distance < distanceLimit ? \"explored\" : \"\"));","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"viewof distanceLimit = slider({\n min: 0, \n max: size * Math.sqrt(2) * 1.1,\n step: 0.1, \n value: 3.5, \n title: \"Distance limit D\", \n description: \"All tiles within some distance\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`## Demo: tiles in distance order`","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"makeGrid((tile, i) => (tile.distance === 0? \"center\" : i < stepLimit ? \"explored\" : \"\"));","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"viewof stepLimit = slider({\n min: 0, \n max: (2 * size + 1) ** 2,\n step: 1, \n value: 10, \n title: \"Step limit N\", \n description: \"Step through tiles in distance order\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"md`# Demo implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"function makeGrid(classFn) {\n let cells = ``;\n tiles.forEach((tile, i) => {\n cells += ``;\n });\n\n return svg``;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"tiles = {\n let cells = [];\n for (let x = -size; x <= +size; x++) {\n for (let y = -size; y <= +size; y++) {\n cells.push({x, y, distance: Math.hypot(x, y)});\n }\n }\n cells.sort(function(a, b) { return a.distance - b.distance; });\n return cells;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"size = 7","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"html`

CSS

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"md`# Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}