textmode.js 0.0.1

package/dist/types/renderer/geometries/Rectangle.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Rectangle geometry class for WebGL rendering
+ */
+export declare class Rectangle {
+    /** The WebGL rendering context */
+    private gl;
+    /** The buffer containing the rectangle vertices */
+    private buffer;
+    /** The number of vertices in the rectangle */
+    private numVertices;
+    constructor(gl: WebGLRenderingContext, x: number, y: number, width: number, height: number);
+    /**
+     * Draw the quad using attribute locations from the current shader
+     */
+    draw(): void;
+}

package/dist/types/textmode/Canvas.d.ts

@@ -0,0 +1,16 @@
+export declare class TextmodeCanvas {
+    private webglCanvas;
+    private captureCanvas;
+    constructor(captureCanvas: HTMLCanvasElement);
+    private generateUniqueCanvasId;
+    private createOverlayCanvas;
+    private positionOverlayCanvas;
+    resize(): void;
+    /**
+     * Get the WebGL context for the overlay canvas
+     */
+    getWebGLContext(): WebGL2RenderingContext | WebGLRenderingContext;
+    get canvas(): HTMLCanvasElement;
+    get width(): number;
+    get height(): number;
+}

package/dist/types/textmode/Grid.d.ts

@@ -0,0 +1,111 @@
+/**
+ * Manages the grid for the ASCII rendering pipeline of a Textmodifier instance.
+ */
+export declare class TextmodeGrid {
+    /** The number of columns in the grid. */
+    private _cols;
+    /** The number of rows in the grid. */
+    private _rows;
+    /** The total width of the grid in pixels. */
+    private _width;
+    /** The total height of the grid in pixels. */
+    private _height;
+    /** The offset to the outer canvas on the x-axis when centering the grid. */
+    private _offsetX;
+    /** The offset to the outer canvas on the y-axis when centering the grid. */
+    private _offsetY;
+    /** Whether the grid dimensions are fixed, or responsive based on the canvas dimensions. */
+    private _fixedDimensions;
+    /** The canvas element used to determine the grid dimensions. */
+    private _canvas;
+    /** The width of each cell in the grid. */
+    private _cellWidth;
+    /** The height of each cell in the grid. */
+    private _cellHeight;
+    /**
+     * Create a new grid instance.
+     * @param canvas The canvas element used to determine the grid dimensions.
+     * @param cellWidth The width of each cell in the grid.
+     * @param cellHeight The height of each cell in the grid.
+     * @ignore
+     */
+    constructor(canvas: HTMLCanvasElement, cellWidth: number, cellHeight: number);
+    /**
+     * Reset the grid to the default number of columns and rows based on the current canvas dimensions, and the grid cell dimensions.
+     * @ignore
+     */
+    reset(): void;
+    /**
+     * Reset the total grid width & height, and the offset to the outer canvas.
+     */
+    private _resizeGrid;
+    /**
+     * Re-assign the grid cell dimensions and `reset()` the grid.
+     * @param newCellWidth The new cell width.
+     * @param newCellHeight The new cell height.
+     * @ignore
+     */
+    resizeCellPixelDimensions(newCellWidth: number, newCellHeight: number): void;
+    /**
+     * Re-assign the grid dimensions and resize the grid.
+     *
+     * Calling this method makes the grid dimensions fixed, meaning they will not automatically resize based on the canvas dimensions.
+     * @param newCols The new number of columns.
+     * @param newRows The new number of rows.
+     * @ignore
+     */
+    resizeGridDimensions(newCols: number, newRows: number): void;
+    /**
+     * Make the grid dimensions flexible again, and `reset()` the grid.
+     * @ignore
+     */
+    resetGridDimensions(): void;
+    /**
+     * Update the canvas used by the grid, and reset the grid dimensions.
+     * @param canvas The new canvas element to use for the grid.
+     * @ignore
+     */
+    updateCanvas(canvas: HTMLCanvasElement): void;
+    /**
+     * Returns the width of each cell in the grid.
+     */
+    get cellWidth(): number;
+    /**
+     * Returns the height of each cell in the grid.
+     */
+    get cellHeight(): number;
+    /**
+     * Returns the number of columns in the grid.
+     */
+    get cols(): number;
+    /**
+     * Returns the number of rows in the grid.
+     */
+    get rows(): number;
+    /**
+     * Returns the total width of the grid.
+     */
+    get width(): number;
+    /**
+     * Returns the total height of the grid.
+     */
+    get height(): number;
+    /**
+     * Returns the offset to the outer canvas borders on the x-axis when centering the grid.
+     */
+    get offsetX(): number;
+    /**
+     * Returns the offset to the outer canvas borders on the y-axis when centering the grid.
+     */
+    get offsetY(): number;
+    /**
+     * Returns `true` if the grid dimensions *(columns and rows)* are fixed, or `false` if they are responsive based on the canvas dimensions.
+     */
+    get fixedDimensions(): boolean;
+    /**
+     * Sets whether the grid dimensions *(columns and rows)* are fixed or responsive based on the canvas dimensions.
+     * @param value `true` to make the grid dimensions fixed, or `false` to make them responsive.
+     * @ignore
+     */
+    set fixedDimensions(value: boolean);
+}

package/dist/types/textmode/Textmodifier.d.ts

