@slithy/prim-lib 0.1.0 → 0.2.0

package/README.md

@@ -18,7 +18,7 @@ Reconstructs an image by iteratively placing geometric shapes. Each step evaluat
 ### Shapes
 
 - **`Shape`** — abstract base
-- **`Triangle`**, **`Rectangle`**, **`Ellipse`**, **`Hexagon`**, **`Smiley`**, **`Debug`**
+- **`Triangle`**, **`Rectangle`**, **`Ellipse`**, **`Square`**, **`Hexagon`**, **`Glyph`**, **`Debug`**
 
 ### Types
 
@@ -26,27 +26,71 @@ Reconstructs an image by iteratively placing geometric shapes. Each step evaluat
 
 ```ts
 interface Cfg {
-  width: number        // image width for computation (set by Canvas.original)
-  height: number       // image height for computation (set by Canvas.original)
-  steps: number        // total shapes to place
-  shapes: number       // candidate shapes evaluated per step
-  mutations: number    // hill-climb attempts per candidate
-  alpha: number        // starting shape opacity
-  mutateAlpha: boolean // whether opacity is mutated per candidate
-  computeSize: number  // max image dimension for pixel distance calculations
-  viewSize: number     // max image dimension for display canvas
-  scale?: number       // viewSize / computeSize ratio (set by Canvas.original)
+  width: number         // image width for computation (set by Canvas.original)
+  height: number        // image height for computation (set by Canvas.original)
+  steps: number         // total shapes to place
+  shapes: number        // candidate shapes evaluated per step
+  mutations: number     // hill-climb attempts per candidate
+  alpha: number         // starting shape opacity
+  mutateAlpha: boolean  // whether opacity is mutated per candidate
+  computeSize: number   // max image dimension for pixel distance calculations
+  viewSize: number      // max image dimension for display canvas
+  allowUpscale?: boolean // allow output larger than source image (default: false)
+  scale?: number        // viewSize / computeSize ratio (set by Canvas.original)
   shapeTypes: Array<new (w: number, h: number) => ShapeInterface>
   fill: 'auto' | string
 }
 ```
 
 - **`PreCfg`** — `Cfg` with optional `width`/`height`; used before image dimensions are known
-- **`ShapeInterface`** — structural interface for shapes
+- **`ShapeInterface`** — structural interface for shapes; includes `toData(alpha, color): StepData`
 - **`Bbox`**, **`Point`**, **`ImageDataLike`**, **`ShapeImageData`**
 
+**`RGB`** — `[number, number, number]` tuple
+
+**`StepData`** — discriminated union of serialized shape data, keyed by `t`:
+
+```ts
+type StepData =
+  | { t: 't';  a: number; c: RGB; pts: [number, number][] }       // Triangle
+  | { t: 'r';  a: number; c: RGB; pts: [number, number][] }       // Rectangle
+  | { t: 'e';  a: number; c: RGB; cx: number; cy: number; rx: number; ry: number } // Ellipse
+  | { t: 's';  a: number; c: RGB; cx: number; cy: number; r: number }              // Square
+  | { t: 'h';  a: number; c: RGB; cx: number; cy: number; r: number; angle: number } // Hexagon
+  | { t: 'sm'; a: number; c: RGB; cx: number; cy: number; fs: number; text: string } // Glyph
+```
+
+**`SerializedOutput`** — compact, storage-ready representation of a completed run:
+
+```ts
+interface SerializedOutput {
+  v: 1             // schema version
+  w: number        // compute width
+  h: number        // compute height
+  scale: number    // viewSize / computeSize ratio
+  fill: RGB        // background fill color
+  steps: StepData[]
+}
+```
+
+**`ReplayResult`** — returned by `replayOutput`:
+
+```ts
+interface ReplayResult {
+  raster: HTMLCanvasElement
+  svg: SVGSVGElement
+  svgString: string
+}
+```
+
+### Functions
+
+**`replayOutput(data: SerializedOutput): ReplayResult`** — reconstructs canvas and SVG natively from serialized output, without re-running the optimizer. Useful for restoring saved results from localStorage or a database.
+
 ### Utilities
 
