Copy utils

src/utils/array.ts

@@ -0,0 +1,21 @@
+/** @internal */
+const setIndexAlias = (name: string, index: number, type: any) => {
+  if (!Object.prototype.hasOwnProperty.call(type.prototype, name)) {
+    Object.defineProperty(type.prototype, name, {
+      get() {
+        return this[index];
+      },
+      set(value) {
+        this[index] = value;
+      },
+    });
+  }
+};
+
+/** @internal */
+export const applyArrayPlugins = () => {
+  setIndexAlias('x', 0, Array);
+  setIndexAlias('y', 1, Array);
+  setIndexAlias('x', 0, Float32Array);
+  setIndexAlias('y', 1, Float32Array);
+};

src/utils/colors/hex.ts

@@ -0,0 +1,16 @@
+import { rgb255 } from './rgb255';
+
+import { vec3 } from 'gl-matrix';
+
+export const hex = (hex: string): vec3 => {
+  if (hex[0] === '#') {
+    hex = hex.slice(1);
+  }
+
+  const bigint = parseInt(hex, 16);
+  const r = (bigint >> 16) & 255;
+  const g = (bigint >> 8) & 255;
+  const b = bigint & 255;
+
+  return rgb255(r, g, b);
+};

src/utils/colors/hsl.ts

@@ -0,0 +1,35 @@
+import { rgb } from './rgb';
+
+import { vec3 } from 'gl-matrix';
+
+export const hsl = (hue: number, saturation: number, lightness: number): vec3 => {
+  hue /= 360;
+  saturation /= 100;
+  lightness /= 100;
+  let r, g, b;
+
+  if (saturation == 0) {
+    r = g = b = lightness;
+  } else {
+    const hue2rgb = (p: number, q: number, t: number) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+    };
+
+    const q =
+      lightness < 0.5
+        ? lightness * (1 + saturation)
+        : lightness + saturation - lightness * saturation;
+    const p = 2 * lightness - q;
+
+    r = hue2rgb(p, q, hue + 1 / 3);
+    g = hue2rgb(p, q, hue);
+    b = hue2rgb(p, q, hue - 1 / 3);
+  }
+
+  return rgb(r, g, b);
+};

src/utils/colors/rgb.ts

@@ -0,0 +1,3 @@
+import { vec3 } from 'gl-matrix';
+
+export const rgb = (r: number, g: number, b: number): vec3 => vec3.fromValues(r, g, b);

src/utils/colors/rgb255.ts

@@ -0,0 +1,4 @@
+import { vec3 } from 'gl-matrix';
+
+export const rgb255 = (r: number, g: number, b: number): vec3 =>
+  vec3.fromValues(r / 255, g / 255, b / 255);

src/utils/colors/rgba.ts

@@ -0,0 +1,4 @@
+import { vec4 } from 'gl-matrix';
+
+export const rgba = (r: number, g: number, b: number, a: number): vec4 =>
+  vec4.fromValues(r, g, b, a);

src/utils/colors/rgba255.ts

@@ -0,0 +1,4 @@
+import { vec4 } from 'gl-matrix';
+
+export const rgba255 = (r: number, g: number, b: number, a: number): vec4 =>
+  vec4.fromValues(r / 255, g / 255, b / 255, a / 255);

src/utils/mix.ts

@@ -0,0 +1 @@
+export const mix = (from: number, to: number, q: number) => from + (to - from) * q;