gridviz 2.0.27 → 2.0.29

package/src/utils/Utils.js

@@ -0,0 +1,35 @@
+//@ts-check
+'use strict'
+
+/**
+ * Get the class id from a value and class break values
+ *
+ * @param {number} v the value
+ * @param {Array.<number>} breaks the breaks
+ * @returns The class id, from 0 to breaks.length
+ */
+export function getClass(v, breaks) {
+    if (!breaks) return
+    if (breaks.length == 0) return 0
+    if (v <= breaks[0]) return 0
+    for (let i = 1; i < breaks.length; i++) if (breaks[i - 1] < v && v <= breaks[i]) return i
+    return breaks.length
+}
+
+export let monitor = false
+
+let previousDate
+export function monitorDuration(message) {
+    const nowDate = Date.now()
+
+    //first call
+    if (!previousDate) {
+        previousDate = nowDate
+        console.log(previousDate, message)
+        return
+    }
+
+    const d = nowDate - previousDate
+    previousDate = nowDate
+    console.log(d, message)
+}

package/src/utils/WebGLRectangleColoring.js

@@ -0,0 +1,106 @@
+//@ts-check
+'use strict'
+
+import { initShaderProgram, createShader } from './webGLUtils'
+
+/**
+ * Everything to easily draw colored rectangles with webGL.
+ */
+export class WebGLRectangleColoring {
+    //TODO: add color alpha/opacity
+
+    /**
+     *
+     * @param {WebGLRenderingContext} gl
+     */
+    constructor(gl) {
+        this.gl = gl
+
+        this.program = initShaderProgram(
+            gl,
+            createShader(
+                gl,
+                gl.VERTEX_SHADER,
+                `
+            attribute vec2 pos;
+            uniform mat3 mat;
+            attribute vec3 color;
+            varying vec3 vColor;
+            void main() {
+              gl_Position = vec4(mat * vec3(pos, 1.0), 1.0);
+              vColor = color;
+            }
+          `
+            ),
+            createShader(
+                gl,
+                gl.FRAGMENT_SHADER,
+                `
+            precision mediump float;
+            varying vec3 vColor;
+            void main(void) {
+               gl_FragColor = vec4(vColor, 1.0);
+            }`
+            )
+        )
+        gl.useProgram(this.program)
+
+        //buffer data
+        this.verticesBuffer = []
+        this.colorsBuffer = []
+    }
+
+    /** Add data to vertices/color buffers for color rectangle drawing */
+    addRectangleData(x1, x2, y1, y2, cR = 0, cG = 0, cB = 1, cA = 0) {
+        //TODO cA
+        //add vertices
+        this.verticesBuffer.push(x1, y1, x2, y1, x1, y2, x2, y2)
+
+        //colors, 3 parts (RGB), one per vertice
+        this.colorsBuffer.push(cR, cG, cB, cR, cG, cB, cR, cG, cB, cR, cG, cB)
+    }
+
+    /**  */
+    draw(transfoMat) {
+        const gl = this.gl
+
+        //vertice data
+        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.verticesBuffer), gl.STATIC_DRAW)
+        const position = gl.getAttribLocation(this.program, 'pos')
+        gl.vertexAttribPointer(
+            position,
+            2, //numComponents
+            gl.FLOAT, //type
+            false, //normalise
+            0, //stride
+            0 //offset
+        )
+        gl.enableVertexAttribArray(position)
+
+        //color data
+        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.colorsBuffer), gl.STATIC_DRAW)
+        var color = gl.getAttribLocation(this.program, 'color')
+        gl.vertexAttribPointer(color, 3, gl.FLOAT, false, 0, 0)
+        gl.enableVertexAttribArray(color)
+
+        //transformation
+        gl.uniformMatrix3fv(gl.getUniformLocation(this.program, 'mat'), false, new Float32Array(transfoMat))
+
+        // Enable the depth test
+        //gl.enable(gl.DEPTH_TEST);
+        // Clear the color buffer bit
+        gl.clear(gl.COLOR_BUFFER_BIT)
+        // Set the view port
+        //gl.viewport(0, 0, cg.w, cg.h);
+
+        for (let i = 0; i < this.verticesBuffer.length / 8; i++) {
+            gl.drawArrays(
+                gl.TRIANGLE_STRIP, // mode,see https://miro.medium.com/max/700/0*HQHB5lCGqlOUiysy.jpg
+                i * 4, // vertex list start
+                4 // vertex count
+            )
+        }
+    }
+}

