fix linear invert, add invert

dist/color.js

@@ -309,7 +309,7 @@ function hue(color) {
     if (hue < 0) return hue * 60 + 360;
     return hue * 60;
 }
-function invertLinear(color) {
+function invert(color) {
     return color.length === 3 ? [
         255 - color[0],
         255 - color[1],
@@ -321,6 +321,16 @@ function invertLinear(color) {
         color[3]
     ];
 }
+function invertLinear(color) {
+    const linear = linearRgb(color);
+    const inv = linear.map((x)=>~~(fromLinear(1 - x) * 255));
+    return color.length === 3 ? inv : [
+        inv[0],
+        inv[1],
+        inv[2],
+        color[3]
+    ];
+}
 function invertValue(color) {
     const conv = hsv(color);
     conv[2] = 100 - conv[2];
@@ -447,6 +457,7 @@ export { hex as hex };
 export { hsl as hsl };
 export { hsv as hsv };
 export { hue as hue };
+export { invert as invert };
 export { invertLinear as invertLinear };
 export { invertValue as invertValue };
 export { json as json };

examples/invert.ts

@@ -1,4 +1,4 @@
-import { invertLinear, invertValue, string, rgbaFromHex } from "../mod.ts";
+import { invertLinear, invertValue, string, rgbaFromHex, invert } from "../mod.ts";
 import { createCanvas } from "https://deno.land/x/[email protected]/mod.ts";
 
 const i = createCanvas(300, 100);
@@ -22,7 +22,7 @@ ctx.fillRect(100, 0, 200, 100);
 ctx.fillStyle = "black";
 ctx.fillText(`Linear Invert`, 100 + 50, 50, 100);
 
-const inv2 = invertValue(c);
+const inv2 = invert(c);
 ctx.fillStyle = string(inv2);
 ctx.fillRect(200, 0, 300, 100);
 

src/color.ts

@@ -1,6 +1,6 @@
 // Fully functional, specially for working with Images
 
-import { toLinear } from "./util/linear.ts";
+import { fromLinear, toLinear } from "./util/linear.ts";
 import { Color3, Color4, STANDARD_ILLUMINANT, labF, toHex } from "./common.ts";
 import { rgbFromHsv } from "./conversion.ts";
 
@@ -108,13 +108,22 @@ export function hue(color: Color3 | Color4) {
   return hue * 60;
 }
 
+/** Invert HSV */
+export function invert(color: Color3): Color3;
+export function invert(color: Color4): Color4;
+export function invert(color: Color3 | Color4): Color3 | Color4 {
+  return color.length === 3
+    ? [255 - color[0], 255 - color[1], 255 - color[2]]
+    : [255 - color[0], 255 - color[1], 255 - color[2], color[3]];
+}
+
 /** Invert a color linearly */
 export function invertLinear(color: Color3): Color3;
 export function invertLinear(color: Color4): Color4;
 export function invertLinear(color: Color3 | Color4): Color3 | Color4 {
-  return color.length === 3
-    ? [255 - color[0], 255 - color[1], 255 - color[2]]
-    : [255 - color[0], 255 - color[1], 255 - color[2], color[3]];
+  const linear = linearRgb(color);
+  const inv = linear.map((x) => ~~(fromLinear(1 - x) * 255)) as Color3;
+  return color.length === 3 ? inv : [inv[0], inv[1], inv[2], color[3]];
 }
 
 /** Bright colors darken, dark colors brighten. */
@@ -155,7 +164,7 @@ export function lightness(color: Color3 | Color4) {
   return (max(color) + min(color)) / 2;
 }
 /** Get linear rgb values */
-export function linearRgb(color: Color3 | Color4) {
+export function linearRgb(color: Color3 | Color4): Color3 {
   return [
     toLinear(color[0] / 255),
     toLinear(color[1] / 255),