gridviz 3.0.31 → 3.0.33

package/src/style/ShadingRayStyle.js

@@ -0,0 +1,280 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../core/Style.js'
+import { cellsToGrid, cellsToMatrix } from '../utils/utils.js'
+import { SquareColorCategoryWebGLStyle } from './SquareColorCategoryWebGLStyle.js'
+//import { SquareColorWebGLStyle } from './SquareColorWebGLStyle.js'
+import { extent } from 'd3-array'
+
+
+//TODO:
+// make faster algo by setting shades by sun ray
+// diffusion effect ? based on distance to light (altitude - sun ray height)
+// style with SquareColorWebGLStyle, improved version !
+
+/**
+ * @module style
+ * @author Julien Gaffuri
+ */
+export class ShadingRayStyle extends Style {
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        this.elevation = opts.elevation //(c) => elevation
+
+        this.sunAzimuth = opts.sunAzimuth || (() => 2.356) //(r,z,vs)=>
+        this.sunAltitude = opts.sunAltitude || (() => 0.2) //(r,z,vs)=>
+
+        //this.alpha = opts.alpha || (() => 0.33) //(z,vs)
+        this.color = opts.color || (() => 'black') //(r,z,vs) => {}
+
+        this.undefinedValue = opts.undefinedValue || 0
+
+        //this.version = opts.version || 1
+        // used only for v2
+        //this.shadowProperty = opts.shadowProperty || "shadow"
+    }
+
+    /**
+     *
+     * @param {Array.<import("../core/Dataset.js").Cell>} cells
+     * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas
+     * @param {number} resolution
+     */
+    draw(cells, geoCanvas, resolution) {
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+        if (cells.length == 0) return;
+
+        //
+        const z = geoCanvas.view.z
+
+        //get view scale
+        const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
+
+        //if (this.version == "1") {
+        //index cells by y and x
+        let m = cellsToMatrix(cells, resolution, c => this.elevation(c))
+        const x0 = m.x0, y0 = m.y0
+
+        // compute ray casting shadow
+        m = referenceShadow(
+            m,
+            resolution,
+            this.sunAzimuth(resolution, z, viewScale),
+            this.sunAltitude(resolution, z, viewScale),
+            this.undefinedValue);
+
+        // make cells
+        cells = []
+        for (let i = 0; i < m.length; i++) {
+            const row = m[i]
+            const y = y0 - i * resolution
+            for (let j = 0; j < row.length; j++) {
+                const sh = row[j]
+                if (!sh) continue
+                const c = { x: x0 + j * resolution, y: y }
+                //c[this.shadowProperty] = sh
+                cells.push(c)
+            }
+        }
+        //} else {
+        //clean previsouly computed shadows
+        /*for (let c of cells) delete c[this.shadowProperty]
+
+        //compute shading
+        referenceShadowV2(
+            cells,
+            resolution,
+            (c) => this.elevation(c),
+            this.shadowProperty,
+            this.sunAzimuth(resolution, z, viewScale),
+            this.sunAltitude(resolution, z, viewScale));
+
+        //keep only those with shadow
+        cells = cells.filter(c => c.shadow)*/
+        //}
+
+        //set style alpha and blend mode
+        //TODO: multiply by layer alpha ?
+        //geoCanvas.ctx.globalAlpha = s.alpha ? s.alpha(z) : 1.0
+        //if (s.blendOperation) geoCanvas.ctx.globalCompositeOperation = s.blendOperation(z)
+
+        //set affin transform to draw with geographical coordinates
+        //geoCanvas.setCanvasTransform()
+
+        //draw shadowed cells with webgl style
+        new SquareColorCategoryWebGLStyle({
+            code: () => "a",
+            color: { 'a': this.color(resolution, z, viewScale) },
+            //alpha: () => this.alpha(resolution, z, viewScale),
+        }).draw(cells, geoCanvas, resolution)
+
+        /*new SquareColorWebGLStyle({
+            filter: (c => c.shadow),
+            tFun: (c, r) => c.shadow, //1-Math.min(1, c.shadow / 10000),//c.shadow, //,
+            color: (t => "rgba(0,0,0," + t + ")"),
+            alpha: () => this.alpha(resolution, z, viewScale),
+        }).draw(cells, geoCanvas, resolution)*/
+
+        //draw style filter
+        //if (s.filterColor) s.drawFilter(geoCanvas)
+
+        //update legends
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
+    }
+}
+
+
+
+
+/**
+ * Ground-truth terrain shadow algorithm (ray-based)
+ * Trig-free with undefined handling
+ *
+ * @param {number[][]} elevation - DEM [row][col], may contain undefined
+ * @param {number} resolution
+ * @param {number} sunAzimuth - radians, clockwise from north (+Y)
+ * @param {number} sunAltitude - radians - solar elevation angle above the local horizontal plane
+ * @param {number|undefined} undefinedValue - The value to set for cells with no elevation value
+ * @returns {(number|undefined)[][]} shade. Height above ground where ray light can be reached.
+ */
+function referenceShadow(
+    elevation,
+    resolution = 1000,
+    sunAzimuth = 2.356, // 2PI/3
+    sunAltitude = 0.15,
+    undefinedValue = undefined,
+) {
+    const rows = elevation.length;
+    const cols = elevation[0].length;
+
+    // Sun direction TOWARD the sun
+    const ux = Math.sin(sunAzimuth);
+    const uy = -Math.cos(sunAzimuth);
+    const tanAlt = Math.tan(sunAltitude);
+
+    //const diffAngle = 40 * Math.PI / 180 // 0.5 deg
+    //const tanTop = Math.tan(sunAltitude + diffAngle)
+    //const tanBottom = Math.tan(Math.max(sunAltitude - diffAngle, 0))
+    //const tanBottom = Math.tan(sunAltitude - diffAngle)
+
+    const shade = Array.from({ length: rows }, () => new Array(cols).fill(undefined));
+
+    for (let y0 = 0; y0 < rows; y0++) {
+        for (let x0 = 0; x0 < cols; x0++) {
+
+            const z0raw = elevation[y0][x0] || undefinedValue;
+            if (z0raw === undefined) continue;
+
+            // cast ray
+            let t = resolution;
+            while (true) {
+                const x = x0 - ux * t / resolution;
+                const y = y0 - uy * t / resolution;
+
+                const ix = Math.round(x);
+                const iy = Math.round(y);
+
+                if (ix < 0 || iy < 0 || ix >= cols || iy >= rows) break;
+
+                const zqraw = elevation[iy][ix] || undefinedValue;
+                if (zqraw === undefined) break; // transparent gap
+
+                //const deltaBottom = zqraw - z0raw - tanBottom * t;
+                //if (deltaBottom > 0) {
+                const delta = zqraw - z0raw - tanAlt * t;
+                if (delta > 0) {
+                    shade[y0][x0] = 1 //Math.min(3000 / t, 1)
+                    break;
+                    /*}
+                    //const deltaTop = zqraw - z0raw - tanTop * t;
+                    //if (deltaTop > 0) {
+                    //    shade[y0][x0] = 0
+                    //    break;
+                    //} else {
+                        let r = 1 + delta / deltaBottom
+                        if (r < 0) r = 0
+                        if (r < 0 || r > 1) console.log(r)
+                        shade[y0][x0] = shade[y0][x0] ? Math.max(shade[y0][x0], r) : r
+                    //}*/
+                }
+                t += resolution;
+            }
+        }
+    }
+    return shade;
+}
+
+
+
+
+/**
+ * Ground-truth terrain shadow algorithm (ray-based)
+ * Trig-free with undefined handling
+ *
+ * @param {Array.<Cell>} cells - DEM [row][col], may contain undefined
+ * @param {number} resolution
+ * @param {Function} elevationFun
+ * @param {string} shadowProperty
+ * @param {number} sunAzimuth - radians, clockwise from north (+Y)
+ * @param {number} sunAltitude - radians - solar elevation angle above the local horizontal plane
+ */
+function referenceShadowV2(
+    cells,
+    resolution = 1000,
+    elevationFun,
+    shadowProperty = "shadow",
+    sunAzimuth = 2.356, // 2PI/3
+    sunAltitude = 0.15
+) {
+
+    //get geo extent
+    const [minx, maxx] = extent(cells, c => c.x)
+    const [miny, maxy] = extent(cells, c => c.y)
+
+    //index cells by y and x
+    const ind = cellsToGrid(cells)
+
+    // Sun direction TOWARD the sun
+    const ux = Math.sin(sunAzimuth);
+    const uy = Math.cos(sunAzimuth);
+    const tanAlt = Math.tan(sunAltitude);
+
+    for (let y0 = miny; y0 <= maxy; y0 += resolution) {
+        const row = ind[y0]
+        if (!row) continue
+        for (let x0 = minx; x0 <= maxx; x0 += resolution) {
+            const cell0 = row[x0]
+            if (!cell0) continue
+            const z0raw = elevationFun(cell0);
+            if (z0raw === undefined) continue;
+
+            // ray
+            let t = resolution;
+            while (true) {
+                const y = y0 - Math.round(uy * t / resolution) * resolution;
+                if (!ind[y]) break; // transparent gap
+
+                const x = x0 + Math.round(ux * t / resolution) * resolution;
+                const cellq = ind[y][x];
+                if (!cellq) break; // transparent gap
+
+                const zqraw = elevationFun(cellq);
+                if (zqraw === undefined) break; // transparent gap
+
+                // the height above the ground where light ray can be reached
+                const delta = zqraw - z0raw - tanAlt * t;
+                if (delta > 0) {
+                    cell0[shadowProperty] = delta
+                    break;
+                }
+                t += resolution;
+            }
+        }
+    }
+}
+

