29:null 2a:["$","title",null,{"children":"Isometric real-world terrarium tiles | Tom MacWright | Observable"}] 2f:T5e3,{ let zoomIn = html``; let zoomOut = html``; let left = html``; let right = html``; let up = html``; let down = html``; zoomIn && zoomIn.addEventListener('click', () => { mutable coord = [coord[0] + 1, coord[1] * 2, coord[2] * 2]; }); zoomOut && zoomOut.addEventListener('click', () => { mutable coord = [coord[0] - 1, Math.floor(coord[1] / 2), Math.floor(coord[2] / 2)]; }); left && left.addEventListener('click', () => { mutable coord = [coord[0], coord[1] - 1, coord[2]]; }); right && right.addEventListener('click', () => { mutable coord = [coord[0], coord[1] + 1, coord[2]]; }); up && up.addEventListener('click', () => { mutable coord = [coord[0], coord[1], coord[2] - 1]; }); down && down.addEventListener('click', () => { mutable coord = [coord[0], coord[1], coord[2] + 1]; }); return html`

${[zoomIn, zoomOut, left, right, up, down].filter(Boolean)}

`; }30:[] 2d:{"id":"4515232b9d05eae2","slug":"isometric-real-world-terrarium-tiles","title":"Isometric real-world terrarium tiles","thumbnail":"3de8ccdfb11329c7f3c4371bf0a165b625454d1d05a1a1569b8982fdef189d1f","access_level":"public","create_time":"$D2018-04-13T22:09:48.534Z","update_time":"$D2018-04-15T20:26:29.384Z","view_time":null,"first_public_time":"$D2018-04-13T23:53:23.989Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":"starter_2024"},"version":394,"publish_version":394,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null}],"members":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"88b74b381cda909f","slug":"maps","title":"Maps","owner":{"id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright"}},"type":"notebook","body":{"title":"Isometric real-world terrarium tiles","cells":[{"id":0,"value":"md`# Isometric real-world terrarium tiles\n\nIsometric heightmaps of real-world tiles, using [Philippe’s](https://beta.observablehq.com/@ehouais) incredibly cool technique and terrarium tiles from [terrain tiles on Amazon](https://aws.amazon.com/public-datasets/terrain/), made by Mapzen (RIP).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"viewof heightmap = {\n const nb = 512; // Adapt heightmap precision to canvas size\n\n // Transform height into color before rendering\n const colormap = [];\n for (let i = 0; i < nb; i++) {\n colormap[i] = [];\n for (let j = 0; j < nb; j++) {\n colormap[i][j] = Math.floor(Math.min(92, H[i][j]*100));\n\t }\n }\n const context = DOM.context2d(width, width/2);\n isoFloorCasting(context, H, colormap, width/8);\n context.canvas.value = H;\n \n const ctx = DOM.context2d(256, 256);\n ctx.drawImage(overview, 0, 0);\n ctx.strokeStyle = 'red';\n ctx.lineWidth = 2;\n ctx.fillStyle = 'transparent';\n const size = 512 / Math.pow(2, coord[0] + 1);\n ctx.rect(coord[1] * size, coord[2] * size, size, size);\n ctx.stroke();\n \n context.drawImage(ctx.canvas, 64, 64, width / 5, width / 5);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"viewof seabed = DOM.range(25000, 31000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"viewof extrude = DOM.range(20, 40)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"tile = {\n let img = new Image();\n img.crossOrigin = '*';\n img.src = `https://elevation-tiles-prod.s3.amazonaws.com/terrarium/${coord.join('/')}.png`;\n return new Promise(resolve => {\n img.addEventListener('load', () => {\n resolve(img);\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"overview = {\n let img = new Image();\n img.crossOrigin = '*';\n img.src = `https://a.tile.openstreetmap.org/0/0/0.png`;\n return new Promise(resolve => {\n img.addEventListener('load', () => {\n resolve(img);\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`Looks weird.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"canvas = {\n const ctx = DOM.context2d(256, 256)\n ctx.drawImage(tile, 0, 0)\n return ctx.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"clone = {\n const clone = canvas.getContext('2d').getImageData(0, 0, 512, 512);\n for (let i = 0; i < clone.data.length; i += 4) {\n let sum = (clone.data[i] * 256 + clone.data[i + 1] + clone.data[i + 2] / 256);\n sum = (sum - seabed) / extrude;\n clone.data[i] = clone.data[i + 1] = clone.data[i + 2] = sum;\n }\n return clone;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"H = {\n let H = [];\n for (let x = 0; x < 512; x++) {\n let r = [];\n for (let y = 0; y < 512; y++) {\n r.push(clone.data[(x * 4) + (y * 512 * 4)] / 300);\n }\n H.push(r.reverse());\n }\n return H;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"{\n\n const ctx = DOM.context2d(256, 256)\n ctx.putImageData(clone, 0, 0)\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"mutable coord = [0, 0, 0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"import {isoFloorCasting, isoWireframe} from '@ehouais/heightmap-rendering-techniques'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"