package/src/utils/WebGLSquareColoring.js

@@ -0,0 +1,118 @@
+//@ts-check
+'use strict'
+
+import { initShaderProgram, createShader } from './webGLUtils'
+import { color } from 'd3-color'
+
+/**
+ * Everything to easily draw colored squares with webGL.
+ * All the same size, but different fill color.
+ */
+export class WebGLSquareColoring {
+    /**
+     *
+     * @param {WebGLRenderingContext} gl
+     */
+    constructor(gl, sizePix) {
+        this.gl = gl
+        this.sizePix = sizePix || 10.0
+
+        this.program = initShaderProgram(
+            gl,
+            createShader(
+                gl,
+                gl.VERTEX_SHADER,
+                `
+            attribute vec2 pos;
+            uniform float sizePix;
+            uniform mat3 mat;
+            attribute vec4 color;
+            varying vec4 vColor;
+            void main() {
+              gl_Position = vec4(mat * vec3(pos, 1.0), 1.0);
+              gl_PointSize = sizePix;
+              vColor = color;
+            }
+          `
+            ),
+            createShader(
+                gl,
+                gl.FRAGMENT_SHADER,
+                `
+            precision mediump float;
+            varying vec4 vColor;
+            void main(void) {
+                vec4 vColor_ = vColor / 255.0;
+                vColor_[3] = 255.0 * vColor_[3];
+                gl_FragColor = vColor_;
+            }`
+            )
+        )
+        gl.useProgram(this.program)
+
+        //buffer data
+        this.verticesBuffer = []
+        this.colorsBuffer = []
+    }
+
+    /** Add data to vertices/size/color buffers for color squares drawing */
+    addPointData(xC, yC, col) {
+        //convert color
+        const cc = color(col)
+        //const cc = {r:45,g:87,b:98,opacity:0.9}
+        if (!cc) return
+
+        //vertices
+        this.verticesBuffer.push(xC, yC)
+        //color
+        this.colorsBuffer.push(cc.r, cc.g, cc.b, cc.opacity)
+    }
+
+    addPointData2(xC, yC, r, g, b, opacity) {
+        //vertices
+        this.verticesBuffer.push(xC, yC)
+        //color
+        this.colorsBuffer.push(r, g, b, opacity)
+    }
+
+    /**  */
+    draw(transfoMat) {
+        const gl = this.gl
+
+        //vertice data
+        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.verticesBuffer), gl.STATIC_DRAW)
+        const position = gl.getAttribLocation(this.program, 'pos')
+        gl.vertexAttribPointer(
+            position,
+            2, //numComponents
+            gl.FLOAT, //type
+            false, //normalise
+            0, //stride
+            0 //offset
+        )
+        gl.enableVertexAttribArray(position)
+
+        //color data
+        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.colorsBuffer), gl.STATIC_DRAW)
+        var color = gl.getAttribLocation(this.program, 'color')
+        gl.vertexAttribPointer(color, 4, gl.FLOAT, false, 0, 0)
+        gl.enableVertexAttribArray(color)
+
+        //sizePix
+        gl.uniform1f(gl.getUniformLocation(this.program, 'sizePix'), 1.0 * this.sizePix)
+
+        //transformation
+        gl.uniformMatrix3fv(gl.getUniformLocation(this.program, 'mat'), false, new Float32Array(transfoMat))
+
+        // Enable the depth test
+        //gl.enable(gl.DEPTH_TEST);
+        // Clear the color buffer bit
+        gl.clear(gl.COLOR_BUFFER_BIT)
+        // Set the view port
+        //gl.viewport(0, 0, cg.w, cg.h);
+
+        gl.drawArrays(gl.POINTS, 0, this.verticesBuffer.length / 2)
+    }
+}

package/src/utils/WebGLSquareColoringAdvanced.js

