31: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)}

`; }32:[] 2f:{"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"},{"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"},{"id":209,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"viewof seabed = DOM.range(25000, 31000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"viewof extrude = DOM.range(20, 40)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":42,"value":"md`Looks weird.`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":198,"value":"mutable coord = [0, 0, 0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"import {isoFloorCasting, isoWireframe} from '@ehouais/heightmap-rendering-techniques'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}