Add color helpers

src/helper/colors/hex.ts

@@ -0,0 +1,25 @@
+import { vec3 } from 'gl-matrix';
+import { rgb255 } from './rgb255';
+
+/**
+ * Return a color given in a hexadecimal form as a vec3.
+ *
+ * @param hex A hexadecimal color with (#ff0000) or without (ff0000)
+ * a leading hashmark.
+ *
+ * source: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
+ *
+ * @category Color
+ */
+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/helper/colors/hsl.ts

@@ -0,0 +1,45 @@
+import { vec3 } from 'gl-matrix';
+import { rgb } from './rgb';
+
+/**
+ * Return a color contained in a vec3.
+ *
+ * @param hue Should be between 0 and 360
+ * @param saturation Should be between 0 and 100
+ * @param lightness Should be between 0 and 100
+ *
+ * source: https://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion
+ *
+ * @category Color
+ */
+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/helper/colors/rgb.ts

@@ -0,0 +1,12 @@
+import { vec3 } from 'gl-matrix';
+
+/**
+ * Return a color contained in a vec3.
+ *
+ * @param r Should be between 0 and 1
+ * @param g Should be between 0 and 1
+ * @param b Should be between 0 and 1
+ *
+ * @category Color
+ */
+export const rgb = (r: number, g: number, b: number): vec3 => vec3.fromValues(r, g, b);

src/helper/colors/rgb255.ts

@@ -0,0 +1,13 @@
+import { vec3 } from 'gl-matrix';
+
+/**
+ * Return a color contained in a vec3.
+ *
+ * @param r Should be between 0 and 255
+ * @param g Should be between 0 and 255
+ * @param b Should be between 0 and 255
+ *
+ * @category Color
+ */
+export const rgb255 = (r: number, g: number, b: number): vec3 =>
+  vec3.fromValues(r / 255, g / 255, b / 255);

src/helper/colors/rgba.ts

@@ -0,0 +1,14 @@
+import { vec4 } from 'gl-matrix';
+
+/**
+ * Return a color with transparency contained in a vec4.
+ *
+ * @param r Should be between 0 and 1
+ * @param g Should be between 0 and 1
+ * @param b Should be between 0 and 1
+ * @param a Should be between 0 and 1
+ *
+ * @category Color
+ */
+export const rgba = (r: number, g: number, b: number, a: number): vec4 =>
+  vec4.fromValues(r, g, b, a);

src/helper/colors/rgba255.ts

@@ -0,0 +1,14 @@
+import { vec4 } from 'gl-matrix';
+
+/**
+ * Return a color with transparency contained in a vec4.
+ *
+ * @param r Should be between 0 and 255
+ * @param g Should be between 0 and 255
+ * @param b Should be between 0 and 255
+ * @param a Should be between 0 and 255
+ *
+ * @category Color
+ */
+export const rgba255 = (r: number, g: number, b: number, a: number): vec4 =>
+  vec4.fromValues(r / 255, g / 255, b / 255, a / 255);