gridviz 2.1.13 → 2.1.15

package/src/utils/stretching.js

@@ -1,131 +1,154 @@
-//@ts-check
-'use strict'
-
-/**
- * Some function [0,1]->[0,1] to stretch range of values.
- * @see https://github.com/eurostat/gridviz/blob/master/docs/reference.md#stretching
- * @see https://observablehq.com/@jgaffuri/stretching
- */
-
-/**
- * Function [0,1]->[0,1] to stretch range of values.
- * Polynomial
- *
- * @param {number} t The value to stretch, within [0,1]
- * @param {number} alpha 1: no stretching. <1: show low values. >1: show high values.
- * @returns {number} The stretched value, within [0,1]
- */
-export const sPow = (t, alpha = 3) => Math.pow(t, alpha)
-
-/**
- * Function [0,1]->[0,1] to stretch range of values.
- * Polynomial (reverse)
- *
- * @param {number} t The value to stretch, within [0,1]
- * @param {number} alpha 1: no stretching. <1: show low values. >1: show high values.
- * @returns {number} The stretched value, within [0,1]
- */
-export const sPowRev = (t, alpha = 3) => 1 - Math.pow(1 - t, 1 / alpha)
-
-/**
- * Function [0,1]->[0,1] to stretch range of values.
- * Exponential
- *
- * @param {number} t The value to stretch, within [0,1]
- * @param {number} alpha 0: no stretching. -Inf: show low values. Inf: show high values.
- * @returns {number} The stretched value, within [0,1]
- */
-export const sExp = (t, alpha = 3) => (alpha == 0 ? t : (Math.exp(t * alpha) - 1) / (Math.exp(alpha) - 1))
-
-/**
- * Function [0,1]->[0,1] to stretch range of values.
- * Exponential (reverse)
- *
- * @param {number} t The value to stretch, within [0,1]
- * @param {number} alpha 0: no stretching. -Inf: show low values. Inf: show high values.
- * @returns {number} The stretched value, within [0,1]
- */
-export const sExpRev = (t, alpha = 3) =>
-    alpha == 0 ? t : 1 - (1 / alpha) * Math.log(Math.exp(alpha) * (1 - t) + t)
-
-/**
- * Function [0,1]->[0,1] to stretch range of values.
- * Circle, show low values
- * NB: sCircleHigh and sCircleLow are inverse functions of each other.
- *
- * @param {number} t The value to stretch, within [0,1]
- * @param {number} alpha 0: no stretching. 1: perfect circle section
- * @returns {number} The stretched value, within [0,1]
- */
-export const sCircleLow = (t, alpha = 0.8) => {
-    if (alpha == 0) return t
-    if (alpha == 1) return Math.sqrt(t * (2 - t))
-    const a = alpha / (1 - alpha)
-    return Math.sqrt(1 / (a * a) + t * (2 / a + 2 - t)) - 1 / a
-}
-
-/**
- * Function [0,1]->[0,1] to stretch range of values.
- * Circle, show high values
- * NB: sCircleHigh and sCircleLow are inverse functions of each other.
- *
- * @param {number} t The value to stretch, within [0,1]
- * @param {number} alpha 0: no stretching. 1: perfect circle section
- * @returns {number} The stretched value, within [0,1]
- */
-export const sCircleHigh = (t, alpha = 0.8) => 1 - sCircleLow(1 - t, alpha)
-
-/**
- * Inverse functions
- */
-
-/**
- * Inverse function of sExp
- * @param {number} y
- * @param {number} alpha
- * @returns {number}
- */
-export const sExpInverse = (y, alpha = 3) =>
-    alpha == 0 ? y : (1 / alpha) * Math.log(1 - y + y * Math.exp(alpha))
-
-/**
- * Inverse function of sExpRev
- * @param {number} y
- * @param {number} alpha
- * @returns {number}
- */
-export const sExpRevInverse = (y, alpha = 3) => (Math.exp(-alpha * y) - 1) / (Math.exp(-alpha) - 1)
-
-/**
- * Inverse function of sPow
- * @param {number} y
- * @param {number} alpha
- * @returns {number}
- */
-
-export const sPowInverse = (y, alpha = 3) => Math.pow(y, 1 / alpha)
-
-/**
- * Inverse function of sPowRev
- * @param {number} y
- * @param {number} alpha
- * @returns {number}
- */
-export const sPowRevInverse = (y, alpha = 3) => 1 - Math.pow(1 - y, alpha)
-
-//test code
-/*
-for (let i = 0; i <= 1; i += 0.001) {
-  //const v = gviz.sExp(gviz.sExpInverse(i));
-  //const v = gviz.sExpInverse(gviz.sExp(i));
-  //const v = gviz.sExpRev(gviz.sExpRevInverse(i));
-  //const v = gviz.sExpRevInverse(gviz.sExpRev(i));
-  //const v = gviz.sPow(gviz.sPowInverse(i));
-  //const v = gviz.sPowInverse(gviz.sPow(i));
-  //const v = gviz.sPowRev(gviz.sPowRevInverse(i));
-  //const v = gviz.sPowRevInverse(gviz.sPowRev(i));
-  //const v = gviz.sCircleLow(gviz.sCircleHigh(i));
-  //const v = gviz.sCircleHigh(gviz.sCircleLow(i));
-  console.log(i - v)
-}
-*/
+//@ts-check
+'use strict'
+
+
+
+//stretching functions [0,1]=>[0,1]
+
+export const powerScale = (exponent = 3) => t => Math.pow(t, exponent)
+export const powerInverseScale = (exponent = 3) => t => 1 - Math.pow(1 - t, 1 / exponent)
+export const exponentialScale = (base = 3) => {
+    if (base == 0) return t => t
+    const a = (Math.exp(base) - 1)
+    return t => (Math.exp(t * base) - 1) / a
+}
+export const logarithmicScale = (base = 3) => {
+    if (base == 0) return t => t
+    return t => 1 - (1 / base) * Math.log(Math.exp(base) * (1 - t) + t)
+}
+
+
+
+
+/**
+ * Some function [0,1]->[0,1] to stretch range of values.
+ * @see https://github.com/eurostat/gridviz/blob/master/docs/reference.md#stretching
+ * @see https://observablehq.com/@jgaffuri/stretching
+ */
+
+/**
+ * Function [0,1]->[0,1] to stretch range of values.
+ * Polynomial
+ *
+ * @param {number} t The value to stretch, within [0,1]
+ * @param {number} exponent 1: no stretching. <1: show low values. >1: show high values.
+ * @returns {number} The stretched value, within [0,1]
+ */
+export const sPow = (t, exponent = 3) => Math.pow(t, exponent)
+
+/**
+ * Function [0,1]->[0,1] to stretch range of values.
+ * Polynomial (reverse)
+ *
+ * @param {number} t The value to stretch, within [0,1]
+ * @param {number} exponent 1: no stretching. <1: show low values. >1: show high values.
+ * @returns {number} The stretched value, within [0,1]
+ */
+export const sPowRev = (t, exponent = 3) => 1 - Math.pow(1 - t, 1 / exponent)
+
+/**
+ * Function [0,1]->[0,1] to stretch range of values.
+ * Exponential
+ *
+ * @param {number} t The value to stretch, within [0,1]
+ * @param {number} base 0: no stretching. -Inf: show low values. Inf: show high values.
+ * @returns {number} The stretched value, within [0,1]
+ */
+export const sExp = (t, base = 3) => (base == 0 ? t : (Math.exp(t * base) - 1) / (Math.exp(base) - 1))
+
+/**
+ * Function [0,1]->[0,1] to stretch range of values.
+ * Exponential (reverse)
+ *
+ * @param {number} t The value to stretch, within [0,1]
+ * @param {number} base 0: no stretching. -Inf: show low values. Inf: show high values.
+ * @returns {number} The stretched value, within [0,1]
+ */
+export const sExpRev = (t, base = 3) =>
+    base == 0 ? t : 1 - (1 / base) * Math.log(Math.exp(base) * (1 - t) + t)
+
+/**
+ * Function [0,1]->[0,1] to stretch range of values.
+ * Circle, show low values
+ * NB: sCircleHigh and sCircleLow are inverse functions of each other.
+ *
+ * @param {number} t The value to stretch, within [0,1]
+ * @param {number} alpha 0: no stretching. 1: perfect circle section
+ * @returns {number} The stretched value, within [0,1]
+ */
+export const sCircleLow = (t, alpha = 0.8) => {
+    if (alpha == 0) return t
+    if (alpha == 1) return Math.sqrt(t * (2 - t))
+    const a = alpha / (1 - alpha)
+    return Math.sqrt(1 / (a * a) + t * (2 / a + 2 - t)) - 1 / a
+}
+
+/**
+ * Function [0,1]->[0,1] to stretch range of values.
+ * Circle, show high values
+ * NB: sCircleHigh and sCircleLow are inverse functions of each other.
+ *
+ * @param {number} t The value to stretch, within [0,1]
+ * @param {number} alpha 0: no stretching. 1: perfect circle section
+ * @returns {number} The stretched value, within [0,1]
+ */
+export const sCircleHigh = (t, alpha = 0.8) => 1 - sCircleLow(1 - t, alpha)
+
+/**
+ * Inverse functions
+ */
+
+/**
+ * Inverse function of sExp
+ * @param {number} y
+ * @param {number} base
+ * @returns {number}
+ */
+export const sExpInverse = (y, base = 3) =>
+    base == 0 ? y : (1 / base) * Math.log(1 - y + y * Math.exp(base))
+
+/**
+ * Inverse function of sExpRev
+ * @param {number} y
+ * @param {number} base
+ * @returns {number}
+ */
+export const sExpRevInverse = (y, base = 3) => (Math.exp(-base * y) - 1) / (Math.exp(-base) - 1)
+
+/**
+ * Inverse function of sPow
+ * @param {number} y
+ * @param {number} exponent
+ * @returns {number}
+ */
+
+export const sPowInverse = (y, exponent = 3) => Math.pow(y, 1 / exponent)
+
+
+
+
+
+/**
+ * Inverse function of sPowRev
+ * @param {number} y
+ * @param {number} exponent
+ * @returns {number}
+ */
+export const sPowRevInverse = (y, exponent = 3) => 1 - Math.pow(1 - y, exponent)
+
+//test code
+/*
+for (let i = 0; i <= 1; i += 0.001) {
+  //const v = gviz.sExp(gviz.sExpInverse(i));
+  //const v = gviz.sExpInverse(gviz.sExp(i));
+  //const v = gviz.sExpRev(gviz.sExpRevInverse(i));
+  //const v = gviz.sExpRevInverse(gviz.sExpRev(i));
+  //const v = gviz.sPow(gviz.sPowInverse(i));
+  //const v = gviz.sPowInverse(gviz.sPow(i));
+  //const v = gviz.sPowRev(gviz.sPowRevInverse(i));
+  //const v = gviz.sPowRevInverse(gviz.sPowRev(i));
+  //const v = gviz.sCircleLow(gviz.sCircleHigh(i));
+  //const v = gviz.sCircleHigh(gviz.sCircleLow(i));
+  console.log(i - v)
+}
+*/

