ascii-shape-renderer 1.0.0

package/dist/video-types.d.ts

@@ -0,0 +1,10 @@
+export interface VideoAsciiRendererOptions {
+    cellWidth?: number;
+    cellHeight?: number;
+    globalContrastExponent?: number;
+    directionalContrastExponent?: number;
+    colorMode?: 'none' | 'fg' | 'bg' | 'both';
+    targetFps?: number;
+    maxWidth?: number;
+    characters?: string;
+}

package/dist/video-types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/worker.d.ts

@@ -0,0 +1,48 @@
+declare const BASE_CW = 8, BASE_CH = 14, CIRCLE_R = 0.18;
+declare const CHARS = " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~";
+declare const INT_POS: {
+    x: number;
+    y: number;
+}[];
+declare const EXT_POS: {
+    x: number;
+    y: number;
+}[];
+declare const AFFECT: number[][];
+declare let shapeVecs: {
+    ch: string;
+    v: number[];
+}[];
+declare let kdTree: any;
+declare const cache: Map<string, string>;
+declare function init(): void;
+declare function sampleCircle(d: ImageData, cx: number, cy: number, r: number): number;
+declare function buildKd(items: any[], depth?: number): any;
+declare function findNear(n: any, t: number[], best?: {
+    dist: number;
+    ch: string;
+}): {
+    dist: number;
+    ch: string;
+};
+declare function contrast(int: number[], ext: number[], gE: number, dE: number): number[];
+declare function sampleImg(data: Uint8ClampedArray, width: number, height: number, cx: number, cy: number, r: number): number;
+declare function sampleClr(data: Uint8ClampedArray, width: number, height: number, cx: number, cy: number, cw: number, ch: number): string;
+declare function darken(h: string, a: number): string;
+interface RenderMessage {
+    type: 'render';
+    id: number;
+    data: Uint8ClampedArray;
+    width: number;
+    height: number;
+    options: {
+        globalContrast?: number;
+        directionalContrast?: number;
+        colorMode?: string;
+    };
+}
+declare function renderFrame(data: Uint8ClampedArray, width: number, height: number, opts: any): {
+    html: string;
+    cols: number;
+    rows: number;
+};

package/dist/worker.js

