Skip to content
Navigation Menu
{{ message }}
forked from flekschas/regl-scatterplot
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathutils.js
More file actions
356 lines (318 loc) · 10.9 KB
/
Copy pathutils.js
File metadata and controls
356 lines (318 loc) · 10.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
import createOriginalRegl from 'regl';
import { GL_EXTENSIONS } from './constants';
/**
* Get the max value of an array. helper method to be used with `Array.reduce()`.
* @param {number} max Accumulator holding the max value.
* @param {number} x Current value.
* @return {number} Max value.
*/
export const arrayMax = (max, x) => (max > x ? max : x);
/**
* Check if all GL extensions are enabled and warn otherwise
* @param {function} regl Regl instance to be tested
* @return {function} Returns the Regl instance itself
*/
export const checkReglExtensions = (regl) => {
if (!regl) return false;
return GL_EXTENSIONS.reduce((every, EXTENSION) => {
if (!regl.hasExtension(EXTENSION)) {
console.warn(
`WebGL: ${EXTENSION} extension not supported. Scatterplot might not render properly`
);
return false;
}
return every;
}, true);
};
/**
* Create a new Regl instance with `GL_EXTENSIONS` enables
* @param {object} canvas Canvas element to be rendered on
* @return {function} New Regl instance
*/
export const createRegl = (canvas) => {
const gl = canvas.getContext('webgl', {
antialias: true,
preserveDrawingBuffer: true,
});
const extensions = [];
// Needed to run the tests properly as the headless-gl doesn't support all
// extensions, which is fine for the functional tests.
GL_EXTENSIONS.forEach((EXTENSION) => {
if (gl.getExtension(EXTENSION)) {
extensions.push(EXTENSION);
} else {
console.warn(
`WebGL: ${EXTENSION} extension not supported. Scatterplot might not render properly`
);
}
});
return createOriginalRegl({ gl, extensions });
};
/**
* L2 distance between a pair of 2D points
* @param {number} x1 X coordinate of the first point
* @param {number} y1 Y coordinate of the first point
* @param {number} x2 X coordinate of the second point
* @param {number} y2 Y coordinate of the first point
* @return {number} L2 distance
*/
export const dist = (x1, y1, x2, y2) =>
Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2);
/**
* Get the bounding box of a set of 2D positions
* @param {array} positions2d 2D positions to be checked
* @return {array} Quadruple of form `[xMin, yMin, xMax, yMax]` defining the
* bounding box
*/
export const getBBox = (positions2d) => {
let xMin = Infinity;
let xMax = -Infinity;
let yMin = Infinity;
let yMax = -Infinity;
for (let i = 0; i < positions2d.length; i += 2) {
xMin = positions2d[i] < xMin ? positions2d[i] : xMin;
xMax = positions2d[i] > xMax ? positions2d[i] : xMax;
yMin = positions2d[i + 1] < yMin ? positions2d[i + 1] : yMin;
yMax = positions2d[i + 1] > yMax ? positions2d[i + 1] : yMax;
}
return [xMin, yMin, xMax, yMax];
};
/**
* Convert a HEX-encoded color to an RGB-encoded color
* @param {string} hex HEX-encoded color string.
* @param {boolean} isNormalize If `true` the returned RGB values will be
* normalized to `[0,1]`.
* @return {array} Triple holding the RGB values.
*/
export const hexToRgb = (hex, isNormalize = false) =>
hex
.replace(
/^#?([a-f\d])([a-f\d])([a-f\d])$/i,
(m, r, g, b) => `#${r}${r}${g}${g}${b}${b}`
)
.substring(1)
.match(/.{2}/g)
.map((x) => parseInt(x, 16) / 255 ** isNormalize);
export const isConditionalArray = (a, condition, { minLength = 0 } = {}) =>
Array.isArray(a) && a.length >= minLength && a.every(condition);
export const isPositiveNumber = (x) => !Number.isNaN(+x) && +x >= 0;
export const isStrictlyPositiveNumber = (x) => !Number.isNaN(+x) && +x > 0;
/**
* Create a function to limit choices to a predefined list
* @param {array} choices Array of acceptable choices
* @param {*} defaultOption Default choice
* @return {function} Function limiting the choices
*/
export const limit = (choices, defaultChoice) => (choice) =>
choices.indexOf(choice) >= 0 ? choice : defaultChoice;
/**
* Promised-based image loading
* @param {string} src Remote image source, i.e., a URL
* @return {object} Promise resolving to the image once its loaded
*/
export const loadImage = (src, isCrossOrigin = false) =>
new Promise((accept, reject) => {
const image = new Image();
if (isCrossOrigin) image.crossOrigin = 'anonymous';
image.src = src;
image.onload = () => {
accept(image);
};
image.onerror = (error) => {
reject(error);
};
});
/**
* Create a Regl texture from an URL.
* @param {function} regl Regl instance used for creating the texture.
* @param {string} url Source URL of the image.
* @param {boolean} isCrossOrigin If `true` allow loading image from a
* source of another origin.
* @return {object} Promise resolving to the texture object.
*/
export const createTextureFromUrl = (regl, url) =>
new Promise((resolve, reject) => {
loadImage(
url,
url.indexOf(window.location.origin) !== 0 && url.indexOf('base64') === -1
)
.then((image) => {
resolve(regl.texture(image));
})
.catch((error) => {
reject(error);
});
});
/**
* Convert a HEX-encoded color to an RGBA-encoded color
* @param {string} hex HEX-encoded color string.
* @param {boolean} isNormalize If `true` the returned RGBA values will be
* normalized to `[0,1]`.
* @return {array} Triple holding the RGBA values.
*/
export const hexToRgba = (hex, isNormalize = false) => [
...hexToRgb(hex, isNormalize),
255 ** !isNormalize,
];
/**
* Tests if a string is a valid HEX color encoding
* @param {string} hex HEX-encoded color string.
* @return {boolean} If `true` the string is a valid HEX color encoding.
*/
export const isHex = (hex) => /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex);
/**
* Tests if a number is in `[0,1]`.
* @param {number} x Number to be tested.
* @return {boolean} If `true` the number is in `[0,1]`.
*/
export const isNormFloat = (x) => x >= 0 && x <= 1;
/**
* Tests if an array consist of normalized numbers that are in `[0,1]` only.
* @param {array} a Array to be tested
* @return {boolean} If `true` the array contains only numbers in `[0,1]`.
*/
export const isNormFloatArray = (a) => Array.isArray(a) && a.every(isNormFloat);
/**
* From: https://wrf.ecse.rpi.edu//Research/Short_Notes/pnpoly.html
* @param {Array} point Tuple of the form `[x,y]` to be tested.
* @param {Array} polygon 1D list of vertices defining the polygon.
* @return {boolean} If `true` point lies within the polygon.
*/
export const isPointInPolygon = ([px, py] = [], polygon) => {
let x1;
let y1;
let x2;
let y2;
let isWithin = false;
for (let i = 0, j = polygon.length - 2; i < polygon.length; i += 2) {
x1 = polygon[i];
y1 = polygon[i + 1];
x2 = polygon[j];
y2 = polygon[j + 1];
if (y1 > py !== y2 > py && px < ((x2 - x1) * (py - y1)) / (y2 - y1) + x1)
isWithin = !isWithin;
j = i;
}
return isWithin;
};
/**
* Tests if a variable is a string
* @param {*} s Variable to be tested
* @return {boolean} If `true` variable is a string
*/
export const isString = (s) => typeof s === 'string' || s instanceof String;
/**
* Tests if a number is an interger and in `[0,255]`.
* @param {number} x Number to be tested.
* @return {boolean} If `true` the number is an interger and in `[0,255]`.
*/
export const isUint8 = (x) => Number.isInteger(x) && x >= 0 && x <= 255;
/**
* Tests if an array consist of Uint8 numbers only.
* @param {array} a Array to be tested.
* @return {boolean} If `true` the array contains only Uint8 numbers.
*/
export const isUint8Array = (a) => Array.isArray(a) && a.every(isUint8);
/**
* Tests if an array is encoding an RGB color.
* @param {array} rgb Array to be tested
* @return {boolean} If `true` the array hold a triple of Uint8 numbers or
* a triple of normalized floats.
*/
export const isRgb = (rgb) =>
rgb.length === 3 && (isNormFloatArray(rgb) || isUint8Array(rgb));
/**
* Tests if an array is encoding an RGBA color.
* @param {array} rgb Array to be tested
* @return {boolean} If `true` the array hold a quadruple of Uint8 numbers or
* a quadruple of normalized floats.
*/
export const isRgba = (rgba) =>
rgba.length === 4 && (isNormFloatArray(rgba) || isUint8Array(rgba));
/**
* Test if a color is multiple colors
* @param {*} color To be tested
* @return {boolean} If `true`, `color` is an array of colors.
*/
export const isMultipleColors = (color) =>
Array.isArray(color) &&
color.length &&
(Array.isArray(color[0]) || isString(color[0]));
/**
* Fast version of `Math.max`. Based on
* https://jsperf.com/math-min-max-vs-ternary-vs-if/24 `Math.max` is not
* very fast
* @param {number} a Value A
* @param {number} b Value B
* @return {boolean} If `true` A is greater than B.
*/
export const max = (a, b) => (a > b ? a : b);
/**
* Fast version of `Math.min`. Based on
* https://jsperf.com/math-min-max-vs-ternary-vs-if/24 `Math.max` is not
* very fast
* @param {number} a Value A
* @param {number} b Value B
* @return {boolean} If `true` A is smaller than B.
*/
export const min = (a, b) => (a < b ? a : b);
/**
* Normalize an array
* @param {array} a Array to be normalized.
* @return {array} Normalized array.
*/
export const normNumArray = (a) =>
a.map((x) => x / a.reduce(arrayMax, -Infinity));
/**
* Convert a color to an RGBA color
* @param {*} color Color to be converted. Currently supports:
* HEX, RGB, or RGBA.
* @param {boolean} isNormalize If `true` the returned RGBA values will be
* normalized to `[0,1]`.
* @return {array} Quadruple defining an RGBA color.
*/
export const toRgba = (color, shouldNormalize) => {
if (isRgba(color)) {
const isNormalized = isNormFloatArray(color);
if (
(shouldNormalize && isNormalized) ||
(!shouldNormalize && !isNormalized)
)
return color;
if (shouldNormalize && !isNormalized) return color.map((x) => x / 255);
return color.map((x) => x * 255);
}
if (isRgb(color)) {
const base = 255 ** !shouldNormalize;
const isNormalized = isNormFloatArray(color);
if (
(shouldNormalize && isNormalized) ||
(!shouldNormalize && !isNormalized)
)
return [...color, base];
if (shouldNormalize && !isNormalized)
return [...color.map((x) => x / 255), base];
return [...color.map((x) => x * 255), base];
}
if (isHex(color)) return hexToRgba(color, shouldNormalize);
console.warn(
'Only HEX, RGB, and RGBA are handled by this function. Returning white instead.'
);
return shouldNormalize ? [1, 1, 1, 1] : [255, 255, 255, 255];
};
/**
* Flip the key-value pairs of an object
* @param {object} obj - Object to be flipped
* @return {object} Flipped object
*/
export const flipObj = (obj) =>
Object.entries(obj).reduce((out, [key, value]) => {
if (out[value]) {
out[value] = [...out[value], key];
} else {
out[value] = key;
}
return out;
}, {});
export const rgbBrightness = (rgb) =>
0.21 * rgb[0] + 0.72 * rgb[1] + 0.07 * rgb[2];
You can’t perform that action at this time.