31:T7c8,scene = { let scene = [] let scale = 0.075 //const allRings = [] isolines.forEach((lvl, i) => { //lvl.lines.forEach((isoline) => { //const lvl = isolines[levelIndex] lvl.lines.forEach((isoline) => { let entity = simplify(isoline.map((d) => { return { x: d[0], y: d[1] } }), lineSimplification ).map((c) => { let copy = [ xScale(c.x), yScale(c.y), zScale(lvl.threshold), 1 ] return copy }) entity.closed = true entity.fillColor = "#fff" entity.strokeWidth = 0.5 scene.push(entity) }) }) scene.push(label) const east = [[14, 0, terrainExaggeration / 2, 1]] east.text = "E" east.textAnchor = "middle" const west = [[-14, 0, terrainExaggeration / 2, 1]] west.text = "W" west.textAnchor = "middle" const south = [[0, 14, terrainExaggeration / 2, 1]] south.text = "S" south.textAnchor = "middle" const north = [[0, -14, terrainExaggeration / 2, 1]] north.text = "N" north.textAnchor = "middle" scene.push(north) scene.push(south) scene.push(east) scene.push(west) if (outlineEdges) { const topEdge = edges.top.map((height, i) => { return [ xScale(i), yScale(0), zScale(height), 1 ] }) scene.push(topEdge) const bottomEdge = edges.bottom.map((height, i) => { return [ xScale(i), yScale(size), zScale(height), 1 ] }) scene.push(bottomEdge) const leftEdge = edges.left.map((height, i) => { return [ xScale(0), yScale(i), zScale(height), 1 ] }) scene.push(leftEdge) const rightEdge = edges.right.map((height, i) => { return [ xScale(size), yScale(i), zScale(height), 1 ] }) scene.push(rightEdge) } return scene }32:Ta6a,anaglyphRenderer = (processedScene) => { var t0 = performance.now() const leftLayer = [] const rightLayer = [] const behindProjectionPlane = (item) => { return item.map(points => { points.map(d => d[0][2]).find((d => d <= 0)) === undefined && points.map(d => d[1][2]).find((d => d <= 0)) === undefined }) return true } let allLeftPath = '' let allRightPath = '' const svgStuff = processedScene .filter(behindProjectionPlane) .forEach((item) => { if (item.length > 1) { const leftPath = "M " + item.map(p => `${p[0][0]} ${p[0][1]}`).join(' L ') + ((item.closed) ? " Z" : '') const rightPath = "M " + item.map(p => `${p[1][0]} ${p[1][1]}`).join(' L ') + ((item.closed) ? " Z" : '') // allLeftPath += ' ' + leftPath // allRightPath += ' ' + rightPath leftLayer.push(svg``) rightLayer.push(svg``) } else { if (item.text) { let shift = 0 if (item.textAnchor === "middle") { shift = -item.text.length * 9 / 2 } leftLayer.push(svg`${letterPlotter(item.text, { color: colors.left })}`) rightLayer.push(svg`${letterPlotter(item.text, { color: colors.right })}`) } else { leftLayer.push(svg``) rightLayer.push(svg``) } } }) // if (allLeftPath !== '') { // leftLayer.push(svg``) // } // if (allRightPath !== '') { // rightLayer.push(svg``) // } var t1 = performance.now() console.log(`renderer: ${t1 - t0}`) return svg` ${rightLayer} ${leftLayer} ` }33:T4b8,viewof perspectiveParameters = { // near, zRange, eyeGap, scale const controller = view`

Camera Offset: ${["cameraOffset", Inputs.range([10, 1000], { value: 40, step: 10 })]}

Near (i.e. distance in front of the carema where we start projecting, aka. the projection plane): ${["near", Inputs.range([10, 40], { value: 10, step: 1 })]}

zRange (Far - Near) - i.e. how far past the projection plane to include: ${["zRange", Inputs.range([1, 40], { value: 15, step: 1 })]}

Eye Gap: ${["eyeGap", Inputs.range([0, 4], { value: 0.8, step: 0.01 })]}

Scale: ${["scale", Inputs.range([1, 20001], { value: 3800, step: 10 })]}

Horizontal Shift Window: ${["horizontalShift", Inputs.range([-10, 10], { value: 0, step: 0.1 })]}

Vertical Shift Window: ${["verticalShift", Inputs.range([-10, 10], { value: 0, step: 0.1 })]}

Shift in X': ${["xprime", Inputs.range([-500, 500], { value: 0, step: 1 })]}

Shift in Y': ${["yprime", Inputs.range([-500, 500], { value: 0, step: 1 })]}

` return controller }34:T441,viewof worldParameters = { // rX, rY, rZ const controller = view`

Rotation in X: ${["rX", Inputs.range([-Math.PI / 2, Math.PI / 2], { value: -Math.PI * 3 / 16, step: Math.PI / 32 })]}

Rotation in Y: ${["rY", Inputs.range([-Math.PI / 2, Math.PI / 2], { value: 0, step: Math.PI / 32 })]}

Rotation in Z: ${["rZ", Inputs.range([-Math.PI, Math.PI], { value: -Math.PI / 4, step: Math.PI / 128 })]}

Shift in X: ${["mx", Inputs.range([-100, 100], { value: 0, step: 1 })]}

Shift in Y: ${["my", Inputs.range([-100, 100], { value: 0, step: 1 })]}

Shift in Z: ${["mz", Inputs.range([-100, 100], { value: 0, step: 1 })]}

Move Camera in X: ${["cx", Inputs.range([-100, 100], { value: 0, step: 1 })]}

Move Camera in Y: ${["cy", Inputs.range([-100, 100], { value: 2, step: 1 })]}

Move Camera in Z: ${["cz", Inputs.range([-100, 100], { value: 0, step: 1 })]}

` return controller }35:[] 2f:{"title":"Anaglyph Isobands Terrain","cells":[{"id":0,"value":"md`# Anaglyph Isobands Terrain\n\nInspired by recent experiments in [rendering anaglyphs](https://observablehq.com/@tonyhschu/anaglyph-rendering-in-svg), and also this awesome [MARTINI](https://observablehq.com/@mourner/martin-real-time-rtin-terrain-mesh) notebook from [Vladimir Agafonkin](https://agafonkin.com/), I tried my hand at rendering some terrain in anaglyphs.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1433,"value":"viewof location = html``;","pinned":false,"hidden":false,"mode":"ojs"},{"id":2214,"value":"canvas = {\n const t0 = performance.now()\n \n const context = DOM.context2d(width, height);\n \n const drawPath = (path, side = 0) => {\n \n path.forEach((p, i) => {\n if (i === 0) {\n context.moveTo(p[side][0] + width / 2, p[side][1] + height / 2)\n } else {\n context.lineTo(p[side][0] + width / 2, p[side][1] + height / 2)\n }\n })\n \n }\n \n context.strokeStyle = 'rgba(255, 0, 0, 0.6)'\n context.beginPath();\n processedScene.forEach(p => {\n drawPath(p, 0)\n })\n context.stroke()\n \n context.strokeStyle = 'rgba(0, 255, 235, 0.6)'\n context.beginPath();\n processedScene.forEach(p => {\n drawPath(p, 1)\n })\n context.stroke()\n \n const t1 = performance.now()\n \n console.log(`canvas: ${t1 - t0}`)\n \n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1638,"value":"html`${viewof worldParameters}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1663,"value":"//svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1692,"value":"viewof terrainExaggeration = Inputs.range([0.25, 10], {value: 1.75, step: 0.25, label: \"Terrain Exaggeration\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2049,"value":"viewof lineSimplification = Inputs.range([0.1, 3], {value: 0.2, step: 0.1, label: \"Line Simplification\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2035,"value":"viewof numOfLevels = Inputs.range([7, 35], {value: 18, step: 1, label: \"Number of Levels\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1862,"value":"computeSlipperyCoords(10, 37.29948148,-113.09397012).join('/')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1873,"value":"options = Object.assign({\n \"10/188/402\": \"Grand Canyon, USA\",\n \"10/906/404\": \"Mount Fuji, Japan\",\n \"10/561.97/594.3\": \"Fish River Canyon, Nambia\",\n \"11/916.26/548.78\": \"Maelifell, Iceland\",\n \"9/309.13/260.36\": \"Mount Kilimanjaro, Tanzania\",\n \"9/82.83/180.39\": \"Mount Rainier, WA, USA\",\n \"10/164.44/363.49\": \"Mt. Saint Helens, USA\",\n \"11/609.28/1111.53\": \"Cotahuasi Canyon, Peru\",\n \"10/303.92/678.95\": \"Perito Moreno Glacier, Argentina\",\n \"10/767.43/424.78\": \"Yarlang Tsangpo, China\",\n \"10/164.66/376.49\": \"Crater Lake, USA\",\n \"10/190.31/397.5\": \"Tabernacle Dome, Zion National Park, USA\",\n \"10/532/292\": \"Naeroyfjord, Norway\", \n \"10/171/395\": \"Yosemite, USA\",\n \"11/2014/1267\": \"Mount Taranaki, New Zealand\",\n \"12/784.81/1622.03\": \"Barringer Crater, AZ, USA\",\n \"11/376.79/705.69\": \"Glacier National Park, MO, USA\",\n \"10/163/395\": \"Bay Area, USA\",\n \"10/302.46/289.96\": \"Pingualuit Crater, QC, Canada\",\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1820,"value":"locationLabel = {\n let label = \"Hello World\"\n \n label = options [location]\n \n return label\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1840,"value":"locationLabel.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":1817,"value":"label = {\n const theta = parameters.rZ - Math.PI / 2\n const mag = 10 * Math.sqrt(2)\n \n const shift = theta - Math.PI / 2\n const shiftMag = locationLabel.length / 2 * 0.7\n \n const x = Math.cos(theta) * mag// + Math.cos(shift) * shiftMag\n const y = Math.sin(theta) * mag// + Math.sin(shift) * shiftMag\n \n const label = [[x,y,1 + terrainExaggeration,1]]\n label.text = locationLabel\n label.textAnchor = \"middle\"\n \n return label\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1645,"value":"html`${viewof perspectiveParameters}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1073,"value":"md`I am reusing Vladimir's code for sampling elevation data from [Mapbox Terrain-RGB](https://docs.mapbox.com/help/troubleshooting/access-elevation-data/#mapbox-terrain-rgb) ${tileSize}×${tileSize} raster tile`","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"tileCoord = location.split('/').map(Number)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1192,"value":"tileImg = fetchImage(`https://a.tiles.mapbox.com/v4/mapbox.terrain-rgb/${location}.png?access_token=${mapboxToken}`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1209,"value":"tileSize = tileImg.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":1195,"value":"md`Which he decodes into a grid of height values in meters:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"terrain = {\n const ctx = DOM.context2d(tileSize, tileSize, 1);\n ctx.drawImage(tileImg, 0, 0);\n const data = ctx.getImageData(0, 0, tileSize, tileSize).data;\n\n const terrain = new Float32Array(gridSize * gridSize);\n \n // decode terrain values\n for (let y = 0; y < tileSize; y++) {\n for (let x = 0; x < tileSize; x++) {\n const k = (y * tileSize + x) * 4;\n const r = data[k + 0];\n const g = data[k + 1];\n const b = data[k + 2];\n terrain[y * gridSize + x] = (r * 256 * 256 + g * 256.0 + b) / 10.0 - 10000.0;\n }\n }\n // backfill right and bottom borders\n for (let x = 0; x < gridSize - 1; x++) {\n terrain[gridSize * (gridSize - 1) + x] = terrain[gridSize * (gridSize - 2) + x];\n }\n for (let y = 0; y < gridSize; y++) {\n terrain[gridSize * y + gridSize - 1] = terrain[gridSize * y + gridSize - 2];\n }\n return terrain;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1537,"value":"terrainMatrix = {\n const size = Math.sqrt(terrain.length)\n \n const m = d3.range(size).map((i) => {\n const start = i * size\n const end = start + size\n const slice = Array.from(terrain.slice(start, end))\n \n return slice\n })\n \n return m\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1755,"value":"md`From here, we diverge. I compute a bunch of height bands, and then use Marching Squares to compute isobands.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1564,"value":"size = Math.sqrt(terrain.length)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1542,"value":"heightExtent = d3.extent(terrain)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1544,"value":"heightThresholds = {\n const range = heightExtent[1] - heightExtent[0]\n const targetBand = Math.floor(range / numOfLevels)\n const numOfBands = Math.ceil(range / targetBand)\n const bandDelta = Math.round(range / numOfBands / targetBand) * targetBand\n \n const minHeight = Math.max(heightExtent[0], 1)\n \n return d3.range(numOfBands).map((i) => {\n return Math.ceil(minHeight) + i * bandDelta\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1701,"value":"isolines = {\n return heightThresholds.map((lower) => {\n return {\n lines: MarchingSquares.isoBands(terrainMatrix, lower, heightExtent[1] + 1, { noFrame: false, linearRing: true }),\n threshold: lower\n }\n })\n .filter(d => {\n return d.lines.length > 0\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1758,"value":"md`Here's a 2D preview of the isobands I used to make sure this code worked.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1561,"value":"TwoDimensionsChart = {\n const levels = isolines.map((lvl) => {\n const rings = lvl.lines.map((isoline) => {\n const path = d3.line()(isoline)\n \n return svg``\n })\n \n return svg`${rings}`\n })\n \n return svg``\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1567,"value":"xScale = d3.scaleLinear().domain([0, size]).range([-10,10])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1569,"value":"yScale = d3.scaleLinear().domain([0, size]).range([-10,10])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1572,"value":"zScale = d3.scaleLinear().domain(heightExtent).range([0,terrainExaggeration])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1735,"value":"outlineEdges = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":1619,"value":"edges = Object.assign({\n top: terrainMatrix[0],\n bottom: terrainMatrix[terrainMatrix.length - 1],\n left: terrainMatrix.map((r) => r[0]),\n right: terrainMatrix.map((r) => r[terrainMatrix.length - 1]),\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1760,"value":"md`Using some d3 scales, I compute the {x, y, z} coordinates for each isoband line, and put them into the \"scene\"`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2127,"value":"projectedIsobands = {\n const shapes = []\n \n isolines.forEach((lvl, i) => {\n //lvl.lines.forEach((isoline) => {\n //const lvl = isolines[levelIndex]\n lvl.lines.forEach((isoline) => {\n let entity = simplify(isoline.map((d) => { \n return { x: d[0], y: d[1] }\n }),\n lineSimplification\n ).map((c) => {\n let copy = [\n xScale(c.x),\n yScale(c.y),\n zScale(lvl.threshold),\n 1\n ] \n \n return copy\n })\n \n entity.closed = true\n entity.fillColor = \"#fff\"\n entity.strokeWidth = 0.5\n entity.level = i\n entity.elevation = lvl.threshold\n \n shapes.push(entity)\n })\n })\n \n return processScene(shapes, parameters)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1575,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1797,"value":"parameters = Object.assign({ ...worldParameters, ...perspectiveParameters })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1588,"value":"processedScene = {\n var t0 = performance.now()\n const result = processScene(scene, parameters)\n var t1 = performance.now()\n \n console.log(`processor: ${t1 - t0}`)\n \n return result\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1651,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1767,"value":"gridSize = 257","pinned":true,"hidden":false,"mode":"ojs"},{"id":756,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":1852,"value":"computeSlipperyCoords = (zoom, lat, lon) => {\n const n = Math.pow(2, zoom)\n \n const lon_deg = lon\n const lat_rad = lat * Math.PI / 180\n \n const xtile = n * ((lon_deg + 180) / 360)\n const ytile = n * (1 - (Math.log(Math.tan(lat_rad) + (1 / Math.cos(lat_rad))) / Math.PI)) / 2\n \n return [zoom, Math.round(xtile * 100) / 100, Math.round(ytile * 100) / 100]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1856,"value":"computeSlipperyCoords(10, 35.3606, 138.7274)","pinned":true,"hidden":false,"mode":"ojs"},{"id":584,"value":"md`## Other stuff`","pinned":false,"hidden":false,"mode":"ojs"},{"id":934,"value":"metersPerPixel = {\n const [z, x, y] = tileCoord;\n const numTiles = Math.pow(2, z);\n const lat = 2 * Math.atan(Math.exp((1 - 2 * (y + 0.5) / numTiles) * Math.PI)) - Math.PI / 2;\n return 40075016.7 * Math.cos(lat) / numTiles / tileSize;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2198,"value":"{\n const el = svg``\n \n let isMouseDown = false\n \n return Object.assign(el, {\n onmousedown: event => {\n isMouseDown = true\n },\n onmousemove: event => {\n if (isMouseDown === false) return;\n \n event.preventDefault();\n \n const newRZ = -Math.PI + event.layerX / width * 2 * Math.PI\n const newRX = -Math.PI / 2 + event.layerY / height * Math.PI / 2\n \n const newWorldParams = {\n ...worldParameters,\n rZ: newRZ,\n rX: newRX\n }\n \n const params = {\n ...perspectiveParameters,\n ...newWorldParams\n }\n \n el.querySelectorAll('*').forEach(n => n.remove());\n el.append(anaglyphRenderer(processScene(scene, params))) \n },\n onmouseup: event => {\n isMouseDown = false\n }\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1222,"value":"mapboxToken = 'pk.eyJ1IjoibW91cm5lciIsImEiOiJWWnRiWG1VIn0.j6eccFHpE3Q04XPLI7JxbA'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1059,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1786,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1793,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1533,"value":"MarchingSquares = import(\n \"https://unpkg.com/marchingsquares@1.3.3/dist/marchingsquares-esm.js?module\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2145,"value":"viewof left = {\n // rX, rY, rZ\n const controller = view`\n \n \n \n

R: ${[\"r\", Inputs.range([0, 255], { value: 255, step: 1 })]}

G: ${[\"g\", Inputs.range([0, 255], { value: 0, step: 1 })]}

B: ${[\"b\", Inputs.range([0, 255], { value: 0, step: 1 })]}

`\n\n return controller\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2158,"value":"viewof right = {\n // rX, rY, rZ\n const controller = view`\n \n \n \n

R: ${[\"r\", Inputs.range([0, 255], { value: 0, step: 1 })]}

G: ${[\"g\", Inputs.range([0, 255], { value: 255, step: 1 })]}

B: ${[\"b\", Inputs.range([0, 255], { value: 235, step: 1 })]}

`\n\n return controller\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1654,"value":"colors = Object.assign({\n left: `rgb(${left.r},${left.g},${left.b})`,\n right: `rgb(${right.r},${right.g},${right.b})`\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1632,"value":"import { renderer, processScene } with { height } from '@tonyhschu/anaglyph-pipeline-in-gpujs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1656,"value":"import {letterPlotter} from '@tonyhschu/experiment-with-plottable-letters'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1788,"value":"import {view} from '@tomlarkworthy/view'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1611,"value":"simplify = require('simplify-js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"import {fetchImage} from '@mbostock/cross-origin-images'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}