2c:null 2d:["$","title",null,{"children":"Expand tiles in distance order | Amit Patel | Observable"}] 32:[] 30:{"id":"5c7e13d8af416778","slug":"expand-tiles-in-distance-order","title":"Expand tiles in distance order","thumbnail":"d893bec42248f5ce3d1975e42323840943772a8e3a00c781fb983533dfa4f1ed","access_level":"public","create_time":"$D2021-08-24T19:39:11.830Z","update_time":"$D2021-08-24T20:00:15.909Z","view_time":null,"first_public_time":"$D2021-08-24T19:55:47.930Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"468ec444dc0eb0ae","login":"redblobgames","name":"Amit Patel","avatar_url":"https://avatars-next.observableusercontent.com/e8ff190af9193a0b08dfdadf3fb2e93a0519966417f0c9a2063aae07a171e6b2","tier":"starter_2024"},"version":69,"publish_version":69,"role":null,"authored":false,"authors":[{"type":"individual","id":"c7764e85dbcadc6d","login":"redblobgames","name":"Amit Patel","avatar_url":"https://avatars-next.observableusercontent.com/e8ff190af9193a0b08dfdadf3fb2e93a0519966417f0c9a2063aae07a171e6b2","tier":null}],"members":[{"type":"individual","id":"c7764e85dbcadc6d","login":"redblobgames","name":"Amit Patel","avatar_url":"https://avatars-next.observableusercontent.com/e8ff190af9193a0b08dfdadf3fb2e93a0519966417f0c9a2063aae07a171e6b2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md`## Demo: all tiles within some distance`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"makeGrid((tile, i) => (tile.distance === 0? \"center\" : tile.distance < distanceLimit ? \"explored\" : \"\"));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`## Demo: tiles in distance order`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"makeGrid((tile, i) => (tile.distance === 0? \"center\" : i < stepLimit ? \"explored\" : \"\"));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`# Demo implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"size = 7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"html`

CSS

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`# Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"