Implement color library

index.js

@@ -3,6 +3,7 @@
 import * as Vector from './js/vectorlib.js';
 import * as Bezier from './js/bezierlib.js';
 import * as Utils from './js/utillib.js';
+import {Color} from './js/colorlib.js';
 import * as Config from './config.js';
 
 // CONFIG
@@ -331,7 +332,6 @@ function fillSvg(){
 
 /** Insert individual rail paths, as well as creating signage data for each path*/
 function drawTracks(bezierData){
-    const trackCol = Utils.rgba2hex(Math.random(),Math.random(),Math.random(),1.0);
     if(trackNameCounting[bezierData.name] == null){
         trackNameCounting[bezierData.name] = 0;
     }else{
@@ -354,7 +354,7 @@ function drawTracks(bezierData){
     }else if(/\[track (diverging|through)\]/.test(bezierData.name)){
         bezierData.isPoint = true;
     }
-    bezierData.randomColor = Utils.rgba2hex(Math.random(), Math.random(), Math.random(), 1);
+    bezierData.randomColor = Color.random();
     for(let i=0; i+1<bezierData.points.length; i++){
         const bezStart = bezierData.points[i].position;
         const bezHandle1 = bezierData.points[i].h2;
@@ -382,7 +382,7 @@ function drawTracks(bezierData){
         //bezierData.points[i].element.setAttribute('data-grade', bezierData.points[i].grade);
         //bezierData.points[i].element.setAttribute('data-length', bezierData.points[i].bezLength);
         //bezierData.points[i].element.setAttribute('data-maxradius', 1/bezierData.points[i].curvature);
-        bezierData.points[i].randomColor = Utils.rgba2hex(Math.random(), Math.random(), Math.random(), 1);
+        bezierData.points[i].randomColor = Color.random();
         tracks.push([(bezStart.y+bezEnd.y)*0.5, bezierData.points[i].element]);
 
         // Curve tooltip

js/colorlib.js

@@ -0,0 +1,87 @@
+'use strict';
+
+export class Color{
+    r = 0;
+    g = 0;
+    b = 0;
+    a = 1;
+
+    /**
+     * @param {number|string} r Red component, or a hex notation string
+     * @param {number} g Green component
+     * @param {number} b Blue component
+     * @param {number} a Alpha component
+     */
+    constructor(r, g, b, a){
+        if(typeof(r) == 'string'){
+            r = r.replace('#', '');
+            if(r.length == 3) r = r.charAt(0)+r.charAt(0)+r.charAt(1)+r.charAt(1)+r.charAt(2)+r.charAt(2);
+            else if(r.length == 4) r = r.charAt(0)+r.charAt(0)+r.charAt(1)+r.charAt(1)+r.charAt(2)+r.charAt(2)+r.charAt(3)+r.charAt(3);
+            if(r.length == 6 || r.length == 8){
+                this.r = Number('0x'+r.substring(0,2))/255;
+                this.g = Number('0x'+r.substring(2,4))/255;
+                this.b = Number('0x'+r.substring(4,6))/255;
+            }
+            if(r.length == 8) this.a = Number('0x'+r.substring(6,8))/255;
+        }else{
+            this.r += r ?? this.r;
+            this.g += g ?? this.g;
+            this.b += b ?? this.b;
+            this.a *= a ?? this.a;
+        }
+    }
+
+    /** Returns the the html hexadecimal representation of this color */
+    get hex(){
+        return `#${
+            Math.round(Math.min(Math.max(this.r,0),1)*255).toString(16).padStart(2, '0').substring(0,2)
+        }${
+            Math.round(Math.min(Math.max(this.g,0),1)*255).toString(16).padStart(2, '0').substring(0,2)
+        }${
+            Math.round(Math.min(Math.max(this.b,0),1)*255).toString(16).padStart(2, '0').substring(0,2)
+        }${
+            Math.round(Math.min(Math.max(this.a,0),1)*255).toString(16).padStart(2, '0').substring(0,2)
+        }`;
+    }
+
+    /** Return a random color */
+    static random(){
+        return new Color(Math.random(), Math.random(), Math.random());
+    }
+
+    /**
+     * Blend between two colors in the sRGB colorspace
+     * @param {Color} colorA 
+     * @param {Color} colorB 
+     * @param {number} factor 
+     * @returns {Color}
+     */
+    static blendSrgb(colorA, colorB, factor){
+        if(factor <= 0) return colorA;
+        if(factor >= 1) return colorB;
+        let output = new Color();
+        output.r = colorA.r*(1-factor) + colorB.r*factor;
+        output.g = colorA.g*(1-factor) + colorB.g*factor;
+        output.b = colorA.b*(1-factor) + colorB.b*factor;
+        output.a = colorA.a*(1-factor) + colorB.a*factor;
+        return output;
+    }
+
+    /**
+     * Blend along a gradient of colors
+     * @param {Color[]} colorList 
+     * @param {number} factor 0-1 blend along `colorList`
+     * @param {string} colorspace
+     */
+    static blendGradient(colorList, factor, colorspace = 'srgb'){
+        if(colorList.length == 0) return new Color();
+        if(colorList.length == 1 || factor <= 0) return colorList[0];
+        if(factor >= 1) return colorList[colorList.length-1];
+
+        let factorIndex = (colorList.length-1) * factor;
+        switch(colorspace.toLowerCase()){
+            default:
+                return this.blendSrgb(colorList[Math.floor(factorIndex)], colorList[Math.ceil(factorIndex)], factorIndex % 1);
+        }
+    }
+}

js/utillib.js

@@ -17,22 +17,6 @@ export function randomRange(min=0.0, max=1.0){
     return Math.random()*(max-min) + min;
 }
 
-export function rgba2hex(r,g,b,a=1.0){
-    r = Math.min(Math.max(r,0),1);
-    g = Math.min(Math.max(g,0),1);
-    b = Math.min(Math.max(b,0),1);
-    a = Math.min(Math.max(a,0),1);
-    return `#${
-        Math.round(r*255).toString(16).padStart(2, '0').substring(0,2)
-    }${
-        Math.round(g*255).toString(16).padStart(2, '0').substring(0,2)
-    }${
-        Math.round(b*255).toString(16).padStart(2, '0').substring(0,2)
-    }${
-        Math.round(a*255).toString(16).padStart(2, '0').substring(0,2)
-    }`;
-}
-
 export function gradeToClass(grade){
     for(let j=0; j<gradeIncrements.length; j++){
         if(grade > gradeIncrements[j]){