textmode.js 0.2.0-beta.2 → 0.2.0-beta.4

package/dist/types/rendering/webgl/Shader.d.ts

@@ -34,6 +34,10 @@ export declare class GLShader {
      */
     private _resetState;
     $setUniforms(uniforms: Record<string, UniformValue>): void;
+    /**
+     * Check if a uniform exists in this shader
+     */
+    $hasUniform(name: string): boolean;
     /**
      * Set a single uniform value with automatic texture unit management
      */

package/dist/types/rendering/webgl/ShaderManager.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/rendering/webgl/geometries/BaseGeometry.d.ts

@@ -37,10 +37,12 @@ export declare abstract class BaseGeometry implements IGeometry {
         ny: number;
     };
     protected _setRotationCenter(instanceData: InstanceData, centerX: number, centerY: number): void;
-    protected _calculateRotationParams(x: number, y: number, width: number, height: number, rotationDegrees: number): {
+    protected _calculateRotationParams(x: number, y: number, width: number, height: number, rotationXDegrees: number, rotationYDegrees: number, rotationZDegrees: number): {
         centerX: number;
         centerY: number;
-        radians: number;
+        radiansX: number;
+        radiansY: number;
+        radiansZ: number;
         aspectRatio: number;
     };
 }

package/dist/types/rendering/webgl/geometries/NoiseGrid.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/rendering/webgl/types/DrawCommand.d.ts

@@ -1,6 +1,15 @@
 import type { GeometryParams, GeometryType } from './GeometryTypes';
 import type { IRenderState } from '../RenderState';
-export type DrawParams = GeometryParams;
+import type { GLShader } from '../Shader';
+export type CustomRectParams = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    shader: GLShader;
+    uniforms: Record<string, any>;
+};
+export type DrawParams = GeometryParams | CustomRectParams;
 export interface DrawCommand {
     id: number;
     type: GeometryType;

package/dist/types/rendering/webgl/types/RenderTypes.d.ts

@@ -9,4 +9,6 @@ export interface RenderContext {
     shader: GLShader;
     gl: WebGL2RenderingContext;
     viewport: [number, number, number, number];
+    cellWidth?: number;
+    cellHeight?: number;
 }

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

@@ -55,6 +55,7 @@ declare const Textmodifier_base: typeof TextmodifierCore;
  */
 export declare class Textmodifier extends Textmodifier_base {
     private _isDisposed;
+    private _setupCallback;
     private _drawCallback;
     private _resizedCallback;
     private _windowResizeListener;
@@ -65,11 +66,10 @@ export declare class Textmodifier extends Textmodifier_base {
      */
     constructor(opts?: TextmodeOptions);
     /**
-     * Static factory method for creating and initializing a Textmodifier instance.
-     * @param opts Optional configuration options for the `Textmodifier` instance.
-     * @ignore
+     * Internal async initialization method.
+     * @param opts Configuration options
      */
-    static create(opts?: TextmodeOptions): Promise<Textmodifier>;
+    private _initialize;
     /**
      * Setup event listeners for resize handling.
      * @ignore
@@ -81,6 +81,41 @@ export declare class Textmodifier extends Textmodifier_base {
      * @ignore
      */
     $render(): void;
+    /**
+     * Set a setup callback function that will be executed once when initialization is complete.
+     *
+     * This callback is called after font loading and grid initialization, allowing access to
+     * properties like `textmodifier.grid.cols` for calculating layout or setup variables.
+     *
+     * @param callback The function to call when setup is complete
+     *
+     * @example
+     * ```javascript
+     * const textmodifier = textmode.create({
+     *   width: 800,
+     *   height: 600,
+     *   fontSize: 16
+     * });
+     *
+     * // Setup callback - called once when ready
+     * textmodifier.setup(() => {
+     *   // Now you can access grid properties
+     *   const cols = textmodifier.grid.cols;
+     *   const rows = textmodifier.grid.rows;
+     *
+     *   // Initialize any variables that depend on grid size
+     *   cellWidth = Math.floor(cols / 3);
+     *   cellHeight = Math.floor(rows / 2);
+     * });
+     *
+     * // Draw callback - called every frame
+     * textmodifier.draw(() => {
+     *   textmodifier.background(128);
+     *   textmodifier.rect(0, 0, cellWidth, cellHeight);
+     * });
+     * ```
+     */
+    setup(callback: () => void): void;
     /**
      * Set a draw callback function that will be executed before each render.
      *

package/dist/types/textmode/mixins/RenderingMixin.d.ts

@@ -1,11 +1,17 @@
 import type { Mixin } from './TextmodifierMixin';
+import type { GLShader } from '../../rendering/webgl/Shader';
+/**
+ * Supported uniform value types for shader parameters
+ */
+type UniformValue = number | boolean | number[] | Float32Array | Int32Array | WebGLTexture;
 /**
  * Interface for rendering capabilities that will be mixed into Textmodifier
  */
 export interface RenderingCapabilities {
     /**
-     * Sets the rotation angle for subsequent shape rendering operations
-     * @param degrees The rotation angle in degrees
+     * Set a custom shader for subsequent rendering operations.
+     * Pass null to return to the default shader.
+     * @param shader The custom shader to use, or null to use the default shader
      *
      * @example
      * ```javascript
@@ -14,14 +20,219 @@ export interface RenderingCapabilities {
      *   height: 600,
      * })
      *
+     * // Create a custom filter shader
+     * const customShader = t.createFilterShader(`
+     *   // ... fragment shader code ...
+     * `);
+     *
      * t.draw(() => {
      *   t.background(0);
      *
-     *   // todo...
+     *   // Use custom shader
+     *   t.shader(customShader);
+     *   t.setUniform('u_frameCount', t.frameCount);
+     *   t.rect(0, 0, t.grid.cols, t.grid.rows);
+     *
+     *   // Return to default shader
+     *   t.shader(null);
+     * });
+     * ```
+     */
+    shader(shader: GLShader | null): void;
+    /**
+     * Set a uniform value for the current custom shader.
+     * @param name The name of the uniform variable
+     * @param value The value to set
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * const shader = t.createFilterShader(`
+     *   uniform float u_time;
+     *   // ... rest of shader ...
+     * `);
+     *
+     * t.draw(() => {
+     *   t.shader(shader);
+     *   t.setUniform('u_time', t.frameCount * 0.02);
+     *   t.rect(0, 0, t.grid.cols, t.grid.rows);
+     * });
+     * ```
+     */
+    setUniform(name: string, value: UniformValue): void;
+    /**
+     * Set multiple uniform values for the current custom shader.
+     * @param uniforms Object containing uniform name-value pairs
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * const shader = t.createFilterShader(`
+     *   uniform float u_time;
+     *   uniform vec2 u_resolution;
+     *   // ... rest of shader ...
+     * `);
+     *
+     * t.draw(() => {
+     *   t.shader(shader);
+     *   t.setUniforms({
+     *     u_time: t.frameCount * 0.02,
+     *     u_resolution: [t.grid.cols, t.grid.rows]
+     *   });
+     *   t.rect(0, 0, t.grid.cols, t.grid.rows);
+     * });
+     * ```
+     */
+    setUniforms(uniforms: Record<string, UniformValue>): void;
+    /**
+     * Create a custom filter shader from fragment shader source code.
+     * The fragment shader will automatically receive the standard vertex shader inputs
+     * and must output to all 5 MRT attachments.
+     * @param fragmentSource The fragment shader source code
+     * @returns A compiled shader ready for use with shader()
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * const noiseShader = t.createFilterShader(`
+     *   #version 300 es
+     *   precision highp float;
+     *
+     *   in vec2 v_uv;
+     *   in vec3 v_character;
+     *   in vec4 v_primaryColor;
+     *   in vec4 v_secondaryColor;
+     *   in vec2 v_rotation;
+     *   in vec3 v_transform;
+     *
+     *   uniform float u_frameCount;
+     *
+     *   layout(location = 0) out vec4 o_character;
+     *   layout(location = 1) out vec4 o_primaryColor;
+     *   layout(location = 2) out vec4 o_secondaryColor;
+     *   layout(location = 3) out vec4 o_rotation;
+     *   layout(location = 4) out vec4 o_transform;
+     *
+     *   float random(vec2 st) {
+     *     return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
+     *   }
+     *
+     *   void main() {
+     *     vec2 gridPos = floor(gl_FragCoord.xy);
+     *     float noise = random(gridPos + u_frameCount * 0.1);
+     *
+     *     o_character = vec4(noise, 0.0, 0.0, 1.0);
+     *     o_primaryColor = vec4(vec3(noise), 1.0);
+     *     o_secondaryColor = vec4(0.0, 0.0, 0.0, 1.0);
+     *     o_rotation = vec4(0.0, 0.0, 0.0, 1.0);
+     *     o_transform = vec4(0.0, 0.0, 0.0, 1.0);
+     *   }
+     * `);
+     *
+     * t.draw(() => {
+     *   t.shader(noiseShader);
+     *   t.setUniform('u_frameCount', t.frameCount);
+     *   t.rect(0, 0, t.grid.cols, t.grid.rows);
+     * });
+     * ```
+     */
+    createFilterShader(fragmentSource: string): GLShader;
+    /**
+     * Sets the rotation angles for subsequent shape rendering operations
+     * @param degreesX The rotation angle in degrees around the X-axis (optional, defaults to 0)
+     * @param degreesY The rotation angle in degrees around the Y-axis (optional, defaults to 0)
+     * @param degreesZ The rotation angle in degrees around the Z-axis (optional, defaults to 0)
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   t.background(0);
+     *
+     *   // Rotate only around Z-axis (backward compatible)
+     *   t.rotate(0, 0, 45);
+     *
+     *   // Rotate around all three axes
+     *   t.rotate(30, 45, 60);
+     *
+     *   t.rect(10, 10, 5, 5);
+     * });
+     * ```
+     */
+    rotate(degreesX?: number, degreesY?: number, degreesZ?: number): void;
+    /**
+     * Sets the X-axis rotation angle for subsequent shape rendering operations
+     * @param degrees The rotation angle in degrees around the X-axis
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   t.background(0);
+     *   t.rotateX(45); // Rotate around X-axis
+     *   t.rect(10, 10, 5, 5);
+     * });
+     * ```
+     */
+    rotateX(degrees: number): void;
+    /**
+     * Sets the Y-axis rotation angle for subsequent shape rendering operations
+     * @param degrees The rotation angle in degrees around the Y-axis
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   t.background(0);
+     *   t.rotateY(45); // Rotate around Y-axis
+     *   t.rect(10, 10, 5, 5);
+     * });
+     * ```
+     */
+    rotateY(degrees: number): void;
+    /**
+     * Sets the Z-axis rotation angle for subsequent shape rendering operations
+     * @param degrees The rotation angle in degrees around the Z-axis
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   t.background(0);
+     *   t.rotateZ(45); // Rotate around Z-axis
+     *   t.rect(10, 10, 5, 5);
      * });
      * ```
      */
-    rotate(degrees: number): void;
+    rotateZ(degrees: number): void;
     /**
      * Save the current rendering state to the state stack.
      * Use with {@link pop} to isolate style changes within a block.
@@ -270,12 +481,12 @@ export interface RenderingCapabilities {
      *
      * t.draw(() => {
      *   t.background(0);
-     *   t.flipHorizontally(true);
+     *   t.flipX(true);
      *   t.rect(10, 10, 5, 5);
      * });
      * ```
      */
-    flipHorizontally(toggle: boolean): void;
+    flipX(toggle: boolean): void;
     /**
      * Toggle vertical flipping for subsequent character rendering.
      * @param toggle Whether to flip vertically
@@ -289,12 +500,12 @@ export interface RenderingCapabilities {
      *
      * t.draw(() => {
      *   t.background(0);
-     *   t.flipVertically(true);
+     *   t.flipY(true);
      *   t.rect(10, 10, 5, 5);
      * });
      * ```
      */
-    flipVertically(toggle: boolean): void;
+    flipY(toggle: boolean): void;
     /**
      * Set the character rotation angle for subsequent character rendering.
      * @param degrees The rotation angle in degrees
@@ -407,3 +618,4 @@ export interface RenderingCapabilities {
  * @returns Extended class with rendering capabilities
  */
 export declare const RenderingMixin: Mixin<RenderingCapabilities>;
+export {};

package/dist/types/textmode/mixins/ShaderMixin.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "textmode.js",
-  "version": "0.2.0-beta.2",
+  "version": "0.2.0-beta.4",
   "description": "Apply real-time ASCII conversion to any HTML canvas.",
   "type": "module",
   "types": "./dist/types/index.d.ts",