@@ -0,0 +1,230 @@
+//@ts-check
+'use strict'
+
+import { initShaderProgram, createShader } from './webGLUtils'
+import { color } from 'd3-color'
+
+/**
+ * Everything to easily draw colored squares with webGL.
+ * All the same size, but different fill color.
+ * The color interpolation is computed in the fragment shader program, by the GPU, thus it is less flexible but faster.
+ */
+export class WebGLSquareColoringAdvanced {
+    //see:
+    //https://webglfundamentals.org/webgl/lessons/fr/webgl-shaders-and-glsl.html#les-uniforms-dans-les-shaders-de-vertex
+    //https://thebookofshaders.com/glossary/?search=mix
+    //https://thebookofshaders.com/06/
+    //https://thebookofshaders.com/glossary/
+
+    /**
+     *
+     * @param {*} gl
+     * @param {Array.<String>} colors
+     * @param {{fun:string,alpha:number}} stretching
+     * @param {number} sizePix
+     * @param {number|undefined} globalOpacity
+     */
+    constructor(gl, colors, stretching, sizePix = 10, globalOpacity = undefined) {
+        /** @type {WebGLRenderingContext} */
+        this.gl = gl
+        //gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+        //gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        //gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+
+        /** @type {WebGLShader} */
+        const vShader = createShader(
+            gl,
+            gl.VERTEX_SHADER,
+            `
+        attribute vec2 pos;
+        uniform float sizePix;
+        uniform mat3 mat;
+
+        attribute float t;
+        varying float vt;
+
+        void main() {
+          gl_Position = vec4(mat * vec3(pos, 1.0), 1.0);
+          gl_PointSize = sizePix;
+          vt = t;
+        }
+      `
+        )
+
+        //prepare fragment shader code
+        //declare the uniform and other variables
+        let fshString =
+            '' +
+            'precision mediump float;\n' +
+            'varying float vt;\n' +
+            'uniform float alpha;\n' +
+            (() => {
+                const out = []
+                for (let i = 0; i < colors.length; i++) out.push('uniform vec4 c' + i + ';\n')
+                return out.join('')
+            })() +
+            //start the main function, apply the stretching of t
+            'void main(void) {\n'
+
+        if (stretching) {
+            if (stretching.fun == 'pow')
+                //sPow = (t, alpha = 3) => Math.pow(t, alpha);
+                fshString += '   float t = pow(vt, alpha);\n'
+            else if (stretching.fun == 'powRev')
+                //sPowRev = (t, alpha = 3) => 1 - Math.pow(1 - t, 1 / alpha);
+                fshString += '   float t = 1.0-pow(1.0-vt, 1.0/alpha);\n'
+            else if (stretching.fun == 'exp')
+                //sExp = (t, alpha = 3) => alpha == 0 ? t : (Math.exp(t * alpha) - 1) / (Math.exp(alpha) - 1);
+                fshString +=
+                    stretching.alpha == 0
+                        ? `float t = vt;`
+                        : '   float t = (exp(vt * alpha) - 1.0) / (exp(alpha) - 1.0);\n'
+            else if (stretching.fun == 'expRev')
+                //sExpRev = (t, alpha = 3) => alpha == 0 ? t : 1 - (1 / alpha) * Math.log(Math.exp(alpha) * (1 - t) + t);
+                fshString +=
+                    stretching.alpha == 0
+                        ? `float t = vt;`
+                        : '   float t = 1.0 - (1.0 / alpha) * log(exp(alpha) * (1.0 - vt) + vt);\n'
+            else if (stretching.fun == 'circleLow') {
+                if (stretching.alpha == 0)
+                    //if (alpha == 0) return t;
+                    fshString += '   float t = vt;\n'
+                else if (stretching.alpha == 1)
+                    // if (alpha == 1) return Math.sqrt(2 * t - t * t);
+                    fshString += '   float t = sqrt(vt * (2.0 - vt));\n'
+                else {
+                    //const a = alpha / (1 - alpha);
+                    //return Math.sqrt(1 / (a * a) + t * (2 / a + 2 - t)) - 1 / a;
+                    fshString +=
+                        '   float a = alpha / (1.0 - alpha);\n' +
+                        '   float t = sqrt(1.0 / (a * a) + vt * ( 2.0/a + 2.0 - vt )) - 1.0 / a;\n'
+                }
+            } else if (stretching.fun == 'circleHigh') {
+                // 1 - sCircleLow(1 - t, alpha)
+                if (stretching.alpha == 0)
+                    //if (alpha == 0) return t;
+                    fshString += '   float t = vt;\n'
+                else if (stretching.alpha == 1)
+                    // if (alpha == 1) return Math.sqrt(2 * t - t * t);
+                    fshString += '   float t = 1.0 - sqrt((1.0 - vt) * (1.0 + vt));\n'
+                else {
+                    //const a = alpha / (1 - alpha);
+                    //return Math.sqrt(1 / (a * a) + (2 * t) / a + 2 * t - t * t) - 1 / a;
+                    fshString +=
+                        '   float a = alpha / (1.0 - alpha);\n' +
+                        '   float t = 1.0 - sqrt(1.0 / (a * a) + (1.0-vt) * ( 2.0/a + 1.0 + vt )) + 1.0 / a;\n'
+                }
+            } else {
+                console.error('Unexpected stretching function code: ' + stretching.fun)
+                fshString += '   float t = vt;\n'
+            }
+        } else {
+            fshString += '   float t = vt;\n'
+        }
+
+        //choose initial and final colors, and adjust t value
+        if (colors.length == 1) fshString += '   vec4 cI=c0;\n   vec4 cF=c0;\n'
+        else if (colors.length == 2) fshString += '   vec4 cI=c0;\n   vec4 cF=c1;\n'
+        else {
+            const nb = colors.length - 1
+            const nbs = nb + '.0'
+            fshString += '   vec4 cI;\n'
+            fshString += '   vec4 cF;\n'
+            fshString += '   if(t<1.0/' + nbs + ') { cI=c0; cF=c1; t=t*' + nbs + '; }\n'
+            for (let i = 2; i < nb; i++)
+                fshString +=
+                    '   else if(t<' +
+                    i +
+                    '.0/' +
+                    nbs +
+                    ') { cI=c' +
+                    (i - 1) +
+                    '; cF=c' +
+                    i +
+                    '; t=' +
+                    nbs +
+                    '*t-' +
+                    (i - 1) +
+                    '.0; }\n'
+            fshString +=
+                '   else { cI=c' + (nb - 1) + '; cF=c' + nb + '; t=' + nbs + '*t-' + (nb - 1) + '.0; }\n'
+        }
+
+        //one single color
+        if (colors.length == 1) fshString += '   gl_FragColor = vec4(c0[0], c0[1], c0[2], c0[3]);}\n'
+        //set interpolated color, between initial and final one
+        else fshString += '   gl_FragColor = mix(cI, cF, t);}\n'
+
+        //console.log(fshString)
+
+        /** @type {WebGLShader} */
+        const fShader = createShader(gl, gl.FRAGMENT_SHADER, fshString)
+
+        /** @type {WebGLProgram} */
+        this.program = initShaderProgram(gl, vShader, fShader)
+        gl.useProgram(this.program)
+
+        //set uniforms
+
+        //sizePix
+        //TODO: bug here. Seems to be limited to some threshold value (around 250).
+        gl.uniform1f(gl.getUniformLocation(this.program, 'sizePix'), 1.0 * sizePix)
+
+        //stretching alpha factor
+        gl.uniform1f(gl.getUniformLocation(this.program, 'alpha'), stretching ? 1.0 * stretching.alpha : 0.0)
+
+        //colors
+        for (let i = 0; i < colors.length; i++) {
+            const c = color(colors[i])
+
+            let opacity = c.opacity
+            if (c.opacity == 1 && globalOpacity != undefined) opacity = globalOpacity
+
+            gl.uniform4fv(gl.getUniformLocation(this.program, 'c' + i), [
+                +c.r / 255.0,
+                +c.g / 255.0,
+                +c.b / 255.0,
+                +opacity,
+            ])
+        }
+    }
+
+    /**  */
+    draw(verticesBuffer, tBuffer, transfoMat) {
+        const gl = this.gl
+        const program = this.program
+
+        //vertice data
+        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verticesBuffer), gl.STATIC_DRAW)
+        const position = gl.getAttribLocation(program, 'pos')
+        gl.vertexAttribPointer(
+            position,
+            2, //numComponents
+            gl.FLOAT, //type
+            false, //normalise
+            0, //stride
+            0 //offset
+        )
+        gl.enableVertexAttribArray(position)
+
+        //t data
+        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(tBuffer), gl.STATIC_DRAW)
+        const t = gl.getAttribLocation(program, 't')
+        gl.vertexAttribPointer(t, 1, gl.FLOAT, false, 0, 0)
+        gl.enableVertexAttribArray(t)
+
+        //transformation
+        gl.uniformMatrix3fv(gl.getUniformLocation(program, 'mat'), false, new Float32Array(transfoMat))
+
+        // Enable the depth test
+        //gl.enable(gl.DEPTH_TEST);
+        // Clear the color buffer bit
+        gl.clear(gl.COLOR_BUFFER_BIT)
+        // Set the view port
+        //gl.viewport(0, 0, cg.w, cg.h);
+
+        gl.drawArrays(gl.POINTS, 0, verticesBuffer.length / 2)
+    }
+}

