@reely/colors 0.0.1 → 0.0.3

package/dist/lib/ImgSvgColorizeFilter.d.ts

@@ -0,0 +1,61 @@
+/**
+ * A class for applying and manipulating color transformations on an image using SVG filter-like operations.
+ *
+ * Inspired by:
+ *  - https://www.getfishtank.com/insights/change-svg-colors-using-css-filters
+ *  - https://codepen.io/sosuke/pen/Pjoqqp.
+ *  - https://stackoverflow.com/questions/42966641/how-to-transform-black-into-any-given-color-using-only-css-filters/43960991#43960991
+ */
+export declare class ImgSvgColorizeFilter {
+    r: number;
+    g: number;
+    b: number;
+    constructor(r: number, g: number, b: number);
+    toString(): string;
+    set(r: number, g: number, b: number): void;
+    hueRotate(angle?: number): void;
+    grayscale(value?: number): void;
+    sepia(value?: number): void;
+    saturate(value?: number): void;
+    multiply(matrix: number[]): void;
+    brightness(value?: number): void;
+    contrast(value?: number): void;
+    linear(slope?: number, intercept?: number): void;
+    invert(value?: number): void;
+    hsl(): {
+        h: number;
+        s: number;
+        l: number;
+    };
+    clamp(value: number): number;
+}
+export declare class Solver {
+    private target;
+    private targetHSL;
+    private readonly reusedColor;
+    constructor(target: ImgSvgColorizeFilter);
+    solve(): {
+        values: number[] | null;
+        loss: number;
+        filter: string;
+    };
+    solveWide(): {
+        loss: number;
+        values: number[] | null;
+    };
+    solveNarrow(wide: {
+        loss: number;
+        values: number[] | null;
+    }): {
+        values: number[] | null;
+        loss: number;
+    };
+    spsa(A: number, a: number[], c: number, values: number[] | null, iters: number): {
+        values: number[] | null;
+        loss: number;
+    };
+    loss(filters: number[]): number;
+    css(filters: number[]): string;
+}
+export declare function hexToRgb(hex: string): number[] | null;
+//# sourceMappingURL=ImgSvgColorizeFilter.d.ts.map

package/dist/lib/ImgSvgColorizeFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImgSvgColorizeFilter.d.ts","sourceRoot":"","sources":["../../src/lib/ImgSvgColorizeFilter.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AACH,qBAAa,oBAAoB;IACxB,CAAC,SAAK;IACN,CAAC,SAAK;IACN,CAAC,SAAK;gBAED,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;IAIpC,QAAQ,IAAI,MAAM;IAIlB,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI;IAM1C,SAAS,CAAC,KAAK,SAAI,GAAG,IAAI;IAkB1B,SAAS,CAAC,KAAK,SAAI,GAAG,IAAI;IAc1B,KAAK,CAAC,KAAK,SAAI,GAAG,IAAI;IActB,QAAQ,CAAC,KAAK,SAAI,GAAG,IAAI;IAczB,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI;IAShC,UAAU,CAAC,KAAK,SAAI,GAAG,IAAI;IAI3B,QAAQ,CAAC,KAAK,SAAI,GAAG,IAAI;IAIzB,MAAM,CAAC,KAAK,SAAI,EAAE,SAAS,SAAI,GAAG,IAAI;IAMtC,MAAM,CAAC,KAAK,SAAI,GAAG,IAAI;IAMvB,GAAG,IAAI;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;IAwC1C,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;CAQpC;AAED,qBAAa,MAAM;IACjB,OAAO,CAAC,MAAM,CAAuB;IACrC,OAAO,CAAC,SAAS,CAAsC;IACvD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAuB;gBAEvC,MAAM,EAAE,oBAAoB;IAMjC,KAAK,IAAI;QAAE,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;IASlE,SAAS,IAAI;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;KAAE;IAgBtD,WAAW,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;KAAE,GAAG;QAAE,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE;IAQvG,IAAI,CACT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EAAE,EACX,CAAC,EAAE,MAAM,EACT,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,EACvB,KAAK,EAAE,MAAM,GACZ;QAAE,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE;IAwDrC,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,MAAM;IAuB/B,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,MAAM;CAStC;AAED,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CASrD"}

package/dist/lib/ImgSvgColorizeFilter.js

