@slithy/prim-lib 0.6.0 → 0.7.0

package/dist/index.d.ts

@@ -24,6 +24,9 @@ interface ShapeImageData {
 interface ShapeInterface {
     bbox: Bbox;
     tonalRange?: [number, number];
+    saturationRange?: [number, number];
+    hueCenter?: number;
+    hueTolerance?: number;
     /** cfg is rarely used by implementations; accepts Partial to keep call sites flexible. */
     mutate(cfg?: Partial<Cfg>): ShapeInterface;
     toSVG(): SVGElement | undefined;
@@ -307,6 +310,9 @@ interface NGonOptions {
     sizeRange?: [number, number];
     mutationScale?: number;
     tonalRange?: [number, number];
+    saturationRange?: [number, number];
+    hueCenter?: number;
+    hueTolerance?: number;
 }
 declare function makeNGon(opts: NGonOptions): new (w: number, h: number) => ShapeInterface;
 interface RectOptions {
@@ -316,12 +322,18 @@ interface RectOptions {
     rotatable?: boolean;
     mutationScale?: number;
     tonalRange?: [number, number];
+    saturationRange?: [number, number];
+    hueCenter?: number;
+    hueTolerance?: number;
 }
 declare function makeRect(opts?: Partial<RectOptions>): new (w: number, h: number) => ShapeInterface;
 interface CircleOptions {
     sizeRange?: [number, number];
     mutationScale?: number;
     tonalRange?: [number, number];
+    saturationRange?: [number, number];
+    hueCenter?: number;
+    hueTolerance?: number;
 }
 declare function makeCircle(opts?: Partial<CircleOptions>): new (w: number, h: number) => ShapeInterface;
 interface EllipseOptions {
@@ -330,6 +342,9 @@ interface EllipseOptions {
     aspectRatio?: number;
     mutationScale?: number;
     tonalRange?: [number, number];
+    saturationRange?: [number, number];
+    hueCenter?: number;
+    hueTolerance?: number;
 }
 declare function makeEllipse(opts?: Partial<EllipseOptions>): new (w: number, h: number) => ShapeInterface;
 interface GlyphOptions {
@@ -338,6 +353,9 @@ interface GlyphOptions {
     sizeRange?: [number, number];
     mutationScale?: number;
     tonalRange?: [number, number];
+    saturationRange?: [number, number];
+    hueCenter?: number;
+    hueTolerance?: number;
 }
 declare function makeGlyph(opts?: Partial<GlyphOptions>): new (w: number, h: number) => ShapeInterface;
 declare class Debug extends Shape {
@@ -346,6 +364,7 @@ declare class Debug extends Shape {
 }
 
 declare const SVGNS = "http://www.w3.org/2000/svg";
+declare function rgbToHsl(r: number, g: number, b: number): [number, number, number];
 declare function parseColor(color: string): [number, number, number];
 
 declare function clamp(x: number, min: number, max: number): number;
@@ -368,4 +387,4 @@ interface ReplayResult {
 }
 declare function replayOutput(data: SerializedOutput): ReplayResult;
 
-export { type Bbox, Canvas, type Cfg, Circle, type CircleOptions, type Ctx2D, Debug, Ellipse, type EllipseOptions, Glyph, type GlyphOptions, Hexagon, type ImageDataLike, type NGonOptions, Optimizer, type Point, type PreCfg, type RGB, type RectOptions, Rectangle, type ReplayResult, SVGNS, type SerializedOutput, Shape, type ShapeImageData, type ShapeInterface, Square, State, Step, type StepData, Triangle, clamp, clampColor, computeColorAndDifferenceChange, difference, differenceToDistance, distanceToDifference, getFill, makeCircle, makeEllipse, makeGlyph, makeNGon, makeRect, parseColor, renderStepToCtx, replayOutput, stepDataToSVGElement, stepPerf };
+export { type Bbox, Canvas, type Cfg, Circle, type CircleOptions, type Ctx2D, Debug, Ellipse, type EllipseOptions, Glyph, type GlyphOptions, Hexagon, type ImageDataLike, type NGonOptions, Optimizer, type Point, type PreCfg, type RGB, type RectOptions, Rectangle, type ReplayResult, SVGNS, type SerializedOutput, Shape, type ShapeImageData, type ShapeInterface, Square, State, Step, type StepData, Triangle, clamp, clampColor, computeColorAndDifferenceChange, difference, differenceToDistance, distanceToDifference, getFill, makeCircle, makeEllipse, makeGlyph, makeNGon, makeRect, parseColor, renderStepToCtx, replayOutput, rgbToHsl, stepDataToSVGElement, stepPerf };

package/dist/index.js

@@ -3,6 +3,25 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 
 // src/util.ts
 var SVGNS = "http://www.w3.org/2000/svg";
+function rgbToHsl(r, g, b) {
+  const rn = r / 255, gn = g / 255, bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const l = (max + min) / 2;
+  if (max === min) return [0, 0, l * 100];
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h;
+  if (max === rn) {
+    h = (gn - bn) / d + (gn < bn ? 6 : 0);
+  } else if (max === gn) {
+    h = (bn - rn) / d + 2;
+  } else {
+    h = (rn - gn) / d + 4;
+  }
+  return [h * 60, s * 100, l * 100];
+}
+__name(rgbToHsl, "rgbToHsl");
 function parseColor(color) {
   const m = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
   if (!m) throw new Error(`Cannot parse color: ${color}`);
@@ -363,13 +382,13 @@ var Step = class _Step {
   compute(state) {
     const pixels = state.canvas.node.width * state.canvas.node.height;
     const offset = this.shape.bbox;
-    const tonalRange = this.shape.tonalRange;
-    if (tonalRange) {
+    const { tonalRange, saturationRange, hueCenter, hueTolerance } = this.shape;
+    if (tonalRange || saturationRange || hueCenter !== void 0 && hueTolerance !== void 0) {
       const { left, top, width, height } = offset;
       const targetData = state.target.getImageData();
       const fw = targetData.width;
       const fh = targetData.height;
-      let sum = 0, count = 0;
+      let rSum = 0, gSum = 0, bSum = 0, count = 0;
       for (let sy = 0; sy < height; sy++) {
         const fy = top + sy;
         if (fy < 0 || fy >= fh) continue;
@@ -377,15 +396,33 @@ var Step = class _Step {
           const fx = left + sx;
           if (fx < 0 || fx >= fw) continue;
           const i = 4 * (fx + fy * fw);
-          sum += 0.299 * targetData.data[i] + 0.587 * targetData.data[i + 1] + 0.114 * targetData.data[i + 2];
+          rSum += targetData.data[i];
+          gSum += targetData.data[i + 1];
+          bSum += targetData.data[i + 2];
           count++;
         }
       }
       if (count > 0) {
-        const luma = sum / count;
-        if (luma < tonalRange[0] || luma > tonalRange[1]) {
-          this.distance = Infinity;
-          return Promise.resolve(this);
+        if (tonalRange) {
+          const luma = (0.299 * rSum + 0.587 * gSum + 0.114 * bSum) / count;
+          if (luma < tonalRange[0] || luma > tonalRange[1]) {
+            this.distance = Infinity;
+            return Promise.resolve(this);
+          }
+        }
+        if (saturationRange || hueCenter !== void 0 && hueTolerance !== void 0) {
+          const [h, s] = rgbToHsl(rSum / count, gSum / count, bSum / count);
+          if (saturationRange && (s < saturationRange[0] || s > saturationRange[1])) {
+            this.distance = Infinity;
+            return Promise.resolve(this);
+          }
+          if (hueCenter !== void 0 && hueTolerance !== void 0) {
+            const diff = Math.abs((h - hueCenter + 180 + 360) % 360 - 180);
+            if (diff > hueTolerance) {
+              this.distance = Infinity;
+              return Promise.resolve(this);
+            }
+          }
         }
       }
     }
@@ -989,9 +1026,12 @@ function makeNGon(opts) {
       static {
         __name(this, "NGonRegular");
       }
-      static _ngonOpts = { sides, regular: true, rotatable, noise, sizeRange, mutationScale, startAngle, tonalRange: opts.tonalRange };
+      static _ngonOpts = { sides, regular: true, rotatable, noise, sizeRange, mutationScale, startAngle, tonalRange: opts.tonalRange, saturationRange: opts.saturationRange, hueCenter: opts.hueCenter, hueTolerance: opts.hueTolerance };
       static _shapeSpec = { f: "ngon", o: NGonRegular._ngonOpts };
       tonalRange;
+      saturationRange;
+      hueCenter;
+      hueTolerance;
       center;
       r;
       angle;
@@ -1000,6 +1040,9 @@ function makeNGon(opts) {
       constructor(w, h) {
         super(w, h);
         this.tonalRange = opts.tonalRange;
+        this.saturationRange = opts.saturationRange;
+        this.hueCenter = opts.hueCenter;
+        this.hueTolerance = opts.hueTolerance;
         this.center = Shape.randomPoint(w, h);
         this.r = Math.max(1, sizeRange[0] + ~~(Math.random() * (sizeRange[1] - sizeRange[0])));
         this.angle = rotatable ? Math.random() * (2 * Math.PI / sides) : startAngle;
@@ -1095,13 +1138,19 @@ function makeNGon(opts) {
       static {
         __name(this, "NGonIrregular");
       }
-      static _ngonOpts = { sides, regular: false, convex, sizeRange, mutationScale, tonalRange: opts.tonalRange };
+      static _ngonOpts = { sides, regular: false, convex, sizeRange, mutationScale, tonalRange: opts.tonalRange, saturationRange: opts.saturationRange, hueCenter: opts.hueCenter, hueTolerance: opts.hueTolerance };
       static _shapeSpec = { f: "ngon", o: NGonIrregular._ngonOpts };
       tonalRange;
+      saturationRange;
+      hueCenter;
+      hueTolerance;
       points;
       constructor(w, h) {
         super(w, h);
         this.tonalRange = opts.tonalRange;
+        this.saturationRange = opts.saturationRange;
+        this.hueCenter = opts.hueCenter;
+        this.hueTolerance = opts.hueTolerance;
         const first = Shape.randomPoint(w, h);
         this.points = [first];
         for (let i = 1; i < sides; i++) {
@@ -1173,9 +1222,12 @@ function makeRect(opts) {
     static {
       __name(this, "Rect");
     }
-    static _rectOpts = { widthRange, heightRange, aspectRatio, rotatable, mutationScale, tonalRange: opts?.tonalRange };
+    static _rectOpts = { widthRange, heightRange, aspectRatio, rotatable, mutationScale, tonalRange: opts?.tonalRange, saturationRange: opts?.saturationRange, hueCenter: opts?.hueCenter, hueTolerance: opts?.hueTolerance };
     static _shapeSpec = { f: "rect", o: Rect._rectOpts };
     tonalRange;
+    saturationRange;
+    hueCenter;
+    hueTolerance;
     center;
     hw;
     hh;
@@ -1183,6 +1235,9 @@ function makeRect(opts) {
     constructor(w, h) {
       super(w, h);
       this.tonalRange = opts?.tonalRange;
+      this.saturationRange = opts?.saturationRange;
+      this.hueCenter = opts?.hueCenter;
+      this.hueTolerance = opts?.hueTolerance;
       this.center = Shape.randomPoint(w, h);
       this.hw = widthRange[0] + ~~(Math.random() * (widthRange[1] - widthRange[0]));
       if (aspectRatio !== void 0) {
@@ -1295,14 +1350,20 @@ function makeCircle(opts) {
     static {
       __name(this, "MadeCircle");
     }
-    static _circleOpts = { sizeRange, mutationScale, tonalRange: opts?.tonalRange };
+    static _circleOpts = { sizeRange, mutationScale, tonalRange: opts?.tonalRange, saturationRange: opts?.saturationRange, hueCenter: opts?.hueCenter, hueTolerance: opts?.hueTolerance };
     static _shapeSpec = { f: "circle", o: MadeCircle._circleOpts };
     tonalRange;
+    saturationRange;
+    hueCenter;
+    hueTolerance;
     center;
     r;
     constructor(w, h) {
       super(w, h);
       this.tonalRange = opts?.tonalRange;
+      this.saturationRange = opts?.saturationRange;
+      this.hueCenter = opts?.hueCenter;
+      this.hueTolerance = opts?.hueTolerance;
       this.center = Shape.randomPoint(w, h);
       this.r = Math.max(1, sizeRange[0] + ~~(Math.random() * (sizeRange[1] - sizeRange[0])));
       this.computeBbox();
@@ -1363,15 +1424,21 @@ function makeEllipse(opts) {
     static {
       __name(this, "MadeEllipse");
     }
-    static _ellipseOpts = { rxRange, ryRange, aspectRatio, mutationScale, tonalRange: opts?.tonalRange };
+    static _ellipseOpts = { rxRange, ryRange, aspectRatio, mutationScale, tonalRange: opts?.tonalRange, saturationRange: opts?.saturationRange, hueCenter: opts?.hueCenter, hueTolerance: opts?.hueTolerance };
     static _shapeSpec = { f: "ellipse", o: MadeEllipse._ellipseOpts };
     tonalRange;
+    saturationRange;
+    hueCenter;
+    hueTolerance;
     center;
     rx;
     ry;
     constructor(w, h) {
       super(w, h);
       this.tonalRange = opts?.tonalRange;
+      this.saturationRange = opts?.saturationRange;
+      this.hueCenter = opts?.hueCenter;
+      this.hueTolerance = opts?.hueTolerance;
       this.center = Shape.randomPoint(w, h);
       this.rx = Math.max(1, rxRange[0] + ~~(Math.random() * (rxRange[1] - rxRange[0])));
       this.ry = aspectRatio !== void 0 ? Math.max(1, Math.round(this.rx / aspectRatio)) : Math.max(1, ryRange[0] + ~~(Math.random() * (ryRange[1] - ryRange[0])));
@@ -1443,14 +1510,20 @@ function makeGlyph(opts) {
     static {
       __name(this, "MadeGlyph");
     }
-    static _glyphOpts = { char, fontFamily, sizeRange, mutationScale, tonalRange: opts?.tonalRange };
+    static _glyphOpts = { char, fontFamily, sizeRange, mutationScale, tonalRange: opts?.tonalRange, saturationRange: opts?.saturationRange, hueCenter: opts?.hueCenter, hueTolerance: opts?.hueTolerance };
     static _shapeSpec = { f: "glyph", o: MadeGlyph._glyphOpts };
     tonalRange;
+    saturationRange;
+    hueCenter;
+    hueTolerance;
     center;
     fontSize;
     constructor(w, h) {
       super(w, h);
       this.tonalRange = opts?.tonalRange;
+      this.saturationRange = opts?.saturationRange;
+      this.hueCenter = opts?.hueCenter;
+      this.hueTolerance = opts?.hueTolerance;
       this.center = Shape.randomPoint(w, h);
       this.fontSize = Math.max(sizeRange[0], sizeRange[0] + ~~(Math.random() * (sizeRange[1] - sizeRange[0])));
       this.computeBbox();
@@ -1845,6 +1918,7 @@ export {
   parseColor,
   renderStepToCtx,
   replayOutput,
+  rgbToHsl,
   stepDataToSVGElement,
   stepPerf
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slithy/prim-lib",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Core engine for primitive-based image reconstruction.",
   "type": "module",
   "exports": {