@@ -0,0 +1,173 @@
+"use strict";
+// ASCII Renderer Web Worker
+// Handles heavy ASCII conversion off main thread
+const BASE_CW = 8, BASE_CH = 14, CIRCLE_R = 0.18;
+const CHARS = ' !"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~';
+const INT_POS = [{ x: .25, y: .20 }, { x: .75, y: .13 }, { x: .25, y: .50 }, { x: .75, y: .50 }, { x: .25, y: .80 }, { x: .75, y: .87 }];
+const EXT_POS = [{ x: .25, y: -.15 }, { x: .75, y: -.15 }, { x: -.15, y: .20 }, { x: 1.15, y: .13 }, { x: -.15, y: .50 }, { x: 1.15, y: .50 }, { x: -.15, y: .80 }, { x: 1.15, y: .87 }, { x: .25, y: 1.15 }, { x: .75, y: 1.15 }];
+const AFFECT = [[0, 1, 2, 4], [0, 1, 3, 5], [2, 4, 6], [3, 5, 7], [4, 6, 8, 9], [5, 7, 8, 9]];
+let shapeVecs = [];
+let kdTree = null;
+const cache = new Map();
+// Initialize shape vectors
+function init() {
+    if (kdTree)
+        return;
+    // Create offscreen canvas for character rendering
+    const c = new OffscreenCanvas(BASE_CW, BASE_CH);
+    const ctx = c.getContext('2d');
+    for (const ch of CHARS) {
+        ctx.fillStyle = '#000';
+        ctx.fillRect(0, 0, BASE_CW, BASE_CH);
+        ctx.fillStyle = '#fff';
+        ctx.font = `${BASE_CH}px monospace`;
+        ctx.textBaseline = 'top';
+        ctx.textAlign = 'center';
+        ctx.fillText(ch, BASE_CW / 2, 0);
+        const d = ctx.getImageData(0, 0, BASE_CW, BASE_CH);
+        const v = INT_POS.map(p => sampleCircle(d, p.x * BASE_CW, p.y * BASE_CH, CIRCLE_R * BASE_CH));
+        shapeVecs.push({ ch, v });
+    }
+    const max = [0, 0, 0, 0, 0, 0];
+    shapeVecs.forEach(({ v }) => v.forEach((x, i) => max[i] = Math.max(max[i], x)));
+    shapeVecs = shapeVecs.map(({ ch, v }) => ({ ch, v: v.map((x, i) => max[i] ? x / max[i] : 0) }));
+    kdTree = buildKd(shapeVecs);
+}
+function sampleCircle(d, cx, cy, r) {
+    let t = 0, c = 0;
+    for (let dy = -r; dy <= r; dy++) {
+        for (let dx = -r; dx <= r; dx++) {
+            if (dx * dx + dy * dy <= r * r) {
+                const x = ~~(cx + dx), y = ~~(cy + dy);
+                if (x >= 0 && x < d.width && y >= 0 && y < d.height) {
+                    t += d.data[(y * d.width + x) * 4] / 255;
+                    c++;
+                }
+            }
+        }
+    }
+    return c ? t / c : 0;
+}
+function buildKd(items, depth = 0) {
+    if (!items.length)
+        return null;
+    const a = depth % 6;
+    items.sort((x, y) => x.v[a] - y.v[a]);
+    const m = items.length >> 1;
+    return { item: items[m], left: buildKd(items.slice(0, m), depth + 1), right: buildKd(items.slice(m + 1), depth + 1), axis: a };
+}
+function findNear(n, t, best = { dist: Infinity, ch: ' ' }) {
+    if (!n)
+        return best;
+    const d = n.item.v.reduce((s, x, i) => s + (x - t[i]) ** 2, 0);
+    if (d < best.dist)
+        best = { dist: d, ch: n.item.ch };
+    const diff = t[n.axis] - n.item.v[n.axis];
+    best = findNear(diff < 0 ? n.left : n.right, t, best);
+    if (diff * diff < best.dist)
+        best = findNear(diff < 0 ? n.right : n.left, t, best);
+    return best;
+}
+function contrast(int, ext, gE, dE) {
+    let v = int.map((val, i) => {
+        if (dE <= 1)
+            return val;
+        let m = val;
+        for (const e of AFFECT[i])
+            m = Math.max(m, ext[e]);
+        return m ? Math.pow(val / m, dE) * m : val;
+    });
+    if (gE > 1) {
+        const m = Math.max(...v);
+        if (m)
+            v = v.map(x => Math.pow(x / m, gE) * m);
+    }
+    return v;
+}
+function sampleImg(data, width, height, cx, cy, r) {
+    let t = 0, c = 0;
+    for (let dy = -r; dy <= r; dy += 2) {
+        for (let dx = -r; dx <= r; dx += 2) {
+            if (dx * dx + dy * dy <= r * r) {
+                const x = ~~(cx + dx), y = ~~(cy + dy);
+                if (x >= 0 && x < width && y >= 0 && y < height) {
+                    const i = (y * width + x) * 4;
+                    t += .2126 * data[i] / 255 + .7152 * data[i + 1] / 255 + .0722 * data[i + 2] / 255;
+                    c++;
+                }
+            }
+        }
+    }
+    return c ? t / c : 0;
+}
+function sampleClr(data, width, height, cx, cy, cw, ch) {
+    let r = 0, g = 0, b = 0, c = 0;
+    for (let dy = ch * .25; dy < ch * .75; dy += 2) {
+        for (let dx = cw * .25; dx < cw * .75; dx += 2) {
+            const x = ~~(cx + dx), y = ~~(cy + dy);
+            if (x >= 0 && x < width && y >= 0 && y < height) {
+                const i = (y * width + x) * 4;
+                r += data[i];
+                g += data[i + 1];
+                b += data[i + 2];
+                c++;
+            }
+        }
+    }
+    return c ? '#' + [r, g, b].map(v => (~~(v / c)).toString(16).padStart(2, '0')).join('') : '#000';
+}
+function darken(h, a) {
+    return '#' + [1, 3, 5].map(i => (~~(parseInt(h.slice(i, i + 2), 16) * (1 - a))).toString(16).padStart(2, '0')).join('');
+}
+function renderFrame(data, width, height, opts) {
+    const gE = opts.globalContrast ?? 2;
+    const dE = opts.directionalContrast ?? 3;
+    const colorMode = opts.colorMode ?? 'none';
+    const cols = Math.round(width / BASE_CW);
+    const rows = Math.round(height / BASE_CH);
+    const cW = width / cols, cH = height / rows;
+    const r = CIRCLE_R * cH;
+    cache.clear();
+    let html = '';
+    for (let row = 0; row < rows; row++) {
+        for (let col = 0; col < cols; col++) {
+            const cx = col * cW, cy = row * cH;
+            const int = INT_POS.map(p => sampleImg(data, width, height, cx + p.x * cW, cy + p.y * cH, r));
+            const ext = EXT_POS.map(p => sampleImg(data, width, height, cx + p.x * cW, cy + p.y * cH, r));
+            const enh = contrast(int, ext, gE, dE);
+            const key = enh.map(v => ~~(v * 31)).join(',');
+            if (!cache.has(key))
+                cache.set(key, findNear(kdTree, enh).ch);
+            let ch = cache.get(key);
+            if (ch === '<')
+                ch = '&lt;';
+            else if (ch === '>')
+                ch = '&gt;';
+            else if (ch === '&')
+                ch = '&amp;';
+            if (colorMode === 'none') {
+                html += ch;
+            }
+            else {
+                const clr = sampleClr(data, width, height, cx, cy, cW, cH);
+                const st = [];
+                if (colorMode === 'fg' || colorMode === 'both')
+                    st.push(`color:${clr}`);
+                if (colorMode === 'bg' || colorMode === 'both')
+                    st.push(`background:${darken(clr, .5)}`);
+                html += `<span style="${st.join(';')}">${ch}</span>`;
+            }
+        }
+        html += '\n';
+    }
+    return { html, cols, rows };
+}
+// Handle messages from main thread
+self.onmessage = (e) => {
+    if (e.data.type === 'render') {
+        init();
+        const { id, data, width, height, options } = e.data;
+        const result = renderFrame(data, width, height, options);
+        self.postMessage({ id, ...result });
+    }
+};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "ascii-shape-renderer",
+  "version": "1.0.0",
+  "description": "Shape-aware ASCII renderer using 6D shape vectors and contrast enhancement",
+  "main": "dist/index.js",
+  "module": "dist/ascii-renderer.esm.js",
+  "browser": "dist/ascii-renderer.min.js",
+  "unpkg": "dist/ascii-renderer.min.js",
+  "jsdelivr": "dist/ascii-renderer.min.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc && npm run bundle",
+    "bundle": "esbuild src/browser.ts --bundle --minify --format=iife --global-name=AsciiRenderer --outfile=dist/ascii-renderer.min.js && esbuild src/browser.ts --bundle --format=esm --outfile=dist/ascii-renderer.esm.js",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jeeshofone/ascii-shape-renderer"
+  },
+  "keywords": [
+    "ascii",
+    "art",
+    "renderer",
+    "image",
+    "video",
+    "shape",
+    "terminal"
+  ],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "esbuild": "^0.27.2",
+    "html-minifier-terser": "^7.2.0",
+    "typescript": "^5.0.0"
+  },
+  "dependencies": {
+    "canvas": "^3.2.1",
+    "gifencoder": "^2.0.1"
+  }
+}