package/src/utils/webGLUtils.js

@@ -1,71 +1,71 @@
-//@ts-check
-'use strict'
-
-/**
- * @param {string} width
- * @param {string} height
- * @param {object} opts
- * @returns {{canvas:HTMLCanvasElement, gl:WebGLRenderingContext}}
- */
-export function makeWebGLCanvas(width, height, opts) {
-    const canvas = document.createElement('canvas')
-    canvas.setAttribute('width', width)
-    canvas.setAttribute('height', height)
-    const gl = canvas.getContext('webgl', opts)
-    if (!gl) {
-        throw new Error('Unable to initialize WebGL. Your browser or machine may not support it.')
-    }
-    return { canvas: canvas, gl: gl }
-}
-
-/**
- * Initialize a shader program, so WebGL knows how to draw our data
- *
- * @param {WebGLRenderingContext} gl
- * @param  {...WebGLShader} shaders
- * @returns {WebGLProgram}
- */
-export function initShaderProgram(gl, ...shaders) {
-    /** @type {WebGLProgram|null} */
-    const program = gl.createProgram()
-    if (program == null) throw new Error('Cannot create webGL program')
-    for (const shader of shaders) gl.attachShader(program, shader)
-    gl.linkProgram(program)
-    if (gl.getProgramParameter(program, gl.LINK_STATUS)) return program
-    throw new Error(gl.getProgramInfoLog(program) || 'Cannot create webGL program (2)')
-}
-
-/**
- * Creates a shader of the given type, uploads the source and compiles it.
- *
- * @param {WebGLRenderingContext} gl
- * @param {number} type
- * @param  {...string} sources
- * @returns {WebGLShader}
- */
-export function createShader(gl, type, ...sources) {
-    /** @type {WebGLShader|null} */
-    const shader = gl.createShader(type)
-    if (shader == null) throw new Error('Cannot create webGL shader')
-    gl.shaderSource(shader, sources.join('\n'))
-    gl.compileShader(shader)
-    if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader
-    throw new Error(gl.getShaderInfoLog(shader) || 'Cannot create webGL shader (2)')
-}
-
-/**
- * Check if webGL is supported
- *
- * @returns {boolean}
- */
-export function checkWebGLSupport() {
-    try {
-        const canvas = document.createElement('canvas')
-        return !!window.WebGLRenderingContext &&
-            (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
-            ? true
-            : false
-    } catch (err) {
-        return false
-    }
-}
+//@ts-check
+'use strict'
+
+/**
+ * @param {string} width
+ * @param {string} height
+ * @param {object} opts
+ * @returns {{canvas:HTMLCanvasElement, gl:WebGLRenderingContext}}
+ */
+export function makeWebGLCanvas(width, height, opts) {
+    const canvas = document.createElement('canvas')
+    canvas.setAttribute('width', width)
+    canvas.setAttribute('height', height)
+    const gl = canvas.getContext('webgl', opts)
+    if (!gl) {
+        throw new Error('Unable to initialize WebGL. Your browser or machine may not support it.')
+    }
+    return { canvas: canvas, gl: gl }
+}
+
+/**
+ * Initialize a shader program, so WebGL knows how to draw our data
+ *
+ * @param {WebGLRenderingContext} gl
+ * @param  {...WebGLShader} shaders
+ * @returns {WebGLProgram}
+ */
+export function initShaderProgram(gl, ...shaders) {
+    /** @type {WebGLProgram|null} */
+    const program = gl.createProgram()
+    if (program == null) throw new Error('Cannot create webGL program')
+    for (const shader of shaders) gl.attachShader(program, shader)
+    gl.linkProgram(program)
+    if (gl.getProgramParameter(program, gl.LINK_STATUS)) return program
+    throw new Error(gl.getProgramInfoLog(program) || 'Cannot create webGL program (2)')
+}
+
+/**
+ * Creates a shader of the given type, uploads the source and compiles it.
+ *
+ * @param {WebGLRenderingContext} gl
+ * @param {number} type
+ * @param  {...string} sources
+ * @returns {WebGLShader}
+ */
+export function createShader(gl, type, ...sources) {
+    /** @type {WebGLShader|null} */
+    const shader = gl.createShader(type)
+    if (shader == null) throw new Error('Cannot create webGL shader')
+    gl.shaderSource(shader, sources.join('\n'))
+    gl.compileShader(shader)
+    if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader
+    throw new Error(gl.getShaderInfoLog(shader) || 'Cannot create webGL shader (2)')
+}
+
+/**
+ * Check if webGL is supported
+ *
+ * @returns {boolean}
+ */
+export function checkWebGLSupport() {
+    try {
+        const canvas = document.createElement('canvas')
+        return !!window.WebGLRenderingContext &&
+            (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
+            ? true
+            : false
+    } catch (err) {
+        return false
+    }
+}