2b:null 2c:["$","title",null,{"children":"Pseudo-contouring | sw1227 | Observable"}] 31:[] 2f:{"id":"d022397c3bba3769","slug":"pseudo-contouring","title":"Pseudo-contouring","thumbnail":"febc3a2b2ea4ae5a99325ea94009f8c370196a211c0d8364d9943780ac519e1b","access_level":"public","create_time":"$D2019-12-08T07:06:31.475Z","update_time":"$D2019-12-08T08:34:05.544Z","view_time":null,"first_public_time":"$D2019-12-08T08:30:24.226Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"06475ae5027cde36","login":"sw1227","name":"sw1227","avatar_url":"https://avatars-next.observableusercontent.com/3e09ff2c49317e618eedc394f3b33dbb5c952acf0d9654683424e681e7857f8c","tier":"starter_2024"},"version":129,"publish_version":129,"role":null,"authored":false,"authors":[{"type":"individual","id":"4a648b0bd17e2c08","login":"sw1227","name":"sw1227","avatar_url":"https://avatars-next.observableusercontent.com/3e09ff2c49317e618eedc394f3b33dbb5c952acf0d9654683424e681e7857f8c","tier":null}],"members":[{"type":"individual","id":"4a648b0bd17e2c08","login":"sw1227","name":"sw1227","avatar_url":"https://avatars-next.observableusercontent.com/3e09ff2c49317e618eedc394f3b33dbb5c952acf0d9654683424e681e7857f8c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"f8d5283493bc9ba3","slug":"geo","title":"Geo","owner":{"id":"06475ae5027cde36","login":"sw1227","name":"sw1227"}},"type":"notebook","body":{"title":"Pseudo-contouring","cells":[{"id":0,"value":"md`# Pseudo-contouring\nThis is a tiny technique to quickly visualize terrain.\n\nAlthough drawing contour helps a lot to understand the shape of mountains or valleys, it takes some steps to generate contours from elevation tiles. Using the following method, we can *virtually* draw contours without calculating contours.\n\n## Method\nSuppose we have elevation tile (2-D array of elevation values) and want to draw *virtual* contour with interval ${tex`h`}.\n\nFirst, map elevation tile by the following function:\n${tex.block`f(x) = x + c \\: (x \\: \\operatorname{mod} \\: h)`}\n\nwhere ${tex`c`} is a constant that corresponds to something like blend-ratio.\n\nThen apply color scale to the modified elevation to show 2D image of terrain. An example is shown below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"viewof coefficient = {\n const form = html`\n`;\n form.i.oninput = () => form.o.value = `Coefficient : ${form.value = form.i.valueAsNumber}`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"viewof interval = {\n const form = html`\n`;\n form.i.oninput = () => form.o.value = `Contour interval : ${form.value = form.i.valueAsNumber} [m]`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"imshow(dem.map(row => row.map(d => d + coefficient * (d % interval))), 2, d3.interpolateViridis)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`## Appendix\n- How to fetch elevation tile: [@sw1227/fetch-elevation-tile](https://observablehq.com/@sw1227/fetch-elevation-tile#fetchTile).\n- How to show 2D array as image: [@sw1227/reusable-2d-array-image-function](https://observablehq.com/@sw1227/reusable-2d-array-image-function#imshow)\n- Fetch PNG tile and visualizing with WebGL: [@sw1227/decoding-png-elevation-tile](https://observablehq.com/@sw1227/decoding-png-elevation-tile)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"// Fetch dem data as 256 x 256 array\ndem = fetchTile({z: 13, x: 7262, y: 3232})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`### Without pseudo-contouring\nYou can see the shape, but it's a bit blurry.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"imshow(dem, 1, d3.interpolateViridis)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"md`### Only applying mod to the eleavtion tile\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"imshow(dem.map(row => row.map(d => d % 50)), 1, d3.interpolateViridis)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {fetchTile} from \"@sw1227/fetch-elevation-tile\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {imshow} from \"@sw1227/reusable-2d-array-image-function\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"