@slithy/prim-lib 0.5.0 → 0.6.0

package/dist/index.d.ts

@@ -23,6 +23,7 @@ interface ShapeImageData {
  */
 interface ShapeInterface {
     bbox: Bbox;
+    tonalRange?: [number, number];
     /** cfg is rarely used by implementations; accepts Partial to keep call sites flexible. */
     mutate(cfg?: Partial<Cfg>): ShapeInterface;
     toSVG(): SVGElement | undefined;
@@ -43,6 +44,7 @@ interface Cfg {
     mutations: number;
     steps: number;
     fill: 'auto' | string;
+    outputFill?: string;
     computeSize: number;
     viewSize: number;
     allowUpscale?: boolean;
@@ -193,6 +195,7 @@ declare class Optimizer {
     _paused: boolean;
     _stepPlan: ShapeCtor[];
     _schedule: (fn: () => void) => void;
+    _rejectionStreak: number;
     constructor(original: Canvas, cfg: Cfg, schedule?: (fn: () => void) => void);
     start(): void;
     stop(): void;
@@ -303,6 +306,7 @@ interface NGonOptions {
     noise?: number;
     sizeRange?: [number, number];
     mutationScale?: number;
+    tonalRange?: [number, number];
 }
 declare function makeNGon(opts: NGonOptions): new (w: number, h: number) => ShapeInterface;
 interface RectOptions {
@@ -311,8 +315,31 @@ interface RectOptions {
     aspectRatio?: number;
     rotatable?: boolean;
     mutationScale?: number;
+    tonalRange?: [number, number];
 }
 declare function makeRect(opts?: Partial<RectOptions>): new (w: number, h: number) => ShapeInterface;
+interface CircleOptions {
+    sizeRange?: [number, number];
+    mutationScale?: number;
+    tonalRange?: [number, number];
+}
+declare function makeCircle(opts?: Partial<CircleOptions>): new (w: number, h: number) => ShapeInterface;
+interface EllipseOptions {
+    rxRange?: [number, number];
+    ryRange?: [number, number];
+    aspectRatio?: number;
+    mutationScale?: number;
+    tonalRange?: [number, number];
+}
+declare function makeEllipse(opts?: Partial<EllipseOptions>): new (w: number, h: number) => ShapeInterface;
+interface GlyphOptions {
+    char?: string;
+    fontFamily?: string;
+    sizeRange?: [number, number];
+    mutationScale?: number;
+    tonalRange?: [number, number];
+}
+declare function makeGlyph(opts?: Partial<GlyphOptions>): new (w: number, h: number) => ShapeInterface;
 declare class Debug extends Shape {
     constructor(w: number, h: number);
     render(ctx: CanvasRenderingContext2D): void;
@@ -341,4 +368,4 @@ interface ReplayResult {
 }
 declare function replayOutput(data: SerializedOutput): ReplayResult;
 
-export { type Bbox, Canvas, type Cfg, Circle, type Ctx2D, Debug, Ellipse, Glyph, 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, 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, stepDataToSVGElement, stepPerf };

package/dist/index.js

@@ -169,7 +169,7 @@ var Canvas = class _Canvas {
   }
   static empty(cfg, svg) {
     if (svg) {
-      return this.svgRoot(cfg.width, cfg.height, cfg.fill);
+      return this.svgRoot(cfg.width, cfg.height, cfg.outputFill ?? cfg.fill);
     } else {
       return new this(cfg.width, cfg.height).fill(cfg.fill);
     }
@@ -195,7 +195,11 @@ var Canvas = class _Canvas {
         const fullCfg = { ...cfg, width: cfg.width, height: cfg.height };
         const canvas = this.empty(fullCfg);
         canvas.ctx.drawImage(img, 0, 0, fullCfg.width, fullCfg.height);
-        if (cfg.fill == "auto") {
+        if (cfg.fill === "transparent") {
+          cfg.outputFill = "transparent";
+          cfg.fill = "auto";
+        }
+        if (cfg.fill === "auto") {
           cfg.fill = getFill(canvas.getImageData());
         }
         resolve(canvas);
@@ -217,6 +221,10 @@ var Canvas = class _Canvas {
     const fullCfg = { ...cfg, width: cfg.width, height: cfg.height };
     const canvas = this.empty(fullCfg);
     canvas.ctx.drawImage(bitmap, 0, 0, fullCfg.width, fullCfg.height);
+    if (cfg.fill === "transparent") {
+      cfg.outputFill = "transparent";
+      cfg.fill = "auto";
+    }
     if (cfg.fill === "auto") {
       cfg.fill = getFill(canvas.getImageData());
     }
@@ -355,6 +363,32 @@ 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 { left, top, width, height } = offset;
+      const targetData = state.target.getImageData();
+      const fw = targetData.width;
+      const fh = targetData.height;
+      let sum = 0, count = 0;
+      for (let sy = 0; sy < height; sy++) {
+        const fy = top + sy;
+        if (fy < 0 || fy >= fh) continue;
+        for (let sx = 0; sx < width; sx++) {
+          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];
+          count++;
+        }
+      }
+      if (count > 0) {
+        const luma = sum / count;
+        if (luma < tonalRange[0] || luma > tonalRange[1]) {
+          this.distance = Infinity;
+          return Promise.resolve(this);
+        }
+      }
+    }
     const t0 = performance.now();
     const shapeImageData = this.shape.rasterize(this.alpha).getImageData();
     const t1 = performance.now();
@@ -955,7 +989,9 @@ function makeNGon(opts) {
       static {
         __name(this, "NGonRegular");
       }
-      static _ngonOpts = { sides, regular: true, rotatable, noise, sizeRange, mutationScale, startAngle };
+      static _ngonOpts = { sides, regular: true, rotatable, noise, sizeRange, mutationScale, startAngle, tonalRange: opts.tonalRange };
+      static _shapeSpec = { f: "ngon", o: NGonRegular._ngonOpts };
+      tonalRange;
       center;
       r;
       angle;
@@ -963,6 +999,7 @@ function makeNGon(opts) {
       _cachedPoints;
       constructor(w, h) {
         super(w, h);
+        this.tonalRange = opts.tonalRange;
         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;
@@ -1058,10 +1095,13 @@ function makeNGon(opts) {
       static {
         __name(this, "NGonIrregular");
       }
-      static _ngonOpts = { sides, regular: false, convex, sizeRange, mutationScale };
+      static _ngonOpts = { sides, regular: false, convex, sizeRange, mutationScale, tonalRange: opts.tonalRange };
+      static _shapeSpec = { f: "ngon", o: NGonIrregular._ngonOpts };
+      tonalRange;
       points;
       constructor(w, h) {
         super(w, h);
+        this.tonalRange = opts.tonalRange;
         const first = Shape.randomPoint(w, h);
         this.points = [first];
         for (let i = 1; i < sides; i++) {
@@ -1133,14 +1173,16 @@ function makeRect(opts) {
     static {
       __name(this, "Rect");
     }
-    static _rectOpts = { widthRange, heightRange, aspectRatio, rotatable, mutationScale };
-    static _shapeSpec = { f: "rect" };
+    static _rectOpts = { widthRange, heightRange, aspectRatio, rotatable, mutationScale, tonalRange: opts?.tonalRange };
+    static _shapeSpec = { f: "rect", o: Rect._rectOpts };
+    tonalRange;
     center;
     hw;
     hh;
     angle;
     constructor(w, h) {
       super(w, h);
+      this.tonalRange = opts?.tonalRange;
       this.center = Shape.randomPoint(w, h);
       this.hw = widthRange[0] + ~~(Math.random() * (widthRange[1] - widthRange[0]));
       if (aspectRatio !== void 0) {
@@ -1246,6 +1288,229 @@ function makeRect(opts) {
   return Rect;
 }
 __name(makeRect, "makeRect");
+function makeCircle(opts) {
+  const sizeRange = opts?.sizeRange ?? [1, 20];
+  const mutationScale = opts?.mutationScale ?? 20;
+  class MadeCircle extends Shape {
+    static {
+      __name(this, "MadeCircle");
+    }
+    static _circleOpts = { sizeRange, mutationScale, tonalRange: opts?.tonalRange };
+    static _shapeSpec = { f: "circle", o: MadeCircle._circleOpts };
+    tonalRange;
+    center;
+    r;
+    constructor(w, h) {
+      super(w, h);
+      this.tonalRange = opts?.tonalRange;
+      this.center = Shape.randomPoint(w, h);
+      this.r = Math.max(1, sizeRange[0] + ~~(Math.random() * (sizeRange[1] - sizeRange[0])));
+      this.computeBbox();
+    }
+    computeBbox() {
+      this.bbox = {
+        left: this.center[0] - this.r,
+        top: this.center[1] - this.r,
+        width: 2 * this.r || 1,
+        height: 2 * this.r || 1
+      };
+      return this;
+    }
+    render(ctx) {
+      ctx.beginPath();
+      ctx.arc(this.center[0], this.center[1], this.r, 0, 2 * Math.PI);
+      ctx.fill();
+    }
+    toSVG() {
+      const node = document.createElementNS(SVGNS, "circle");
+      node.setAttribute("cx", String(this.center[0]));
+      node.setAttribute("cy", String(this.center[1]));
+      node.setAttribute("r", String(this.r));
+      return node;
+    }
+    toData(a, c) {
+      return { t: "c", a, c, cx: this.center[0], cy: this.center[1], r: this.r };
+    }
+    mutate(_cfg) {
+      const clone = new MadeCircle(0, 0);
+      clone.center = [this.center[0], this.center[1]];
+      clone.r = this.r;
+      switch (Math.floor(Math.random() * 2)) {
+        case 0: {
+          const angle = Math.random() * 2 * Math.PI;
+          const d = Math.random() * mutationScale;
+          clone.center[0] += ~~(d * Math.cos(angle));
+          clone.center[1] += ~~(d * Math.sin(angle));
+          break;
+        }
+        case 1:
+          clone.r += (Math.random() - 0.5) * mutationScale;
+          clone.r = Math.max(1, ~~clone.r);
+          break;
+      }
+      return clone.computeBbox();
+    }
+  }
+  return MadeCircle;
+}
+__name(makeCircle, "makeCircle");
+function makeEllipse(opts) {
+  const rxRange = opts?.rxRange ?? [1, 20];
+  const ryRange = opts?.ryRange ?? [1, 20];
+  const aspectRatio = opts?.aspectRatio;
+  const mutationScale = opts?.mutationScale ?? 20;
+  class MadeEllipse extends Shape {
+    static {
+      __name(this, "MadeEllipse");
+    }
+    static _ellipseOpts = { rxRange, ryRange, aspectRatio, mutationScale, tonalRange: opts?.tonalRange };
+    static _shapeSpec = { f: "ellipse", o: MadeEllipse._ellipseOpts };
+    tonalRange;
+    center;
+    rx;
+    ry;
+    constructor(w, h) {
+      super(w, h);
+      this.tonalRange = opts?.tonalRange;
+      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])));
+      this.computeBbox();
+    }
+    computeBbox() {
+      this.bbox = {
+        left: this.center[0] - this.rx,
+        top: this.center[1] - this.ry,
+        width: 2 * this.rx || 1,
+        height: 2 * this.ry || 1
+      };
+      return this;
+    }
+    render(ctx) {
+      ctx.beginPath();
+      ctx.ellipse(this.center[0], this.center[1], this.rx, this.ry, 0, 0, 2 * Math.PI, false);
+      ctx.fill();
+    }
+    toSVG() {
+      const node = document.createElementNS(SVGNS, "ellipse");
+      node.setAttribute("cx", String(this.center[0]));
+      node.setAttribute("cy", String(this.center[1]));
+      node.setAttribute("rx", String(this.rx));
+      node.setAttribute("ry", String(this.ry));
+      return node;
+    }
+    toData(a, c) {
+      return { t: "e", a, c, cx: this.center[0], cy: this.center[1], rx: this.rx, ry: this.ry };
+    }
+    mutate(_cfg) {
+      const clone = new MadeEllipse(0, 0);
+      clone.center = [this.center[0], this.center[1]];
+      clone.rx = this.rx;
+      clone.ry = this.ry;
+      const mutCount = aspectRatio === void 0 ? 3 : 2;
+      switch (Math.floor(Math.random() * mutCount)) {
+        case 0: {
+          const angle = Math.random() * 2 * Math.PI;
+          const d = Math.random() * mutationScale;
+          clone.center[0] += ~~(d * Math.cos(angle));
+          clone.center[1] += ~~(d * Math.sin(angle));
+          break;
+        }
+        case 1:
+          clone.rx += (Math.random() - 0.5) * mutationScale;
+          clone.rx = Math.max(1, ~~clone.rx);
+          if (aspectRatio !== void 0) {
+            clone.ry = Math.max(1, Math.round(clone.rx / aspectRatio));
+          }
+          break;
+        case 2:
+          clone.ry += (Math.random() - 0.5) * mutationScale;
+          clone.ry = Math.max(1, ~~clone.ry);
+          break;
+      }
+      return clone.computeBbox();
+    }
+  }
+  return MadeEllipse;
+}
+__name(makeEllipse, "makeEllipse");
+function makeGlyph(opts) {
+  const char = opts?.char ?? "\u263A";
+  const fontFamily = opts?.fontFamily ?? "sans-serif";
+  const sizeRange = opts?.sizeRange ?? [10, 30];
+  const mutationScale = opts?.mutationScale ?? 20;
+  class MadeGlyph extends Shape {
+    static {
+      __name(this, "MadeGlyph");
+    }
+    static _glyphOpts = { char, fontFamily, sizeRange, mutationScale, tonalRange: opts?.tonalRange };
+    static _shapeSpec = { f: "glyph", o: MadeGlyph._glyphOpts };
+    tonalRange;
+    center;
+    fontSize;
+    constructor(w, h) {
+      super(w, h);
+      this.tonalRange = opts?.tonalRange;
+      this.center = Shape.randomPoint(w, h);
+      this.fontSize = Math.max(sizeRange[0], sizeRange[0] + ~~(Math.random() * (sizeRange[1] - sizeRange[0])));
+      this.computeBbox();
+    }
+    computeBbox() {
+      const tmp = new Canvas(1, 1);
+      tmp.ctx.font = `${this.fontSize}px ${fontFamily}`;
+      const w = ~~tmp.ctx.measureText(char).width;
+      this.bbox = {
+        left: ~~(this.center[0] - w / 2),
+        top: ~~(this.center[1] - this.fontSize / 2),
+        width: w || 1,
+        height: this.fontSize
+      };
+      return this;
+    }
+    render(ctx) {
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.font = `${this.fontSize}px ${fontFamily}`;
+      ctx.fillText(char, this.center[0], this.center[1]);
+    }
+    toSVG() {
+      const text = document.createElementNS(SVGNS, "text");
+      text.appendChild(document.createTextNode(char));
+      text.setAttribute("text-anchor", "middle");
+      text.setAttribute("dominant-baseline", "central");
+      text.setAttribute("font-size", String(this.fontSize));
+      text.setAttribute("font-family", fontFamily);
+      text.setAttribute("x", String(this.center[0]));
+      text.setAttribute("y", String(this.center[1]));
+      return text;
+    }
+    toData(a, c) {
+      return { t: "sm", a, c, cx: this.center[0], cy: this.center[1], fs: this.fontSize, text: char };
+    }
+    mutate(_cfg) {
+      const clone = new MadeGlyph(0, 0);
+      clone.center = [this.center[0], this.center[1]];
+      clone.fontSize = this.fontSize;
+      switch (Math.floor(Math.random() * 2)) {
+        case 0: {
+          const angle = Math.random() * 2 * Math.PI;
+          const d = Math.random() * mutationScale;
+          clone.center[0] += ~~(d * Math.cos(angle));
+          clone.center[1] += ~~(d * Math.sin(angle));
+          break;
+        }
+        case 1: {
+          const delta = Math.round((Math.random() - 0.5) * (mutationScale * 0.2));
+          clone.fontSize = Math.max(sizeRange[0], Math.min(sizeRange[1], clone.fontSize + delta));
+          break;
+        }
+      }
+      return clone.computeBbox();
+    }
+  }
+  return MadeGlyph;
+}
+__name(makeGlyph, "makeGlyph");
 var Debug = class extends Shape {
   static {
     __name(this, "Debug");
@@ -1289,12 +1554,14 @@ var Optimizer = class {
   _paused;
   _stepPlan;
   _schedule;
+  _rejectionStreak;
   constructor(original, cfg, schedule = (fn) => requestAnimationFrame(fn)) {
     this.cfg = cfg;
     this.state = new State(original, Canvas.empty(cfg));
     this._steps = 0;
     this._stopped = false;
     this._paused = false;
+    this._rejectionStreak = 0;
     this.onStep = () => {
     };
     this._stepPlan = buildStepPlan(cfg);
@@ -1318,7 +1585,13 @@ var Optimizer = class {
     }
   }
   _addShape() {
-    this._findBestStep().then((step) => step ? this._optimizeStep(step) : null).then((step) => {
+    this._findBestStep().then((step) => step && step.distance < Infinity ? this._optimizeStep(step) : step).then((step) => {
+      if (step && step.distance === Infinity && this._rejectionStreak < this.cfg.shapes) {
+        this._rejectionStreak++;
+        this._continue();
+        return;
+      }
+      this._rejectionStreak = 0;
       this._steps++;
       if (step && step.distance < this.state.distance) {
         this.state = step.apply(this.state);
@@ -1564,6 +1837,9 @@ export {
   differenceToDistance,
   distanceToDifference,
   getFill,
+  makeCircle,
+  makeEllipse,
+  makeGlyph,
   makeNGon,
   makeRect,
   parseColor,

package/package.json

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