docs(color): update generator tools

thi-ng · Jan 25, 2021 · ccf6a95 · ccf6a95
1 parent 8d948db
commit ccf6a95
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 16 deletions.
diff --git a/packages/color/tools/index.ts b/packages/color/tools/index.ts
@@ -5,26 +5,29 @@ import {
     ColorRangePreset,
     colorsFromTheme,
     ColorThemePartTuple,
+    COLOR_RANGES,
     cosineGradient,
     CosineGradientPreset,
-    GRADIENTS,
-    hsvaRgba,
+    COSINE_GRADIENTS,
     proximityHSV,
-    RANGES,
+    selectChannel,
     sortColors,
     swatchesH,
 } from "../src";
 
-Object.keys(GRADIENTS).forEach((id) => {
-    const fname = `export/gradient-${id}.svg`;
+Object.keys(COSINE_GRADIENTS).forEach((id) => {
+    const fname = `export/gradient-${id}-srgb.svg`;
     console.log(fname);
     writeFileSync(
         fname,
         serialize(
             svg(
                 { width: 500, height: 50, convert: true },
                 swatchesH(
-                    cosineGradient(100, GRADIENTS[<CosineGradientPreset>id]),
+                    cosineGradient(
+                        100,
+                        COSINE_GRADIENTS[<CosineGradientPreset>id]
+                    ),
                     5,
                     50
                 )
@@ -35,7 +38,7 @@ Object.keys(GRADIENTS).forEach((id) => {
 
 ////////////////////////////////////////////////////////////
 
-for (let id in RANGES) {
+for (let id in COLOR_RANGES) {
     writeFileSync(
         `export/swatches-green-${id}.svg`,
         serialize(
@@ -56,7 +59,7 @@ for (let id in RANGES) {
                             ),
                         ],
                         proximityHSV([0, 1, 1])
-                    ).map((x) => hsvaRgba([], x)),
+                    ),
                     5,
                     50
                 )
@@ -75,13 +78,11 @@ const theme = <ColorThemePartTuple[]>[
 
 const colors = [...colorsFromTheme(theme, { num: 200, variance: 0.05 })];
 
+sortColors(colors, selectChannel(0), true);
+
 const doc = svg(
     { width: 1000, height: 50, convert: true },
-    swatchesH(
-        colors.map((x) => hsvaRgba([], x)),
-        5,
-        50
-    )
+    swatchesH(colors, 5, 50)
 );
 
 writeFileSync("export/swatches-ex01.svg", serialize(doc));
diff --git a/packages/color/tools/oklab.ts b/packages/color/tools/oklab.ts
@@ -1,13 +1,12 @@
 import { serialize } from "@thi.ng/hiccup";
 import { svg } from "@thi.ng/hiccup-svg";
-import { TAU } from "@thi.ng/math";
 import { map, normRange, push, transduce } from "@thi.ng/transducers";
 import { writeFileSync } from "fs";
-import { Color, lchLab, oklab, swatchesH } from "../src";
+import { Color, lchLab, multiColorGradient, oklab, swatchesH } from "../src";
 
 for (let l of [0.5, 0.6, 0.7, 0.8, 0.9]) {
     const cols = transduce(
-        map((t) => oklab(lchLab(null, [l, 0.2, t * TAU]))),
+        map((t) => oklab(lchLab(null, [l, 0.2, t]))),
         push<Color>(),
         normRange(100, false)
     );
@@ -22,3 +21,25 @@ for (let l of [0.5, 0.6, 0.7, 0.8, 0.9]) {
         )
     );
 }
+
+const gradient = multiColorGradient({
+    num: 100,
+    stops: [
+        [0, lchLab([], [0.8, 0.2, 0])],
+        [1 / 3, lchLab([], [0.8, 0.2, 1 / 3])],
+        [1 / 2, lchLab([], [0.8, 0.2, 1 / 4])],
+        [2 / 3, lchLab([], [0.8, 0.2, 2 / 3])],
+        [1, lchLab([], [0.8, 0, 1])],
+    ],
+    tx: oklab,
+});
+
+writeFileSync(
+    `export/oklab-multigradient2.svg`,
+    serialize(
+        svg(
+            { width: 500, height: 50, convert: true },
+            swatchesH(gradient, 5, 50)
+        )
+    )
+);