@@ -0,0 +1,37 @@
+export interface TextModeOptions {
+    fontSize?: number;
+}
+export type TextmodifierInitializationState = 'pending' | 'initialized' | 'failed';
+export declare class Textmodifier {
+    /** The canvas element to capture content from */
+    private captureCanvas;
+    /** Our WebGL overlay canvas manager */
+    private textmodeCanvas;
+    /** Core WebGL renderer */
+    private renderer;
+    private asciiShader;
+    private canvasFramebuffer;
+    private brightnessConverter;
+    private fontManager;
+    private grid;
+    private resizeObserver;
+    private resultFramebuffer;
+    private initialized;
+    constructor(canvas: HTMLCanvasElement, opts?: TextModeOptions);
+    /**
+     * Initialize the textmodifier. Must be called before using render().
+     */
+    initialize(): Promise<void>;
+    /**
+     * Check if the textmodifier is ready for use
+     */
+    isInitialized(): boolean;
+    /**
+     * Static factory method for creating and initializing a Textmodifier instance
+     */
+    static create(canvas: HTMLCanvasElement, opts?: TextModeOptions): Promise<Textmodifier>;
+    private setupEventListeners;
+    loadFont(fontUrl: string): Promise<void>;
+    render(): void;
+    private resize;
+}

package/dist/types/textmode/converters/BrightnessConverter.d.ts

@@ -0,0 +1,50 @@
+import { Renderer } from "../../renderer/Renderer";
+import { Framebuffer } from "../../renderer/Framebuffer";
+import { ColorPalette } from "../../ColorPalette";
+import { FontManager } from "../../FontManager";
+import { TextmodeGrid } from "../Grid";
+import { Converter } from "./Converter";
+export declare const BRIGHTNESS_DEFAULT_OPTIONS: {
+    /** Enable/disable the renderer */
+    enabled: boolean;
+    /** Characters used for brightness mapping (from darkest to brightest) */
+    characters: string;
+    /** Color of the ASCII characters. Only used when `characterColorMode` is set to `fixed` */
+    characterColor: number[];
+    /** Character color mode */
+    characterColorMode: string;
+    /** Cell background color. Only used when `characterColorMode` is set to `fixed` */
+    backgroundColor: number[];
+    /** Background color mode */
+    backgroundColorMode: string;
+    /** Swap the cells ASCII character colors with it's cell background colors */
+    invert: boolean;
+    /** Rotation angle of all characters in the grid in degrees */
+    rotation: number;
+    /** Flip the ASCII characters horizontally */
+    flipHorizontally: boolean;
+    /** Flip the ASCII characters vertically */
+    flipVertically: boolean;
+    /** Range of brightness values to map to ASCII characters */
+    brightnessRange: [number, number];
+};
+export declare class BrightnessConverter extends Converter {
+    private sampleShader;
+    private charMappingShader;
+    sampleFramebuffer: Framebuffer;
+    palette: ColorPalette;
+    private options;
+    constructor(renderer: Renderer, fontManager: FontManager, grid: TextmodeGrid);
+    convert(framebuffer: Framebuffer): void;
+    resize(): void;
+    characters(characters: string): void;
+    characterColor(r: number, g?: number, b?: number, a?: number): void;
+    characterColorMode(mode: "sampled" | "fixed"): void;
+    backgroundColor(r: number, g?: number, b?: number, a?: number): void;
+    backgroundColorMode(mode: "sampled" | "fixed"): void;
+    invert(invert: boolean): void;
+    rotation(angle: number): void;
+    flipHorizontally(flip: boolean): void;
+    flipVertically(flip: boolean): void;
+    brightnessRange(range: [number, number]): void;
+}

package/dist/types/textmode/converters/Converter.d.ts

@@ -0,0 +1,21 @@
+import type { FontManager } from "../../FontManager";
+import type { Framebuffer } from "../../renderer/Framebuffer";
+import type { Renderer } from "../../renderer/Renderer";
+import type { TextmodeGrid } from "../Grid";
+export declare class Converter {
+    protected renderer: Renderer;
+    protected fontManager: FontManager;
+    protected grid: TextmodeGrid;
+    protected _characterFramebuffer: Framebuffer;
+    protected _primaryColorFramebuffer: Framebuffer;
+    protected _secondaryColorFramebuffer: Framebuffer;
+    protected _rotationFramebuffer: Framebuffer;
+    protected _transformFramebuffer: Framebuffer;
+    constructor(renderer: Renderer, fontManager: FontManager, grid: TextmodeGrid);
+    resize(): void;
+    get characterFramebuffer(): Framebuffer;
+    get primaryColorFramebuffer(): Framebuffer;
+    get secondaryColorFramebuffer(): Framebuffer;
+    get rotationFramebuffer(): Framebuffer;
+    get transformFramebuffer(): Framebuffer;
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "textmode.js",
+  "version": "0.0.1",
+  "description": "Apply real-time ASCII conversion to any HTML canvas.",
+  "type": "module",
+  "types": "./dist/types/index.d.ts",
+  "main": "./dist/textmode.umd.js",
+  "module": "./dist/textmode.esm.js",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/textmode.esm.js",
+      "require": "./dist/textmode.umd.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.13",
+    "@types/p5": "^1.7.6",
+    "@vitest/ui": "^3.1.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.4",
+    "vite-plugin-glsl": "^1.5.1",
+    "vitest": "^3.1.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/humanbydefinition/textmode.js.git"
+  },
+  "keywords": [
+    "ascii",
+    "petscii",
+    "textmode",
+    "canvas",
+    "webgl"
+  ],
+  "author": "humanbydefinition",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/humanbydefinition/textmode.js/issues"
+  },
+  "homepage": "https://github.com/humanbydefinition/textmode.js",
+  "files": [
+    "dist"
+  ]
+}