2b:null 2c:["$","title",null,{"children":"Surface generation | Kjerand Pedersen | Observable"}] 31:T784,{ const div = html`

`; const size = { x: mapWidth, y: mapHeight, }; const container = d3.select(div); const canvas = DOM.canvas(size.x, size.y); container.select('#interpolated').node().appendChild(canvas); const svg = container.select('#contours').append('svg') .style('width', size.x) .style('height', size.y); yield div; const data = [...mapValues]; // interpolated const ctx = canvas.getContext('2d'); const id = ctx.createImageData(size.x, size.y); // expects data to be from bottom to top const d = id.data; for (let iy = 0; iy < size.y; iy += 1) { for (let ix = 0; ix < size.x; ix += 1) { const v = data[size.y - iy - 1][ix]; let clr = d3.color('white'); const offset = (iy * size.x + ix) * 4; if (v !== null) { const rgb = colorScale(v); clr = d3.color(rgb); } d[offset] = clr.r; d[offset + 1] = clr.g; d[offset + 2] = clr.b; d[offset + 3] = v === null ? 0 : 255; } } ctx.putImageData(id, 0, 0); // contours const m = mapValues[0].length; const n = mapValues.length; const { min, max } = selected_surface.meta; // data is in a reversed 2d array, so need to transform const values = data.reverse().reduce((acc, r) => [...acc, ...r],[]); const contours = d3.contours() .size([m, n]) .thresholds(d3.range(min, max, (max-min)/n_contours)) (values); svg.selectAll('path') .data(contours) .enter().append('path') .attr('d', d3.geoPath(d3.geoIdentity().scale(mapWidth / mapValues[0].length))) .attr('fill', function(d) { return colorScale(d.value); }) .attr('stroke', 'rgba(255,255,255,0.8)'); }32:T51c,map = { const center = proj.inverse([ bounds.left + ((bounds.right - bounds.left) / 2) + (width/2) * 186.7, bounds.top - ((bounds.top - bounds.bottom) / 2), ]).reverse(); if (global.map) { global.map.off(); global.map.remove(); global.map = null; }; const map = L.map(leaflet, { center, zoom: 8, trackResize: true, zoomSnap: 1, zoomDelta: 1, maxZoom: 20, maxBounds: L.latLngBounds([-90, -180], [90, 180]), }); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); L.control.scale().addTo(map); let record; map.on('mousemove', ev => { if(trajectory.isRecording()) { record(ev.latlng); trajectory.refresh(map); ev.originalEvent.preventDefault(); } }); map.on('mousedown', ev => { if (ev.originalEvent.altKey) { map.dragging.disable(); record = trajectory.start(); record(ev.latlng); ev.originalEvent.preventDefault(); } }); map.on('mouseup', ev => { if (trajectory.isRecording()) { record(ev.latlng); const coords = trajectory.stop(); trajectory.refresh(map); generateIntersection(coords); map.dragging.enable(); ev.originalEvent.preventDefault(); } }); global.map = map; yield map; }33:T9f7,surfaceLayer = { const surfaceLayer = L.GridLayer.extend({ initialize: function initialize(options) { options = L.Util.setOptions(this, options); if (options.detectRetina && L.Browser.retina && options.maxZoom > 0) { options.tileSize = Math.floor(options.tileSize / 2); if (!options.zoomReverse) { options.zoomOffset++; options.maxZoom--; } else { options.zoomOffset--; options.minZoom++; } options.minZoom = Math.max(0, options.minZoom); } this.size = this.getTileSize(); this.drawContours = options.contours; }, createTile: function createTile(coords, done) { const tile = L.DomUtil.create('canvas', 'leaflet-tile'); if (!selected_surface) { return tile; } const { size, drawContours } = this; tile.width = size.x; tile.height = size.y; const scaled = coords.scaleBy(size); const nwPoint = L.point(scaled.x, scaled.y); const sePoint = L.point(nwPoint.x + size.x, nwPoint.y + size.y); const nw = this.map.unproject(nwPoint, coords.z); const se = this.map.unproject(sePoint, coords.z); const utmNW = proj.forward([nw.lng, nw.lat]); const utmSE = proj.forward([se.lng, se.lat]); const dx = (utmSE[0] - utmNW[0]) / size.x; const dy = (utmNW[1] - utmSE[1]) / size.y; const ext = [utmNW[0], utmSE[0], utmSE[1], utmNW[1]]; const dxy = [dx, dy]; const ctx = tile.getContext('2d'); ctx.clearRect(0, 0, size.x, size.y) const data = box(ext, dxy); if (!data || data.length === 0 || data.every(d => d.every(v => v === null))) return tile; if (drawContours) { createContoursTile(ctx, data, size); } else { rasterizeTile(ctx, data, size); } L.Util.requestAnimFrame(done.bind(coords, null, null)); return tile; }, addTo: function addTo(map) { this.map = map; map.addLayer(this); return this; }, }); if (global.surfl) { map.removeLayer(global.surfl); global.surfl = null; } const surfl = new surfaceLayer({ tileSize: 256, opacity: 1, contours: generateContourTiles, minZoom: 7, maxZoom: 20, updateWhenZooming: true, updateWhenIdle: true, detectRetina: true, /*bounds: L.latLngBounds( [58.997251629672974,2.4737577885389332], [58.84760094925321,2.627693116664887], ),*/ }); global.surfl = surfl; surfl.addTo(map); return surfl; }34:T1ef4,generateTerrain = { function smallestPowerOfTwoAfter(n) { var ret = 1; while (ret < n) { ret <<= 1; } return ret; } /** * Generate a square matrix * @param {number} size - Width and length of the square. * @return {Array.>} The vertices matrix of the square */ function generateMatrix(size) { var matrix = []; for (var i = 0; i < size; i++) { var row = []; for (var j = 0; j < size; ++j) { row.push(0); } matrix.push(row); }; return matrix; } /** * Diamond step of iteration. * @param {Array.>} matrix - Matrix to iterate on. * @param {number} depth - Depth of current iteration(starts from 1). * @param {number} smoothness - Smoothness of terrain. */ function diamond(matrix, depth, smoothness) { var len = matrix.length; var terrainSize = len - 1; var numSegs = 1 << (depth - 1); var span = terrainSize / numSegs; var half = span / 2; // enumerate sub-squares // for each sub-square, the height of the center is caculated // by averaging the height of its four vertices plus a random offset. for (var x = 0; x < terrainSize; x += span) { for (var y = 0; y < terrainSize; y += span) { // (x, y) // \ // a---b---c // | | | // d---e---f // | | | // g---h---i // // \___ ___/ // V // span // var va = [x, y]; var vc = [x + span, y]; var ve = [x + half, y + half]; var vg = [x, y + span]; var vi = [x + span, y + span]; // heights of vertices var heights = [va, vc, vg, vi].map(function(v) { return matrix[v[1]][v[0]]; }); // average height var avg = average(heights); // random offset var offset = getH(smoothness, depth); // set center height matrix[ve[1]][ve[0]] = avg + offset; } } } /** * Get a random offset. * @param {number} smoothness - Higher the value, smoother the terrain. * recommended value is 1. * @param {number} depth - Depth of current iteration(starts from 1). */ function getH(smoothness, depth) { var sign = Math.random() > 0.5 ? 1 : -1; var reduce = 1; for (var i = 0; i < depth; ++i) { reduce *= Math.pow(2, -smoothness); } return sign * Math.random() * reduce; } function average(numbers) { var sum = 0; numbers.forEach(function(v) { sum += v; }); return sum / numbers.length; } function squareHelper(matrix, depth, smoothness, a, b, c, d, t) { var heights = [a, b, c, d].map(function(v) { return matrix[v[1]][v[0]]; }); var avg = average(heights); var offset = getH(smoothness, depth); matrix[t[1]][t[0]] = avg + offset; } /** * Square step of iteration. * @param {Array.>} matrix - Matrix to iterate on. * @param {number} depth - Depth of current iteration(starts from 1). * @param {number} smoothness - Smoothness of terrain. */ function square(matrix, depth, smoothness) { var len = matrix.length var terrainSize = len - 1; var numSegs = 1 << (depth - 1); var span = terrainSize / numSegs; var half = span / 2; // enumerate sub-dimaonds for (var x = 0; x < terrainSize; x += span) { for (var y = 0; y < terrainSize; y += span) { // for each sub-square, the height of the center is caculated // by averaging the height of its four vertices plus a random offset. // for example, // h = avg(g, c, i, m) + random; // f = avg(a, g, k, i) + random; // j = f; // // (x, y) // \ // a---b---c---d---e // | \ | / | \ | / | // f---g---h---i---j // | / | \ | / | \ | // k---l---m---n---o // | \ | / | \ | / | // p---q---r---s---t // | / | \ | / | \ | // u---v---w---x---y // // \___ ___/ // V // span // var va = [x, y]; var vb = [x + half, y]; var vc = [x + span, y]; var vf = [x, y + half]; var vg = [x + half, y + half]; var vh = [x + span, y + half]; var vk = [x, y + span]; var vl = [x + half, y + span]; var vm = [x + span, y + span]; // right of h var vhr = [x + half * 3, y + half]; if (vhr[0] > terrainSize) vhr[0] = half; // left of f var vfl = [x - half, y + half] if (vfl[0] < 0) vfl[0] = terrainSize - half; // under l var vlu = [x + half, y + half * 3]; if (vlu[1] > terrainSize) vlu[1] = half; // above b var vba = [x + half, y - half] if (vba[1] < 0) vba[1] = terrainSize - half; squareHelper(matrix, depth, smoothness, va, vg, vk, vfl, vf); squareHelper(matrix, depth, smoothness, va, vba, vc, vg, vb); squareHelper(matrix, depth, smoothness, vc, vhr, vm, vg, vh); squareHelper(matrix, depth, smoothness, vk, vg, vm, vlu, vl); } } // set the elevations of the rightmost and bottom vertices to // equal the leftmost and topmost ones'. for (var y = 0; y < terrainSize; y += span) { matrix[y][terrainSize] = matrix[y][0]; } for (var x = 0; x < terrainSize; x += span) { matrix[terrainSize][x] = matrix[0][x]; } } /** * Iterate on the matrix using Diamond-Square algorithm. * @param {Array.>} matrix - Matrix to be iterated on. * @param {number} smoothness - Smoothness of terrain. */ function iterate(matrix, smoothness) { // the count of iterations applied so far var counter = 0; // the total number of iterations to apply is log_2^(size of matrix) var numIteration = Math.log(matrix.length - 1) / Math.LN2; while (counter++ < numIteration) { diamond(matrix, counter, smoothness); square(matrix, counter, smoothness); } } /** * Generate a square fractal terrain. * @param {number} size - Size of terrain, MUST be a power of 2. * @param {number} smoothness - Higher this value, smoother the terrain. * recommended value is 1. * @return {Array.>} A two-dimensional array holding the elevations * of the vertices of the terrain. Each elevation will be between -1 and 1. */ function generateSquareTerrain(size, smoothness) { // throw error if size is not a power of two. if (size & (size - 1)) { throw new Error('Expected terrain size to be a power of 2, received ' + size + ' instead.'); } // generate a square matrix var mat = generateMatrix(size + 1); // iterate on the matrix using the square-diamond algorithm iterate(mat, smoothness); return mat; } /** * Generate fractal terrain. * @param {number} width - Width of rectangle. * @param {number} height - Height of rectangle. * @param {number} smoothness - Higher this value, smoother the terrain. * recommended value is 1. * @return {Array.>} A two-dimensional array holding the elevations * of the vertices of the terrain. */ return (width, height, smoothness) => { var smoothness = typeof smoothness === 'undefined' ? 1 : smoothness; var size = smallestPowerOfTwoAfter(Math.max(width, height)); var squareTerrain = generateSquareTerrain(size, smoothness); // console.log(squareTerrain); var terrain = []; // terrain is a matrix of size (width + 1) x (height + 1) for (var i = 0; i <= height; ++i) { terrain.push(squareTerrain[i].slice(0, width + 1)); } return terrain; } }35:Td78,generateIntersection = coords => { d3.select(intersection).selectAll('*').remove(); if (!coords) { return; }; // generate data let p0 = coords[0]; let l = 0; const projected = coords.map((p1) => { const dx = p1[0] - p0[0]; const dy = p1[1] - p0[1]; l += Math.sqrt((dx ** 2) + (dy ** 2)); p0 = p1; return l; }); const values = surfaces.map((d, i) => coords.map(c => interpolateValue(c[0], c[1], i))); const data = surfacelayers.map((sl, i) => ({ id: i, label: 'Surface ' + (i+1), color: sl.color, data: projected.map((p, j) => ({ xl: p, yt: values[i][j], yb: i + 1 >= values.length ? null : values[i + 1][j], })), })); // console.log(projected, values); const padding = 50; const height = width / 1.5; const innerWidth = width - 2 * padding; const innerHeight = height - padding * 2; const yDomain = [-100, surfacelayers[surfacelayers.length-1].max + 100]; const unitSize = Math.abs(yDomain[1] - yDomain[0]) / innerHeight; const endAt = innerWidth * unitSize; const xDomain = [0, endAt]; const x = d3.scaleLinear().range([0, innerWidth]).domain(xDomain); const y = d3.scaleLinear().range([0, innerHeight]).domain(yDomain); const xAxis = d3.axisBottom(x); const yAxis = d3.axisLeft(y); const svg = d3.select(intersection).append('svg') .style("width", width) .style("height", height); svg.append('defs') .append('clipPath') .attr('id', 'clip-rect') .append('rect') .attr('width', innerWidth) .attr('height', innerHeight); const gx = svg.append('g').attr('transform', `translate(${padding},${innerHeight + padding})`).call(xAxis); const gy = svg.append('g').attr('transform', `translate(${padding},${padding})`).call(yAxis); // axis labels gx.append('text') .attr('transform', `translate(${innerWidth / 2}, ${40})`) .attr('fill', 'black') .style('text-anchor', 'middle') .style('font-size', '12px') .style('font-weight', '600') .text('Displacement'); gy.append('text') .attr('transform', `translate(${0}, ${-20})`) .attr('fill', 'black') .style('text-anchor', 'middle') .style('font-size', '12px') .style('font-weight', '600') .text('TVD'); const gSurfaces = svg.append('g') .attr('clip-path', 'url(#clip-rect)') .attr('transform', `translate(${padding},${padding})`); const render = () => { const ymax = y(y.domain()[1]); const areafunction = d3.area().x(d => x(d.xl)).y0(d => d.yb && y(d.yb) || ymax).y1(d => y(d.yt)); const areas = gSurfaces.selectAll('g.surface-area').data(data, d => d.id); const newAreas = areas.enter() .append('g') .attr('class', 'surface-area'); areas.select('path').attr('d', d => areafunction(d.data)); const path = newAreas.append('path') .attr('d', d => areafunction(d.data)) .attr('stroke-width', 1) .attr('stroke', d => d.color) .attr('fill', d => d.color); areas.exit().remove(); }; render(); svg.call(d3.zoom().on("zoom", function () { const { transform } = d3.event; x.domain(xDomain); y.domain(yDomain); const newx = transform.rescaleX(x); const newy = transform.rescaleY(y); x.domain(newx.domain()); y.domain(newy.domain()); xAxis.scale(x); yAxis.scale(y); gx.call(xAxis); gy.call(yAxis); render(); })); }36:[] 2f:{"id":"7b2416d85fbd4e4d","slug":"surface-generation","title":"Surface generation","thumbnail":"d0fa3495f114e1a586b7e18bb5e300e513d556c5d2a3d70225f69b8633eeb6c9","access_level":"public","create_time":"$D2018-09-03T13:25:55.094Z","update_time":"$D2020-03-02T20:05:02.621Z","view_time":null,"first_public_time":"$D2018-09-07T13:58:10.393Z","fork":false,"stars":15,"starred":false,"owner":{"type":"team","id":"455184b0afc7f1fd","login":"kjerandp","name":"Kjerand Pedersen","avatar_url":"https://avatars-next.observableusercontent.com/3c52e0775a9b4937e6002e09ca22d564189c0d589cae2166e091b5fe3b7f2458","tier":"starter_2024"},"version":3357,"publish_version":3357,"role":null,"authored":false,"authors":[{"type":"individual","id":"00080969d76f924b","login":"kjerandp","name":"Kjerand Pedersen","avatar_url":"https://avatars-next.observableusercontent.com/3c52e0775a9b4937e6002e09ca22d564189c0d589cae2166e091b5fe3b7f2458","tier":null}],"members":[{"type":"individual","id":"00080969d76f924b","login":"kjerandp","name":"Kjerand Pedersen","avatar_url":"https://avatars-next.observableusercontent.com/3c52e0775a9b4937e6002e09ca22d564189c0d589cae2166e091b5fe3b7f2458","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":6,"collection":{"id":"2f5ab7a2f2aa607c","slug":"subsurface","title":"Subsurface","owner":{"id":"455184b0afc7f1fd","login":"kjerandp","name":"Kjerand Pedersen"}},"type":"notebook","body":{"title":"Surface generation","cells":[{"id":0,"value":"md`# Surface generation\nPrototyping and investigating methods to generate reasonably realistic mock data for sub surface applications.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":439,"value":"md`## Visualizations\nA number of surfaces are randomly generated and visualized in various ways.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1763,"value":"viewof surfaceIndex = select(surfaces.map((d, i) => ({ label: 'Surface ' + (i + 1), value: i })))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3252,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1555,"value":"viewof n_contours = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":691,"value":"depthscale = {\n const svg = DOM.element(\"svg:svg\", {width: width, height: 50 });\n \n const margin = 20;\n const w = (width - 2 * margin) / 2;\n const [min, max] = valueDomain;\n const stepsize = (w / (max - min));\n \n const g = d3.select(svg).append('g').attr('transform', `translate(${margin},20)`);\n const lscale = d3.scaleLinear().range([0, w]).domain(valueDomain).nice();\n const axis = d3.axisBottom(lscale).tickSize(4);\n axis.tickValues(lscale.ticks(6).concat(lscale.domain()));\n g.call(axis);\n \n d3.range(0, w).forEach(d => d3.select(svg).append('rect')\n .attr('x', margin + d)\n .attr('y', 0)\n .attr('width', 1)\n .attr('height', margin)\n .attr('fill', colorScale(min + d / stepsize))\n .attr('stroke', 'none'), \n );\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1224,"value":"viewof l_clr_shift = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1226,"value":"viewof r_clr_shift = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1205,"value":"viewof palette = select(Object.keys(palettes).map(k => ({ label: k, value: k})))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2061,"value":"md`### Projecting the surface on to a map\nUsing a custom layer that extends the grid layer class in Leaflet. The top left corner of the surface is mapped to UTM coordinates and projected to the map, using proj4 to convert between UTM and WGS84.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2642,"value":"mutable leaflet = DOM.element('div', { style: `width:${width}px;height:${width / 1.5}px` })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1865,"value":"viewof generateContourTiles = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3207,"value":"md`### Intersection view\nShows the surface depths along a trajectory on the map. The trajectory curve is _curtain projected_ in order to view it in terms of its displacement (in meters).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2909,"value":"intersection = html`

\nHold down the ALT-key + mouse button, and draw a trajectory on the map (on the surface), to render a intersection view of all surfaces\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3219,"value":"md`### 3d view (full surfaces)\nNot very useful, but gives you a quick idea of how the surfaces are stacked.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":471,"value":"perspective = {\n if (!render3d) return;\n renderer.setSize(width, width / ratio);\n renderer.setPixelRatio(devicePixelRatio);\n\n renderer.domElement.setAttribute(\"style\", `border: 1px solid black; width: ${width}px`);\n const controls = new THREE.OrbitControls(camera, renderer.domElement)\n controls.target = lookAt;\n controls.update();\n try {\n while (renderer) {\n renderer.render(scene, camera);\n yield renderer.domElement;\n }\n } finally {\n controls.dispose();\n renderer.dispose();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1567,"value":"md`_In this 3d view, red guide line points east and blue points south_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1294,"value":"viewof showOnlySelected = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":533,"value":"viewof transparent = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":530,"value":"viewof wireframes = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1717,"value":"yFactor = 4 // exaggerate surface heights in 3d view","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2128,"value":"md`## Parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":350,"value":"md`### Surfaces`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1255,"value":"nSurfaces = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1256,"value":"avgDepth = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":303,"value":"surfacewidth = 2**13 //power of 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":305,"value":"surfaceheight = 2**14 //power of 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":809,"value":"gridDistance = 256 // must be power of 2!!!","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1259,"value":"depths = {\n let prev = 0;\n return d3.range(0, nSurfaces + 1).map(d => {\n const v = depthFunc(d) + prev;\n prev = v;\n return v;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1270,"value":"depthFunc = i => i === 0 ? 0 : (\n Math.random() * avgDepth * (i % 3 === 0 ? 2 : 1)) * Math.max(0.5, (nSurfaces - i) / nSurfaces\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":541,"value":"smoothness = 0.1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":840,"value":"topLeftCoords = [470000, 6540000] // easting, northing (mimic UTM coords)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":528,"value":"md`### Visualizations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1188,"value":"mapscale = 0.025","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":950,"value":"mapWidth = ~~(surfacewidth * mapscale)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":954,"value":"mapHeight = ~~(surfaceheight * mapscale)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1091,"value":"map_extent = [\n topLeftCoords[0], \n topLeftCoords[0] + surfacewidth, \n topLeftCoords[1] - surfaceheight, \n topLeftCoords[1],\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":959,"value":"map_dxy = [\n (map_extent[1] - map_extent[0]) / mapWidth,\n (map_extent[3] - map_extent[2]) / mapHeight,\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":576,"value":"color_function = d3.scaleOrdinal([\"#e6f1cf\",\"#ffff00\",\"#ffc0cb\",\"#ffaaa2\",\"#ffa500\",\"#f0aa23\",\"#efba00\",\"#ffcb00\",\"#00ea4c\",\"#00a636\",\"#00bc48\",\"#00d25a\",\"#00ea4c\",\"#00daff\",\"#00b6ff\",\"#00daff\",\"#e9d0a8\",\"#ffff00\",\"#f0aa23\",\"#ff6f40\",\"#ff9579\",\"#ffaaa2\",\"#ff7f50\",\"#e081c9\",\"#d0dbb9\",\"#c6d1ae\",\"#bbc6a3\",\"#b0bb99\",\"#a5b08e\",\"#9ba683\",\"#909b78\",\"#85906d\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":677,"value":"colorScale = v => d3.scaleSequential()\n .domain([0, 100])\n .interpolator(palettes[palette])(Math.max(0, Math.min(100, valueScale(v))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":785,"value":"valueDomain = {\n const { min, max } = selected_surface.meta;\n const diff = max - min;\n const values = [\n min + diff * l_clr_shift,\n max + diff * r_clr_shift,\n ] || [0, 100];\n return values;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":668,"value":"valueScale = d3.scaleLinear().domain(valueDomain).range([0, 100])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1168,"value":"palettes = ({ \n rainbow: d3.interpolateHslLong('#f55', '#5d198e'),\n plasma: d3.interpolatePlasma,\n warm: d3.interpolateWarm,\n cool: d3.interpolateCool,\n red: d3.interpolateReds,\n green: d3.interpolateGreens,\n blue: d3.interpolateBlues,\n gray: d3.interpolateGreys,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1599,"value":"md`### Maps` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2640,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2666,"value":"global = ({ })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1648,"value":"projFrom = '+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1650,"value":"projTo = '+proj=utm +zone=31 +ellps=intl +towgs84=-87,-98,-121,0,0,0,0 +units=m +no_defs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1601,"value":"proj = proj4(projFrom, projTo)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1610,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1851,"value":"rasterizeTile = (ctx, values, size) => {\n const id = ctx.createImageData(size.x, size.y);\n\n if (!values) return null;\n const d = id.data;\n for (let iy = 0; iy < size.y; iy += 1) {\n for (let ix = 0; ix < size.x; ix += 1) {\n const v = values[size.y - iy - 1][ix];\n let clr = d3.color('white');\n const offset = (iy * size.x + ix) * 4;\n if (v !== null) {\n const rgb = colorScale(v);\n clr = d3.color(rgb);\n // console.log(v, rgb);\n }\n d[offset] = clr.r;\n d[offset + 1] = clr.g;\n d[offset + 2] = clr.b;\n d[offset + 3] = v === null ? 0 : 255;\n }\n }\n ctx.putImageData(id, 0, 0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1854,"value":"createContoursTile = (ctx, data, size) => {\n const { min, max } = selected_surface.meta;\n\n ctx.lineJoin = \"round\";\n const values = data.reverse().reduce((acc, r) => [...acc, ...r],[]);\n \n const contours = d3.contours()\n .size([size.x, size.y])\n .thresholds(d3.range(min, max, (max-min)/n_contours))\n (values);\n \n const path = d3.geoPath(d3.geoIdentity().scale(1)).context(ctx);\n \n contours.map(d => {\n ctx.beginPath();\n ctx.fillStyle = colorScale(d.value);\n path(d);\n ctx.closePath();\n ctx.fill();\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2816,"value":"trajectory = {\n let polyLine;\n let record = false;\n let points;\n \n const start = () => {\n points = [];\n record = true;\n return c => record && points.push(c);\n };\n \n const stop = () => {\n record = false;\n console.log(points);\n return points.map(d => proj.forward([d.lng, d.lat])); \n };\n \n const refresh = (map) => {\n if (polyLine) {\n polyLine.remove();\n }\n if (points) {\n polyLine = L.polyline(points.map(d => [d.lat, d.lng]), { color: 'red' }).addTo(map);\n }\n };\n return ({\n start, \n stop,\n refresh,\n isRecording: () => record,\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":348,"value":"md`### 3d/perspective`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1440,"value":"render3d = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":136,"value":"opacity = 0.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":187,"value":"lightintensity = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":467,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0xffffff);\n \n // set up lights\n lights.forEach(light => scene.add(light));\n \n meshes && meshes.forEach(m => scene.add(m));\n \n // show simple xyz axes\n const axesHelper = new THREE.AxesHelper(2000);\n scene.add(axesHelper);\n \n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":458,"value":"camera = {\n const aspect = ratio;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.copy(initialPosition);\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":475,"value":"ratio = 16/9","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":201,"value":"lights = {\n const lights = [\n new THREE.DirectionalLight( 0xffffff, 0.25 * lightintensity),\n new THREE.DirectionalLight( 0xffffff, 0.5 * lightintensity),\n new THREE.SpotLight(0xffffff, 0.8 * lightintensity, 20000, Math.PI/2, 1, 0.5),\n ];\n\n lights[1].position.set(0,-1,0);\n lights[2].position.set(0,10000,0);\n\n return lights;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":449,"value":"fov = 45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":461,"value":"far = 1000000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":463,"value":"near = 0.1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":250,"value":"initialPosition = new THREE.Vector3(-20000, 10000, surfaceheight * 1.2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":450,"value":"lookAt = new THREE.Vector3(0, -(depths[depths.length - 1] - depths[0]) * yFactor / 2, 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":465,"value":"renderer = new THREE.WebGLRenderer({ antialias: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":895,"value":"md`## Grid Interpolation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":907,"value":"interpolateValue = (easting, northing, index) => {\n const indexes = findGridIndexes(easting, northing);\n \n if (\n easting > bounds.right ||\n easting < bounds.left ||\n northing > bounds.top ||\n northing < bounds.bottom\n ) return null;\n \n const m = surfaces[index].model;\n\n if (!indexes || !m) return null;\n \n const [j, i, offX, offY] = indexes;\n \n if (offX === 0 && offY === 0) return m[i][j];\n \n const a = m[i][j];\n const b = (j+1 < m[i].length) ? m[i][j+1]: a;\n const c = (i+1 < m.length) ? m[i+1][j]: a;\n let d;\n if (i+1 < m.length && j+1 < m[i].length) {\n d = m[i+1][j+1]; \n } else if (i+1 < m.length) {\n d = c; \n } else if (j+1 < m.length) {\n d = b; \n } else {\n d = a;\n }\n\n const y1 = lerp(a, c, offY);\n const y2 = lerp(b, d, offY);\n \n return lerp(y1, y2, offX);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":908,"value":"lerp = (a, b, t) => ((1-t) * a) + (t * b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":852,"value":"findGridIndexes = (easting, northing) => {\n if (easting < bounds.left || easting > bounds.right || northing < bounds.bottom || northing > bounds.top) {\n return null; \n }\n const x = (easting - bounds.left) / gridDistance;\n const y = (bounds.top - northing) / gridDistance;\n const ei = ~~x;\n const ni = ~~y; \n const offsetX = x - ei;\n const offsetY = y - ni;\n \n return [ei, ni, offsetX, offsetY];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":834,"value":"getCoordsFromGrid = (ei, ni) => {\n if (ei < 0 || ei > selected_surface.model[0].length - 1) return null;\n if (ni < 0 || ni > selected_surface.model.length - 1) return null;\n \n return [\n topLeftCoords[0] + ei * gridDistance,\n topLeftCoords[1] - ni * gridDistance,\n ];\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1575,"value":"box = (extent, dxy) => {\n if (!selected_surface) return;\n \n const x = Math.ceil((extent[1] - extent[0]) / dxy[0]);\n const y = Math.ceil((extent[3] - extent[2]) / dxy[1]);\n \n const modX = (extent[1] - extent[0]) / x;\n const modY = (extent[3] - extent[2]) / y;\n \n const values = new Array(y);\n for (let iy = 0; iy < y; iy += 1) {\n values[iy] = new Array(x);\n for (let ix = 0; ix < x; ix += 1) {\n values[iy][ix] = interpolateValue(extent[0] + (ix * modX), extent[2] + (iy * modY), surfaceIndex);\n }\n }\n \n return values;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":362,"value":"md`## Generated data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":695,"value":"selected_surface = surfaces[surfaceIndex]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":318,"value":"surfaces = surfacelayers.map(l => ({\n meta: l,\n model: generateSurface(l.min, l.max, l.smoothness * smoothness),\n}))\n \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":565,"value":"surfacelayers = {\n const arr = [];\n for (let i = 1; i < depths.length; i++) {\n const min = depths[i-1];\n const max = depths[i];\n const color = color_function(i);\n arr.push({\n min,\n max,\n color,\n smoothnes: (1 - Math.random() / 2) * smoothness,\n });\n }\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":469,"value":"meshes = render3d && surfaces.filter(d => !showOnlySelected || d === selected_surface).map(s => getSurfaceMesh(s.model, s.meta.color, opacity))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":867,"value":"bounds = ({\n top: topLeftCoords[1],\n left: topLeftCoords[0],\n bottom: topLeftCoords[1] - (selected_surface.model.length - 1) * gridDistance,\n right: topLeftCoords[0] + (selected_surface.model[0].length - 1) * gridDistance,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1527,"value":"mapValuesTest = d3.range(0,409).map(y => d3.range(0, 409).map(x => y <= x ? 1000 : 0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":805,"value":"mapValues = box(map_extent, map_dxy)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":398,"value":"md`## Surface generation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"generateSurface = (min, max, smoothness) => { \n const w = Math.ceil(surfacewidth / gridDistance);\n const h = Math.ceil(surfaceheight / gridDistance);\n \n const terrain = generateTerrain(w, h, smoothness || 1);\n\n const extent = terrain.reduce(([extentMin, extentMax], d) => {\n const [min, max] = d3.extent(d, r => r);\n return [\n Math.min(extentMin, min),\n Math.max(extentMax, max),\n ];\n }, [Infinity, -Infinity]);\n \n const addition = -1 * extent[0];\n const factor = (max - min) / (extent[1] - extent[0]);\n \n for (let r=0; r < terrain.length; r++) {\n const row = terrain[r];\n for (let c=0; c < row.length; c++) {\n row[c] = min + ((row[c] + addition) * factor);\n } \n }\n \n return terrain;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":507,"value":"getSurfaceMesh = (model, color = 0x909090, opacity = 1) => {\n var mesh = new THREE.Mesh(\n new THREE.PlaneGeometry(surfacewidth, surfaceheight, model[0].length - 1, model.length - 1),\n new THREE.MeshLambertMaterial({ \n color,\n transparent,\n opacity,\n side: THREE.DoubleSide,\n depthWrite: !transparent,\n wireframe: wireframes,\n }),\n );\n \n mesh.rotation.x = Math.PI / 2;\n \n var vertices = mesh.geometry.vertices;\n for (var i = 0; i < model.length; ++i) {\n for (var j = 0; j < model[i].length; ++j) {\n vertices[i * model[0].length + j].z = model[i][j] * yFactor;\n }\n }\n \n return mesh;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2899,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":409,"value":"md`## Libs/imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":202,"value":"THREE = {\n const THREE = await require(\"three@0.89.0/build/three.min.js\");\n if (!THREE.OrbitControls) { // If not previously loaded.\n const module = window.module = {exports: undefined};\n THREE.OrbitControls = await require(\"three-orbit-controls@82.1.0/index.js\").catch(() => module.exports(THREE));\n }\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1583,"value":"L = require('leaflet')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1589,"value":"L_css = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1597,"value":"proj4 = require('proj4')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1778,"value":"import { select, button } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1143,"value":"md`## TODO\n\n* Generate and map to strat col\n* Generate fault lines => impact generated surfaces\n* Generate reservoir border (based on shape?)\n* LOD for 3d meshes\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"