package/src/style/SideStyle.js

@@ -124,12 +124,17 @@ export class SideStyle extends Style {
      * @param {boolean} center Set to true so that the side coordinate are those of its center point rather than its left/bottom point (the side x,y coordinates are those of the left point for horizontal sides, and of the bottom point for vertical sides)
      * @returns { Array.<Side> }
      */
-    static buildSides(cells, resolution, withHorizontal = true, withVertical = true, center = true) {
+    static buildSides(cells, resolution, withHorizontal = true, withVertical = true, center = true, eps = 0.01) {
         /** @type { Array.<Side> } */
         const sides = []
 
+        // half resolution
         const r2 = center ? resolution / 2 : 0
 
+        // epsilon
+        eps = resolution * eps
+        const abs = Math.abs
+
         //make horizontal sides
         //sort cells by x and y
         cells.sort((c1, c2) => (c2.x == c1.x ? c1.y - c2.y : c1.x - c2.x))
@@ -137,7 +142,7 @@ export class SideStyle extends Style {
         for (let i = 1; i < cells.length; i++) {
             let c2 = cells[i]
 
-            if (c1.y + resolution == c2.y && c1.x == c2.x)
+            if (abs(c1.y + resolution - c2.y) < eps && abs(c1.x - c2.x) < eps)
                 //cells in same column and touch along horizontal side
                 //make shared side
                 sides.push({
@@ -176,7 +181,7 @@ export class SideStyle extends Style {
         for (let i = 1; i < cells.length; i++) {
             let c2 = cells[i]
 
-            if (c1.x + resolution == c2.x && c1.y == c2.y)
+            if (abs(c1.x + resolution - c2.x) < eps && abs(c1.y - c2.y) < eps)
                 //cells in same row and touch along vertical side
                 //make shared side
                 sides.push({

package/src/style/SideTanakaStyle.js

@@ -10,6 +10,8 @@ import { SideStyle } from './SideStyle.js'
  * @typedef {function(Array.<Side>,number, number):*} SideViewScale */
 
 /**
+ * @see https://manifold.net/doc/mfd9/example__tanaka_contours.htm
+ * 
  * @module style
  * @author Julien Gaffuri
  */
@@ -25,7 +27,7 @@ export class SideTanakaStyle extends Style {
 
         /** A function returning the width of a cell side, in geo unit
          * @type {function(Side, number, number, number, object):number} */
-        this.width = opts.width || ((side, sideValue, resolution, z, sidesScale) => Math.abs(sideValue) * Math.min(2 * z, resolution / 3))
+        this.width = opts.width || ((side, sideValue, resolution, z, sidesScale) => Math.abs(sideValue) * z) //Math.min(2 * z, resolution / 3))
 
         /** A function returning the length of a cell side, in geo unit
          * @type {function(Side, number, number, object):number} */

package/src/style/SquareColorCategoryWebGLStyle.js

@@ -141,7 +141,7 @@ export class SquareColorCategoryWebGLStyle extends Style {
             c = cells[i]
             const cat = this.code(c, resolution, z, viewScale)
             if (cat == undefined) {
-                console.log('Unexpected category: ' + cat)
+                //console.log('Unexpected category: ' + cat)
                 continue
             }
             const i_ = this.catToI[cat]
@@ -236,7 +236,7 @@ export class SquareColorCategoryWebGLStyle extends Style {
         geoCanvas.offscreenCtx.drawImage(canvas, 0, 0)
 
         //update legends
-        this.updateLegends({ style: this, resolution: resolution, z: z })
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
     }
 }
 

package/src/utils/scale.js

@@ -151,6 +151,28 @@ export const viewScaleColorQuantile = (opts) => {
     }
 }
 
+
+/**
+ * Generic function for view scale quantile classifier
+ *
+ * @param {{ valueFunction:function(import("../core/Dataset").Cell):number, classNumber?:number }} opts
+ * @returns {function(Array.<import("../core/Dataset").Cell>):ColorScale}
+ */
+export const viewScaleQuantileClassifer = (opts) => {
+    const valueFunction = opts.valueFunction // the function that return the cell value from a cell
+    const classNumber = opts.classNumber || 12 // the class number
+
+    const scale = scaleQuantile().range(Array.from( { length: classNumber }, (_, i) => i ))
+    return (cells) => {
+        scale.domain(cells.map(valueFunction))
+        scale.breaks = scale.quantiles()
+        return scale
+    }
+}
+
+
+
+
 /**
  * Combine view scale functions
  *

package/src/utils/utils.js

@@ -1,6 +1,8 @@
 //@ts-check
 'use strict'
 
+import { min, max, extent } from 'd3-array'
+
 /**
  * Get the class id from a value and class break values
  *
@@ -25,6 +27,71 @@ export function nice(v, multiples = [8, 6, 5, 4, 2.5, 2]) {
     return v_
 }
 
+/**
+ * A grid cell.
+ * @typedef {{x: number, y: number}} Cell */
+
+/**
+ * Index cells by y and x
+ * @param {Array.<Cell>} cells
+ * @param {Function} [fun]
+ * @returns {Object}
+ */
+export function cellsToGrid(cells, fun) {
+    /** @type {Object} */
+    const ind = {}
+    for (const cell of cells) {
+        let row = ind[cell.y]
+        if (!row) {
+            row = {}
+            ind[cell.y] = row
+        }
+        row[cell.x] = fun ? fun(cell) : cell
+    }
+    return ind
+}
+
+
+
+/**
+ * Cells to grid.
+ * 
+ * @param {Array.<Cell>} cells
+ * @param {number} resolution
+ * @param {Function} [fun]
+ * @returns {Object}
+ * Grid[i][j] is the value for line i and column j.
+ * Numbered from top to bottom, from left to right.
+ * Properties x0 and y0 are the geo coordinates of the lower left corner of the top left cell.
+ * Properties minI, maxI, minJ, maxJ are the extent of the grid.
+ */
+export function cellsToMatrix(cells, resolution, fun) {
+
+    // get cells extent
+    const [minx, maxx] = extent(cells, c => c.x)
+    const [miny, maxy] = extent(cells, c => c.y)
+
+    // get grid dimension
+    const rows = Math.ceil((maxy - miny) / resolution) + 1
+    const cols = Math.ceil((maxx - minx) / resolution) + 1
+
+    // make empty grid
+    const grid = Array.from({ length: rows }, () => new Array(cols).fill(undefined));
+    grid.x0 = minx
+    grid.y0 = maxy
+    grid.resolution = resolution
+
+    for (const c of cells) {
+        const i = Math.floor((maxy - c.y) / resolution)
+        const j = Math.floor((c.x - minx) / resolution)
+        const v = fun ? fun(c) : c
+        grid[i][j] = v
+    }
+    return grid
+}
+
+
+
 /*
 //no longer used
 export function loadImage(src) {

package/src/style/SideTanakaStyle___OLD.js

@@ -1,66 +0,0 @@
-//@ts-check
-'use strict'
-
-
-/**
- * @see https://manifold.net/doc/mfd9/example__tanaka_contours.htm
- *
- * @module style
- * @author Julien Gaffuri
- */
-export class TanakaStyle {
-    /**
-     * @param {function(import('../core/Dataset.js').Cell):number} value Function that returns the value of a cell
-     * @param {Array.<number>} breaks The break values
-     * @param {Array.<string>} colors The colors, one more than the break values
-     * @param {object} opts
-     * @returns {Array.<import("../core/Style.js").Style>}
-     */
-    static get(value, breaks, colors, opts = {}) {
-        //shadow colors
-        opts.colorDark = opts.colorDark || '#111'
-        opts.colorBright = opts.colorBright || '#ddd'
-
-        /** @type { function(number, number):number } */
-        opts.width =
-            opts.width ||
-            ((sideValue, resolution, z) => {
-                const minWG = 1 * z
-                const maxWG = 4 * z
-                const step = (maxWG - minWG) / 3
-                return Math.min(minWG + (sideValue - 1) * step, maxWG)
-            })
-
-        //make classifier
-        const classifier = clFun(breaks)
-        //make colors table
-        const colorsDict = {}
-        for (let i = 0; i < colors.length; i++) colorsDict[i + ''] = colors[i]
-
-        const cellStyle = new SquareColorCategoryWebGLStyle({
-            code: (cell) => classifier(value(cell)),
-            color: colorsDict,
-        })
-
-        const getSideValue = (side) => {
-            const cl1 = side.c1 ? classifier(value(side.c1)) : -1
-            const cl2 = side.c2 ? classifier(value(side.c2)) : -1
-            return cl1 - cl2
-        }
-
-        /** The side style, for the shadow effect */
-        const sideStyle = new SideStyle({
-            //white or black, depending on orientation and value
-            color: (side) => {
-                const v = getSideValue(side)
-                if (v === 0) return
-                if (side.or === 'v') return v < 0 ? opts.colorBright : opts.colorDark
-                return v < 0 ? opts.colorDark : opts.colorBright
-            },
-            //width depends on the value, that is the number of classes of difference
-            width: (side, resolution, z) => opts.width(Math.abs(getSideValue(side)), resolution, z),
-        })
-
-        return [cellStyle, sideStyle]
-    }
-}