@@ -0,0 +1,275 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
+'use strict';
+/**
+ * A class for applying and manipulating color transformations on an image using SVG filter-like operations.
+ *
+ * Inspired by:
+ *  - https://www.getfishtank.com/insights/change-svg-colors-using-css-filters
+ *  - https://codepen.io/sosuke/pen/Pjoqqp.
+ *  - https://stackoverflow.com/questions/42966641/how-to-transform-black-into-any-given-color-using-only-css-filters/43960991#43960991
+ */
+export class ImgSvgColorizeFilter {
+    r = 0;
+    g = 0;
+    b = 0;
+    constructor(r, g, b) {
+        this.set(r, g, b);
+    }
+    toString() {
+        return `rgb(${Math.round(this.r)}, ${Math.round(this.g)}, ${Math.round(this.b)})`;
+    }
+    set(r, g, b) {
+        this.r = this.clamp(r);
+        this.g = this.clamp(g);
+        this.b = this.clamp(b);
+    }
+    hueRotate(angle = 0) {
+        angle = (angle / 180) * Math.PI;
+        const sin = Math.sin(angle);
+        const cos = Math.cos(angle);
+        this.multiply([
+            0.213 + cos * 0.787 - sin * 0.213,
+            0.715 - cos * 0.715 - sin * 0.715,
+            0.072 - cos * 0.072 + sin * 0.928,
+            0.213 - cos * 0.213 + sin * 0.143,
+            0.715 + cos * 0.285 + sin * 0.14,
+            0.072 - cos * 0.072 - sin * 0.283,
+            0.213 - cos * 0.213 - sin * 0.787,
+            0.715 - cos * 0.715 + sin * 0.715,
+            0.072 + cos * 0.928 + sin * 0.072,
+        ]);
+    }
+    grayscale(value = 1) {
+        this.multiply([
+            0.2126 + 0.7874 * (1 - value),
+            0.7152 - 0.7152 * (1 - value),
+            0.0722 - 0.0722 * (1 - value),
+            0.2126 - 0.2126 * (1 - value),
+            0.7152 + 0.2848 * (1 - value),
+            0.0722 - 0.0722 * (1 - value),
+            0.2126 - 0.2126 * (1 - value),
+            0.7152 - 0.7152 * (1 - value),
+            0.0722 + 0.9278 * (1 - value),
+        ]);
+    }
+    sepia(value = 1) {
+        this.multiply([
+            0.393 + 0.607 * (1 - value),
+            0.769 - 0.769 * (1 - value),
+            0.189 - 0.189 * (1 - value),
+            0.349 - 0.349 * (1 - value),
+            0.686 + 0.314 * (1 - value),
+            0.168 - 0.168 * (1 - value),
+            0.272 - 0.272 * (1 - value),
+            0.534 - 0.534 * (1 - value),
+            0.131 + 0.869 * (1 - value),
+        ]);
+    }
+    saturate(value = 1) {
+        this.multiply([
+            0.213 + 0.787 * value,
+            0.715 - 0.715 * value,
+            0.072 - 0.072 * value,
+            0.213 - 0.213 * value,
+            0.715 + 0.285 * value,
+            0.072 - 0.072 * value,
+            0.213 - 0.213 * value,
+            0.715 - 0.715 * value,
+            0.072 + 0.928 * value,
+        ]);
+    }
+    multiply(matrix) {
+        const newR = this.clamp(this.r * matrix[0] + this.g * matrix[1] + this.b * matrix[2]);
+        const newG = this.clamp(this.r * matrix[3] + this.g * matrix[4] + this.b * matrix[5]);
+        const newB = this.clamp(this.r * matrix[6] + this.g * matrix[7] + this.b * matrix[8]);
+        this.r = newR;
+        this.g = newG;
+        this.b = newB;
+    }
+    brightness(value = 1) {
+        this.linear(value);
+    }
+    contrast(value = 1) {
+        this.linear(value, -(0.5 * value) + 0.5);
+    }
+    linear(slope = 1, intercept = 0) {
+        this.r = this.clamp(this.r * slope + intercept * 255);
+        this.g = this.clamp(this.g * slope + intercept * 255);
+        this.b = this.clamp(this.b * slope + intercept * 255);
+    }
+    invert(value = 1) {
+        this.r = this.clamp((value + (this.r / 255) * (1 - 2 * value)) * 255);
+        this.g = this.clamp((value + (this.g / 255) * (1 - 2 * value)) * 255);
+        this.b = this.clamp((value + (this.b / 255) * (1 - 2 * value)) * 255);
+    }
+    hsl() {
+        // Code taken from https://stackoverflow.com/a/9493060/2688027, licensed under CC BY-SA.
+        const r = this.r / 255;
+        const g = this.g / 255;
+        const b = this.b / 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        let h, s, 
+        // eslint-disable-next-line prefer-const
+        l = (max + min) / 2;
+        if (max === min) {
+            h = s = 0;
+        }
+        else {
+            const d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch (max) {
+                case r:
+                    h = (g - b) / d + (g < b ? 6 : 0);
+                    break;
+                case g:
+                    h = (b - r) / d + 2;
+                    break;
+                case b:
+                    h = (r - g) / d + 4;
+                    break;
+            }
+            h /= 6;
+        }
+        return {
+            h: h * 100,
+            s: s * 100,
+            l: l * 100,
+        };
+    }
+    clamp(value) {
+        if (value > 255) {
+            value = 255;
+        }
+        else if (value < 0) {
+            value = 0;
+        }
+        return value;
+    }
+}
+export class Solver {
+    target;
+    targetHSL;
+    reusedColor;
+    constructor(target) {
+        this.target = target;
+        this.targetHSL = target.hsl();
+        this.reusedColor = new ImgSvgColorizeFilter(0, 0, 0);
+    }
+    solve() {
+        const result = this.solveNarrow(this.solveWide());
+        return {
+            values: result.values,
+            loss: result.loss,
+            filter: this.css(result.values),
+        };
+    }
+    solveWide() {
+        const A = 5;
+        const c = 15;
+        const a = [60, 180, 18000, 600, 1.2, 1.2];
+        let best = { loss: Infinity, values: null };
+        for (let i = 0; best.loss > 25 && i < 3; i++) {
+            const initial = [50, 20, 3750, 50, 100, 100];
+            const result = this.spsa(A, a, c, initial, 1000);
+            if (result.loss < best.loss) {
+                best = result;
+            }
+        }
+        return best;
+    }
+    solveNarrow(wide) {
+        const A = wide.loss;
+        const c = 2;
+        const A1 = A + 1;
+        const a = [0.25 * A1, 0.25 * A1, A1, 0.25 * A1, 0.2 * A1, 0.2 * A1];
+        return this.spsa(A, a, c, wide.values, 500);
+    }
+    spsa(A, a, c, values, iters) {
+        const alpha = 1;
+        const gamma = 0.16666666666666666;
+        let best = null;
+        let bestLoss = Infinity;
+        const deltas = new Array(6);
+        const highArgs = new Array(6);
+        const lowArgs = new Array(6);
+        for (let k = 0; k < iters; k++) {
+            const ck = c / Math.pow(k + 1, gamma);
+            for (let i = 0; i < 6; i++) {
+                deltas[i] = Math.random() > 0.5 ? 1 : -1;
+                highArgs[i] = values[i] + ck * deltas[i];
+                lowArgs[i] = values[i] - ck * deltas[i];
+            }
+            const lossDiff = this.loss(highArgs) - this.loss(lowArgs);
+            for (let i = 0; i < 6; i++) {
+                const g = (lossDiff / (2 * ck)) * deltas[i];
+                const ak = a[i] / Math.pow(A + k + 1, alpha);
+                values[i] = fix(values[i] - ak * g, i);
+            }
+            const loss = this.loss(values);
+            if (loss < bestLoss) {
+                best = values.slice(0);
+                bestLoss = loss;
+            }
+        }
+        return { values: best, loss: bestLoss };
+        function fix(value, idx) {
+            let max = 100;
+            if (idx === 2 /* saturate */) {
+                max = 7500;
+            }
+            else if (idx === 4 /* brightness */ || idx === 5 /* contrast */) {
+                max = 200;
+            }
+            if (idx === 3 /* hue-rotate */) {
+                if (value > max) {
+                    value %= max;
+                }
+                else if (value < 0) {
+                    value = max + (value % max);
+                }
+            }
+            else if (value < 0) {
+                value = 0;
+            }
+            else if (value > max) {
+                value = max;
+            }
+            return value;
+        }
+    }
+    loss(filters) {
+        // Argument is array of percentages.
+        const color = this.reusedColor;
+        color.set(0, 0, 0);
+        color.invert(filters[0] / 100);
+        color.sepia(filters[1] / 100);
+        color.saturate(filters[2] / 100);
+        color.hueRotate(filters[3] * 3.6);
+        color.brightness(filters[4] / 100);
+        color.contrast(filters[5] / 100);
+        const colorHSL = color.hsl();
+        return (Math.abs(color.r - this.target.r) +
+            Math.abs(color.g - this.target.g) +
+            Math.abs(color.b - this.target.b) +
+            Math.abs(colorHSL.h - this.targetHSL.h) +
+            Math.abs(colorHSL.s - this.targetHSL.s) +
+            Math.abs(colorHSL.l - this.targetHSL.l));
+    }
+    css(filters) {
+        function fmt(idx, multiplier = 1) {
+            return Math.round(filters[idx] * multiplier);
+        }
+        return `filter: invert(${fmt(0)}%) sepia(${fmt(1)}%) saturate(${fmt(2)}%) hue-rotate(${fmt(3, 3.6)}deg) brightness(${fmt(4)}%) contrast(${fmt(5)}%);`;
+    }
+}
+export function hexToRgb(hex) {
+    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    hex = hex.replace(shorthandRegex, (m, r, g, b) => {
+        return r + r + g + g + b + b;
+    });
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reely/colors",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",