package/src/utils/WebGLSquareColoringCatAdvanced.js

@@ -0,0 +1,133 @@
+//@ts-check
+'use strict'
+
+import { initShaderProgram, createShader } from './webGLUtils'
+import { color } from 'd3-color'
+
+/**
+ * Everything to easily draw colored squares with webGL.
+ * All the same size, but different fill color.
+ * Color based on categories.
+ */
+export class WebGLSquareColoringCatAdvanced {
+    /**
+     * @param {Array.<string>} colors
+     */
+    constructor(colors) {
+        /**
+         * @type {Array.<string>} */
+        this.colors = colors
+
+        /** Vector shader program
+         * @type {string} */
+        this.vshString = `
+        attribute vec2 pos;
+        uniform float sizePix;
+        uniform mat3 mat;
+
+        attribute float i;
+        varying float vi;
+
+        void main() {
+          gl_Position = vec4(mat * vec3(pos, 1.0), 1.0);
+          gl_PointSize = sizePix;
+          vi = i;
+        }
+        `
+
+        //prepare fragment shader code
+        //declare the uniform and other variables
+        const out = []
+        out.push('precision mediump float;\nvarying float vi;\n')
+        //add color uniforms
+        out.push('uniform vec4')
+        for (let i = 0; i < colors.length; i++) {
+            if (i > 0) out.push(',')
+            out.push(' c' + i)
+        }
+        out.push(';\n')
+        //start the main function
+        out.push('void main(void) {\n')
+        //choose color i
+        for (let i = 0; i < colors.length; i++) {
+            if (i > 0) out.push('else ')
+            out.push('if(vi==')
+            out.push(i)
+            out.push('.0) gl_FragColor = vec4(c')
+            out.push(i)
+            out.push('[0], c')
+            out.push(i)
+            out.push('[1], c')
+            out.push(i)
+            out.push('[2], c')
+            out.push(i)
+            out.push('[3]);\n')
+        }
+        out.push('else gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n}')
+        /** Fragment shader program
+         * @type {string} */
+        this.fshString = out.join('')
+    }
+
+    /**  */
+    draw(gl, verticesBuffer, iBuffer, transfoMat, sizePix = 10) {
+        /** @type {WebGLShader} */
+        const vShader = createShader(gl, gl.VERTEX_SHADER, this.vshString)
+
+        /** @type {WebGLShader} */
+        const fShader = createShader(gl, gl.FRAGMENT_SHADER, this.fshString)
+
+        /** @type {WebGLProgram} */
+        const program = initShaderProgram(gl, vShader, fShader)
+        gl.useProgram(program)
+
+        //set uniforms
+
+        //sizePix
+        gl.uniform1f(gl.getUniformLocation(program, 'sizePix'), 1.0 * sizePix)
+
+        //colors
+        for (let i = 0; i < this.colors.length; i++) {
+            const c = color(this.colors[i])
+            gl.uniform4fv(gl.getUniformLocation(program, 'c' + i), [
+                +c.r / 255.0,
+                +c.g / 255.0,
+                +c.b / 255.0,
+                +c.opacity,
+            ])
+        }
+
+        //vertice data
+        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verticesBuffer), gl.STATIC_DRAW)
+        const position = gl.getAttribLocation(program, 'pos')
+        gl.vertexAttribPointer(
+            position,
+            2, //numComponents
+            gl.FLOAT, //type
+            false, //normalise
+            0, //stride
+            0 //offset
+        )
+        gl.enableVertexAttribArray(position)
+
+        //i data
+        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(iBuffer), gl.STATIC_DRAW)
+        const i = gl.getAttribLocation(program, 'i')
+        gl.vertexAttribPointer(i, 1, gl.FLOAT, false, 0, 0)
+        gl.enableVertexAttribArray(i)
+
+        //transformation
+        gl.uniformMatrix3fv(gl.getUniformLocation(program, 'mat'), false, new Float32Array(transfoMat))
+
+        // Enable the depth test
+        //gl.enable(gl.DEPTH_TEST);
+        // Clear the color buffer bit
+        gl.clear(gl.COLOR_BUFFER_BIT)
+        // Set the view port
+        //gl.viewport(0, 0, cg.w, cg.h);
+
+        gl.drawArrays(gl.POINTS, 0, verticesBuffer.length / 2)
+    }
+}