+- **`getFill(data: ImageDataLike): string`** — computes a fill color (average of corner pixels) from image data
+- **`parseColor(str: string): RGB`** — parses `"rgb(r, g, b)"` to an `[r, g, b]` tuple
 - **`stepPerf`** — accumulator for profiling rasterize vs pixel math time per step
 
 ## Differences from primitive.js
@@ -60,9 +104,11 @@ interface Cfg {
 - **Workers removed** — the original included worker stubs (`importScripts()`-based, not ESM-compatible). Workers were investigated and benchmarked; after the canvas reuse optimization, a batched worker implementation matched single-threaded performance. Workers are not used
 - **Architecture split** — the original is a single-layer library. Here, `prim-lib` is the pure algorithm (no knowledge of how images arrive or where results go), and `prim-interface` is the adapter that wires it to the browser
 - **`PreCfg` / `Cfg` distinction** — `Canvas.original()` accepts `PreCfg` (optional `width`/`height`) and resolves to a fully-populated `Cfg`, making the config lifecycle explicit in the types
+- **Serialization** — `StepData` / `SerializedOutput` allow completed runs to be stored compactly and replayed via `replayOutput()` without re-running the optimizer
 
 ## Architecture notes
 
 - `Shape.rasterize()` reuses a single module-level canvas (`_rasterCanvas`) grown to the max shape size seen; avoids per-call `createElement('canvas')` which was the dominant cost (27x speedup)
 - `Cfg.shapeTypes` holds shape constructors; shapes are chosen randomly each step
 - `PreCfg` exists to bridge the gap between call time (dimensions unknown) and runtime (dimensions set by `Canvas.original()`)
+- `Canvas.svgRoot()` is a static helper shared by `Canvas.empty()` and `replayOutput()` to create the SVG root with clip path and background fill

package/dist/index.d.ts

@@ -26,6 +26,7 @@ interface ShapeInterface {
     /** cfg is rarely used by implementations; accepts Partial to keep call sites flexible. */
     mutate(cfg?: Partial<Cfg>): ShapeInterface;
     toSVG(): SVGElement | undefined;
+    toData(alpha: number, color: RGB): StepData;
     rasterize(alpha: number): {
         getImageData(): ImageDataLike;
     };
@@ -43,6 +44,7 @@ interface Cfg {
     fill: 'auto' | string;
     computeSize: number;
     viewSize: number;
+    allowUpscale?: boolean;
     scale?: number;
 }
 /**
@@ -53,6 +55,57 @@ type PreCfg = Omit<Cfg, 'width' | 'height'> & {
     width?: number;
     height?: number;
 };
+type RGB = [number, number, number];
+type StepData = {
+    t: 't';
+    a: number;
+    c: RGB;
+    pts: [number, number][];
+} | {
+    t: 'r';
+    a: number;
+    c: RGB;
+    pts: [number, number][];
+} | {
+    t: 'e';
+    a: number;
+    c: RGB;
+    cx: number;
+    cy: number;
+    rx: number;
+    ry: number;
+} | {
+    t: 's';
+    a: number;
+    c: RGB;
+    cx: number;
+    cy: number;
+    r: number;
+} | {
+    t: 'h';
+    a: number;
+    c: RGB;
+    cx: number;
+    cy: number;
+    r: number;
+    angle: number;
+} | {
+    t: 'sm';
+    a: number;
+    c: RGB;
+    cx: number;
+    cy: number;
+    fs: number;
+    text: string;
+};
+interface SerializedOutput {
+    v: 1;
+    w: number;
+    h: number;
+    scale: number;
+    fill: RGB;
+    steps: StepData[];
+}
 
 interface DrawableStep {
     alpha: number;
@@ -65,6 +118,7 @@ declare class Canvas {
     node: HTMLCanvasElement;
     ctx: CanvasRenderingContext2D;
     _imageData: ImageData | null;
+    static svgRoot(width: number, height: number, fill: string): SVGSVGElement;
     static empty(cfg: Cfg, svg: true): SVGSVGElement;
     static empty(cfg: Cfg, svg?: false): Canvas;
     static original(url: string, cfg: PreCfg): Promise<Canvas>;
@@ -99,6 +153,7 @@ declare class Step {
     distance: number;
     constructor(shape: ShapeInterface, cfg: Cfg);
     toSVG(): SVGElement;
+    serialize(): StepData;
     apply(state: State): State;
     compute(state: State): Promise<Step>;
     mutate(): Step;
@@ -129,6 +184,7 @@ declare class Shape implements ShapeInterface {
     constructor(_w: number, _h: number);
     mutate(_cfg?: Partial<Cfg>): ShapeInterface;
     toSVG(): SVGElement | undefined;
+    toData(_alpha: number, _color: RGB): StepData;
     rasterize(alpha: number): {
         getImageData(): ImageDataLike;
     };
@@ -147,10 +203,12 @@ declare class Polygon extends Shape {
 declare class Triangle extends Polygon {
     constructor(w: number, h: number);
     protected _cloneEmpty(): Triangle;
+    toData(a: number, c: RGB): StepData;
 }
 declare class Rectangle extends Polygon {
     constructor(w: number, h: number);
     protected _cloneEmpty(): Rectangle;
+    toData(a: number, c: RGB): StepData;
     mutate(_cfg?: Partial<Cfg>): ShapeInterface;
     _createPoints(w: number, h: number, _count: number): Point[];
 }
@@ -161,18 +219,30 @@ declare class Ellipse extends Shape {
     constructor(w: number, h: number);
     render(ctx: CanvasRenderingContext2D): void;
     toSVG(): SVGElement;
+    toData(a: number, c: RGB): StepData;
     mutate(_cfg?: Partial<Cfg>): ShapeInterface;
     computeBbox(): this;
 }
-declare class Smiley extends Shape {
+declare class Glyph extends Shape {
     center: Point;
     text: string;
     fontSize: number;
     constructor(w: number, h: number, text?: string);
     computeBbox(): this;
     render(ctx: CanvasRenderingContext2D): void;
-    mutate(_cfg?: Partial<Cfg>): Smiley;
+    mutate(_cfg?: Partial<Cfg>): Glyph;
+    toSVG(): SVGElement;
+    toData(a: number, c: RGB): StepData;
+}
+declare class Square extends Shape {
+    center: Point;
+    r: number;
+    constructor(w: number, h: number);
+    computeBbox(): this;
+    render(ctx: CanvasRenderingContext2D): void;
     toSVG(): SVGElement;
+    toData(a: number, c: RGB): StepData;
+    mutate(_cfg?: Partial<Cfg>): ShapeInterface;
 }
 declare class Hexagon extends Shape {
     center: Point;
@@ -184,6 +254,7 @@ declare class Hexagon extends Shape {
     computeBbox(): this;
     render(ctx: CanvasRenderingContext2D): void;
     toSVG(): SVGElement;
+    toData(a: number, c: RGB): StepData;
     mutate(_cfg?: Partial<Cfg>): ShapeInterface;
 }
 declare class Debug extends Shape {
@@ -192,15 +263,24 @@ declare class Debug extends Shape {
 }
 
 declare const SVGNS = "http://www.w3.org/2000/svg";
+declare function parseColor(color: string): [number, number, number];
 
 declare function clamp(x: number, min: number, max: number): number;
 declare function clampColor(x: number): number;
 declare function distanceToDifference(distance: number, pixels: number): number;
 declare function differenceToDistance(difference: number, pixels: number): number;
 declare function difference(data: ImageDataLike, dataOther: ImageDataLike): number;
+declare function getFill(data: ImageDataLike): string;
 declare function computeColorAndDifferenceChange(offset: Bbox, imageData: ShapeImageData, alpha: number): {
     color: string;
     differenceChange: number;
 };
 
-export { type Bbox, Canvas, type Cfg, Debug, Ellipse, Hexagon, type ImageDataLike, Optimizer, type Point, type PreCfg, Rectangle, SVGNS, Shape, type ShapeImageData, type ShapeInterface, Smiley, State, Step, Triangle, clamp, clampColor, computeColorAndDifferenceChange, difference, differenceToDistance, distanceToDifference, stepPerf };
+interface ReplayResult {
+    raster: HTMLCanvasElement;
+    svg: SVGSVGElement;
+    svgString: string;
+}
+declare function replayOutput(data: SerializedOutput): ReplayResult;
+
+export { type Bbox, Canvas, type Cfg, Debug, Ellipse, Glyph, Hexagon, type ImageDataLike, Optimizer, type Point, type PreCfg, type RGB, Rectangle, type ReplayResult, SVGNS, type SerializedOutput, Shape, type ShapeImageData, type ShapeInterface, Square, State, Step, type StepData, Triangle, clamp, clampColor, computeColorAndDifferenceChange, difference, differenceToDistance, distanceToDifference, getFill, parseColor, replayOutput, stepPerf };

package/dist/index.js

@@ -1,5 +1,10 @@
 // src/util.ts
 var SVGNS = "http://www.w3.org/2000/svg";
+function parseColor(color) {
+  const m = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+  if (!m) throw new Error(`Cannot parse color: ${color}`);
+  return [parseInt(m[1]), parseInt(m[2]), parseInt(m[3])];
+}
 function clamp(x, min, max) {
   return Math.max(min, Math.min(max, x));
 }
@@ -22,6 +27,28 @@ function difference(data, dataOther) {
   }
   return sum;
 }
+function getFill(data) {
+  const w = data.width;
+  const h = data.height;
+  const d = data.data;
+  let rgb = [0, 0, 0];
+  let count = 0;
+  let i = 0;
+  for (let x = 0; x < w; x++) {
+    for (let y = 0; y < h; y++) {
+      if (x > 0 && y > 0 && x < w - 1 && y < h - 1) {
+        continue;
+      }
+      count++;
+      i = 4 * (x + y * w);
+      rgb[0] += d[i];
+      rgb[1] += d[i + 1];
+      rgb[2] += d[i + 2];
+    }
+  }
+  rgb = rgb.map((x) => ~~(x / count)).map(clampColor);
+  return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
+}
 function computeColorAndDifferenceChange(offset, imageData, alpha) {
   const { shape, current, target } = imageData;
   const shapeData = shape.data;
@@ -91,31 +118,9 @@ function computeColorAndDifferenceChange(offset, imageData, alpha) {
 }
 
 // src/canvas.ts
-function getScale(width, height, limit) {
-  return Math.max(width / limit, height / limit, 1);
-}
-function getFill(canvas) {
-  const data = canvas.getImageData();
-  const w = data.width;
-  const h = data.height;
-  const d = data.data;
-  let rgb = [0, 0, 0];
-  let count = 0;
-  let i = 0;
-  for (let x = 0; x < w; x++) {
-    for (let y = 0; y < h; y++) {
-      if (x > 0 && y > 0 && x < w - 1 && y < h - 1) {
-        continue;
-      }
-      count++;
-      i = 4 * (x + y * w);
-      rgb[0] += d[i];
-      rgb[1] += d[i + 1];
-      rgb[2] += d[i + 2];
-    }
-  }
-  rgb = rgb.map((x) => ~~(x / count)).map(clampColor);
-  return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
+function getScale(width, height, limit, allowUpscale = false) {
+  const scale = Math.max(width / limit, height / limit);
+  return allowUpscale ? scale : Math.max(scale, 1);
 }
 function svgRect(w, h) {
   const node = document.createElementNS(SVGNS, "rect");
@@ -129,23 +134,26 @@ var Canvas = class _Canvas {
   node;
   ctx;
   _imageData;
+  static svgRoot(width, height, fill) {
+    const node = document.createElementNS(SVGNS, "svg");
+    node.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    node.setAttribute("clip-path", "url(#clip)");
+    const defs = document.createElementNS(SVGNS, "defs");
+    node.appendChild(defs);
+    const cp = document.createElementNS(SVGNS, "clipPath");
+    defs.appendChild(cp);
+    cp.setAttribute("id", "clip");
+    cp.setAttribute("clipPathUnits", "objectBoundingBox");
+    let rect = svgRect(width, height);
+    cp.appendChild(rect);
+    rect = svgRect(width, height);
+    rect.setAttribute("fill", fill);
+    node.appendChild(rect);
+    return node;
+  }
   static empty(cfg, svg) {
     if (svg) {
-      const node = document.createElementNS(SVGNS, "svg");
-      node.setAttribute("viewBox", `0 0 ${cfg.width} ${cfg.height}`);
-      node.setAttribute("clip-path", "url(#clip)");
-      const defs = document.createElementNS(SVGNS, "defs");
-      node.appendChild(defs);
-      const cp = document.createElementNS(SVGNS, "clipPath");
-      defs.appendChild(cp);
-      cp.setAttribute("id", "clip");
-      cp.setAttribute("clipPathUnits", "objectBoundingBox");
-      let rect = svgRect(cfg.width, cfg.height);
-      cp.appendChild(rect);
-      rect = svgRect(cfg.width, cfg.height);
-      rect.setAttribute("fill", cfg.fill);
-      node.appendChild(rect);
-      return node;
+      return this.svgRoot(cfg.width, cfg.height, cfg.fill);
     } else {
       return new this(cfg.width, cfg.height).fill(cfg.fill);
     }
@@ -161,16 +169,16 @@ var Canvas = class _Canvas {
       img.onload = () => {
         const w = img.naturalWidth;
         const h = img.naturalHeight;
-        const computeScale = getScale(w, h, cfg.computeSize);
+        const computeScale = getScale(w, h, cfg.computeSize, cfg.allowUpscale);
         cfg.width = w / computeScale;
         cfg.height = h / computeScale;
-        const viewScale = getScale(w, h, cfg.viewSize);
+        const viewScale = getScale(w, h, cfg.viewSize, cfg.allowUpscale);
         cfg.scale = computeScale / viewScale;
         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") {
-          cfg.fill = getFill(canvas);
+          cfg.fill = getFill(canvas.getImageData());
         }
         resolve(canvas);
       };
@@ -201,7 +209,7 @@ var Canvas = class _Canvas {
     ctx.arc(w * 3 / 4, h / 2, w / 7, 0, 2 * Math.PI, true);
     ctx.fill();
     if (cfg.fill == "auto") {
-      cfg.fill = getFill(canvas);
+      cfg.fill = getFill(canvas.getImageData());
     }
     return canvas;
   }
@@ -288,6 +296,9 @@ var Step = class _Step {
     node.setAttribute("fill-opacity", this.alpha.toFixed(2));
     return node;
   }
+  serialize() {
+    return this.shape.toData(this.alpha, parseColor(this.color));
+  }
   /* apply this step to a state to get a new state. call only after .compute */
   apply(state) {
     const newCanvas = state.canvas.clone().drawStep(this);
@@ -349,6 +360,9 @@ var Shape = class {
   toSVG() {
     return void 0;
   }
+  toData(_alpha, _color) {
+    throw new Error("Shape does not support serialization");
+  }
   /* get a new smaller canvas with this shape */
   rasterize(alpha) {
     const w = this.bbox.width;
@@ -453,6 +467,9 @@ var Triangle = class _Triangle extends Polygon {
   _cloneEmpty() {
     return new _Triangle(0, 0);
   }
+  toData(a, c) {
+    return { t: "t", a, c, pts: this.points.map(([x, y]) => [x, y]) };
+  }
 };
 var Rectangle = class _Rectangle extends Polygon {
   constructor(w, h) {
@@ -461,6 +478,9 @@ var Rectangle = class _Rectangle extends Polygon {
   _cloneEmpty() {
     return new _Rectangle(0, 0);
   }
+  toData(a, c) {
+    return { t: "r", a, c, pts: this.points.map(([x, y]) => [x, y]) };
+  }
   mutate(_cfg) {
     const clone = this._cloneEmpty();
     clone.points = this.points.map(([x, y]) => [x, y]);
@@ -524,6 +544,9 @@ var Ellipse = class _Ellipse extends Shape {
     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 _Ellipse(0, 0);
     clone.center = [this.center[0], this.center[1]];
@@ -558,7 +581,7 @@ var Ellipse = class _Ellipse extends Shape {
     return this;
   }
 };
-var Smiley = class _Smiley extends Shape {
+var Glyph = class _Glyph extends Shape {
   center;
   text;
   fontSize;
@@ -588,7 +611,7 @@ var Smiley = class _Smiley extends Shape {
     ctx.fillText(this.text, this.center[0], this.center[1]);
   }
   mutate(_cfg) {
-    const clone = new _Smiley(0, 0, this.text);
+    const clone = new _Glyph(0, 0, this.text);
     clone.center = [this.center[0], this.center[1]];
     clone.fontSize = this.fontSize;
     switch (Math.floor(Math.random() * 2)) {
@@ -617,6 +640,61 @@ var Smiley = class _Smiley extends Shape {
     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: this.text };
+  }
+};
+var Square = class _Square extends Shape {
+  center;
+  r;
+  constructor(w, h) {
+    super(w, h);
+    this.center = Shape.randomPoint(w, h);
+    this.r = 1 + ~~(Math.random() * 20);
+    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.fillRect(this.center[0] - this.r, this.center[1] - this.r, 2 * this.r, 2 * this.r);
+  }
+  toSVG() {
+    const node = document.createElementNS(SVGNS, "rect");
+    node.setAttribute("x", String(this.center[0] - this.r));
+    node.setAttribute("y", String(this.center[1] - this.r));
+    node.setAttribute("width", String(2 * this.r));
+    node.setAttribute("height", String(2 * this.r));
+    return node;
+  }
+  toData(a, c) {
+    return { t: "s", a, c, cx: this.center[0], cy: this.center[1], r: this.r };
+  }
+  mutate(_cfg) {
+    const clone = new _Square(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 radius = Math.random() * 20;
+        clone.center[0] += ~~(radius * Math.cos(angle));
+        clone.center[1] += ~~(radius * Math.sin(angle));
+        break;
+      }
+      case 1:
+        clone.r += (Math.random() - 0.5) * 20;
+        clone.r = Math.max(1, ~~clone.r);
+        break;
+    }
+    return clone.computeBbox();
+  }
 };
 var Hexagon = class _Hexagon extends Shape {
   center;
@@ -673,6 +751,9 @@ var Hexagon = class _Hexagon extends Shape {
     node.setAttribute("points", this._points().map((p) => p.join(",")).join(" "));
     return node;
   }
+  toData(a, c) {
+    return { t: "h", a, c, cx: this.center[0], cy: this.center[1], r: this.r, angle: this.angle };
+  }
   mutate(_cfg) {
     const clone = new _Hexagon(0, 0);
     clone.center = [this.center[0], this.center[1]];
@@ -800,16 +881,134 @@ var Optimizer = class {
     return promise;
   }
 };
+
+// src/replay.ts
+function rgbString([r, g, b]) {
+  return `rgb(${r}, ${g}, ${b})`;
+}
+function hexPoints(cx, cy, r, angle) {
+  return Array.from({ length: 6 }, (_, i) => {
+    const a = angle + i * Math.PI / 3;
+    return [~~(cx + r * Math.cos(a)), ~~(cy + r * Math.sin(a))];
+  });
+}
+function renderStep(data, ctx) {
+  ctx.globalAlpha = data.a;
+  ctx.fillStyle = rgbString(data.c);
+  switch (data.t) {
+    case "t":
+    case "r": {
+      ctx.beginPath();
+      data.pts.forEach(([x, y], i) => i ? ctx.lineTo(x, y) : ctx.moveTo(x, y));
+      ctx.closePath();
+      ctx.fill();
+      break;
+    }
+    case "e": {
+      ctx.beginPath();
+      ctx.ellipse(data.cx, data.cy, data.rx, data.ry, 0, 0, 2 * Math.PI, false);
+      ctx.fill();
+      break;
+    }
+    case "s": {
+      ctx.fillRect(data.cx - data.r, data.cy - data.r, 2 * data.r, 2 * data.r);
+      break;
+    }
+    case "h": {
+      const pts = hexPoints(data.cx, data.cy, data.r, data.angle);
+      ctx.beginPath();
+      pts.forEach(([x, y], i) => i ? ctx.lineTo(x, y) : ctx.moveTo(x, y));
+      ctx.closePath();
+      ctx.fill();
+      break;
+    }
+    case "sm": {
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.font = `${data.fs}px sans-serif`;
+      ctx.fillText(data.text, data.cx, data.cy);
+      break;
+    }
+  }
+}
+function stepToSVG(data) {
+  const color = rgbString(data.c);
+  const opacity = data.a.toFixed(2);
+  let node;
+  switch (data.t) {
+    case "t":
+    case "r": {
+      node = document.createElementNS(SVGNS, "path");
+      const d = data.pts.map(([x, y], i) => `${i ? "L" : "M"}${x},${y}`).join("") + "Z";
+      node.setAttribute("d", d);
+      break;
+    }
+    case "e": {
+      node = document.createElementNS(SVGNS, "ellipse");
+      node.setAttribute("cx", String(data.cx));
+      node.setAttribute("cy", String(data.cy));
+      node.setAttribute("rx", String(data.rx));
+      node.setAttribute("ry", String(data.ry));
+      break;
+    }
+    case "s": {
+      node = document.createElementNS(SVGNS, "rect");
+      node.setAttribute("x", String(data.cx - data.r));
+      node.setAttribute("y", String(data.cy - data.r));
+      node.setAttribute("width", String(2 * data.r));
+      node.setAttribute("height", String(2 * data.r));
+      break;
+    }
+    case "h": {
+      node = document.createElementNS(SVGNS, "polygon");
+      const pts = hexPoints(data.cx, data.cy, data.r, data.angle);
+      node.setAttribute("points", pts.map((p) => p.join(",")).join(" "));
+      break;
+    }
+    case "sm": {
+      node = document.createElementNS(SVGNS, "text");
+      node.appendChild(document.createTextNode(data.text));
+      node.setAttribute("text-anchor", "middle");
+      node.setAttribute("dominant-baseline", "central");
+      node.setAttribute("font-size", String(data.fs));
+      node.setAttribute("font-family", "sans-serif");
+      node.setAttribute("x", String(data.cx));
+      node.setAttribute("y", String(data.cy));
+      break;
+    }
+  }
+  node.setAttribute("fill", color);
+  node.setAttribute("fill-opacity", opacity);
+  return node;
+}
+function replayOutput(data) {
+  const fill = rgbString(data.fill);
+  const vw = data.w * data.scale;
+  const vh = data.h * data.scale;
+  const raster = new Canvas(vw, vh);
+  raster.fill(fill);
+  raster.ctx.scale(data.scale, data.scale);
+  const svg = Canvas.svgRoot(data.w, data.h, fill);
+  svg.setAttribute("width", String(vw));
+  svg.setAttribute("height", String(vh));
+  for (const step of data.steps) {
+    renderStep(step, raster.ctx);
+    svg.appendChild(stepToSVG(step));
+  }
+  const svgString = new XMLSerializer().serializeToString(svg);
+  return { raster: raster.node, svg, svgString };
+}
 export {
   Canvas,
   Debug,
   Ellipse,
+  Glyph,
   Hexagon,
   Optimizer,
   Rectangle,
   SVGNS,
   Shape,
-  Smiley,
+  Square,
   State,
   Step,
   Triangle,
@@ -819,5 +1018,8 @@ export {
   difference,
   differenceToDistance,
   distanceToDifference,
+  getFill,
+  parseColor,
+  replayOutput,
   stepPerf
 };

package/package.json

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