gridviz 3.0.32 → 3.0.34

package/src/style/JoyPlotStyle.js

@@ -2,6 +2,7 @@
 'use strict'
 
 import { Style } from '../core/Style.js'
+import { cellsToGrid } from '../utils/utils.js'
 
 /**
  * @module style
@@ -47,15 +48,70 @@ export class JoyPlotStyle extends Style {
 
         //index cells by y and x
         /**  @type {object} */
-        const ind = {}
-        for (const cell of cells) {
-            let row = ind[cell.y]
-            if (!row) {
-                row = {}
-                ind[cell.y] = row
+        const ind = cellsToGrid(cells, cell => this.height(cell, resolution, z, viewScale))
+
+
+        //make grid
+        /**  @type {object} */
+        /*const grid = cellsToGrid2(cells, resolution, cell => this.height(cell, resolution, z, viewScale))
+        if (!grid.maxI || !grid.maxJ) return
+
+        //TODO
+        const ys = { min: grid.y0 + resolution * grid.minI, max: grid.y0 + resolution * grid.maxI }
+
+        //draw lines, row by row, stating from the top
+        ctx.lineJoin = 'round'
+        for (let i = grid.minI; i <= grid.maxI; i++) {
+
+            //Get row data
+            const row = grid[i]
+            if (!row) continue
+
+            // y of the row
+            const y = grid.y0 - i * resolution
+
+            //store the previous height
+            let hG_
+
+            for (let j = grid.minJ; j <= grid.maxJ; j++) {
+                //get column value
+                let hG = row[j]
+                if (!hG) hG = 0
+
+                // x of the cell
+                const x = grid.x0 + j * resolution
+
+                if (hG || hG_) {
+                    //draw line only when at least one of both values is non-null
+                    //TODO test bezierCurveTo
+                    ctx.lineTo(x + resolution / 2, y + hG)
+                } else {
+                    //else move the point
+                    ctx.moveTo(x + resolution / 2, y)
+                }
+                //store the previous value
+                hG_ = hG
+            }
+            //last point
+            if (hG_) ctx.lineTo(grid.x0 + resolution * grid.maxJ + resolution / 2, y)
+
+            //draw fill
+            const fc = this.fillColor(y, ys, resolution, z)
+            if (fc && fc != 'none') {
+                ctx.fillStyle = fc
+                ctx.fill()
+            }
+
+            //draw line
+            const lc = this.lineColor(y, ys, resolution, z)
+            const lw = this.lineWidth(y, ys, resolution, z)
+            if (lc && lc != 'none' && lw > 0) {
+                ctx.strokeStyle = lc
+                ctx.lineWidth = lw
+                ctx.stroke()
             }
-            row[cell.x] = this.height(cell, resolution, z, viewScale)
         }
+        */
 
         //compute extent
         const e = geoCanvas.extGeo
@@ -65,7 +121,6 @@ export class JoyPlotStyle extends Style {
         const yMin = Math.floor(e.yMin / resolution) * resolution
         const yMax = Math.floor(e.yMax / resolution) * resolution
 
-        /**  @type {{min:number, max:number}} */
         const ys = { min: yMin, max: yMax }
 
         //draw lines, row by row, stating from the top
@@ -82,13 +137,11 @@ export class JoyPlotStyle extends Style {
             ctx.moveTo(xMin - resolution / 2, y)
 
             //store the previous height
-            /** @type {number|undefined} */
             let hG_
 
             //go through the line cells
             for (let x = xMin; x <= xMax; x += resolution) {
                 //get column value
-                /** @type {number} */
                 let hG = row[x]
                 if (!hG) hG = 0
 

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/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/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) {