textmode.js 0.1.9 → 0.2.0-beta.1

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

@@ -9,11 +9,8 @@ export interface FontCapabilities {
      *
      * @example
      * ```javascript
-     * // Fetch a canvas element to apply textmode rendering to
-     * const canvas = document.querySelector('canvas#myCanvas');
-     *
      * // Create a Textmodifier instance
-     * const textmodifier = await textmode.create(canvas);
+     * const textmodifier = await textmode.create();
      *
      * // Load a custom font from a URL
      * await textmodifier.loadFont('https://example.com/fonts/myfont.ttf');
@@ -29,14 +26,11 @@ export interface FontCapabilities {
      *
      * @example
      * ```javascript
-     * // Fetch a canvas element to apply textmode rendering to
-     * const canvas = document.querySelector('canvas#myCanvas');
-     *
      * // Create a Textmodifier instance
-     * const textmodifier = await textmode.create(canvas);
+     * const textmodifier = await textmode.create();
      *
-     * // Set the font size to 24
-     * textmodifier.fontSize(24);
+     * // Set the font size to 32
+     * textmodifier.fontSize(32);
      * ```
      */
     fontSize(size: number): void;

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

@@ -1,16 +1,11 @@
 import type { Mixin } from './TextmodifierMixin';
-import type { Framebuffer, Shader, UniformValue } from '../../rendering';
-import type { FramebufferOptions } from '../../rendering/core/Framebuffer';
 /**
  * Interface for rendering capabilities that will be mixed into Textmodifier
  */
 export interface RenderingCapabilities {
     /**
-     * Sets the fill color for subsequent rendering operations
-     * @param r Red component (0-255)
-     * @param g Green component (0-255, optional)
-     * @param b Blue component (0-255, optional)
-     * @param a Alpha component (0-255, optional)
+     * Sets the rotation angle for subsequent shape rendering operations
+     * @param degrees The rotation angle in degrees
      *
      * @example
      * ```javascript
@@ -20,33 +15,16 @@ export interface RenderingCapabilities {
      * })
      *
      * t.draw(() => {
-     *   // Set the background color to black
      *   t.background(0);
      *
-     *   const centerX = t.width / 2;
-     *   const centerY = t.height / 2;
-     *   const radius = Math.min(t.width, t .height) / 3;
-     *   const speed = 0.02; // Adjust speed of rotation
-     *
-     *   const angle = t.frameCount * speed;
-     *   const x = centerX + Math.cos(angle) * radius - 100;
-     *   const y = centerY + Math.sin(angle) * radius - 50;
-     *
-     *   // Set the fill color to white
-     *   t.fill(255);
-     *
-     *   // Draw a rectangle with the fill color
-     *   t.rect(x, y, 200, 150);
+     *   // todo...
      * });
      * ```
      */
-    fill(r: number, g?: number, b?: number, a?: number): void;
+    rotate(degrees: number): void;
     /**
-     * Sets the stroke color for subsequent rendering operations
-     * @param r Red component (0-255)
-     * @param g Green component (0-255, optional)
-     * @param b Blue component (0-255, optional)
-     * @param a Alpha component (0-255, optional)
+     * Save the current rendering state to the state stack.
+     * Use with {@link pop} to isolate style changes within a block.
      *
      * @example
      * ```javascript
@@ -56,28 +34,18 @@ export interface RenderingCapabilities {
      * })
      *
      * t.draw(() => {
-     *   // Set the background color to black
      *   t.background(0);
      *
-     *   // Set stroke color to red and stroke weight to 4 pixels
-     *   t.stroke(255, 0, 0);
-     *   t.strokeWeight(4);
-     *
-     *   // Draw a rectangle with red stroke
-     *   t.rect(100, 100, 200, 150);
-     *
-     *   // Rectangle with both fill and stroke
-     *   t.fill(0, 255, 0);
-     *   t.stroke(0, 0, 255);
-     *   t.strokeWeight(2);
-     *   t.rect(350, 100, 200, 150);
+     *   t.push(); // Save current state
+     *   // todo...
+     *   t.pop(); // Restore previous state
      * });
      * ```
      */
-    stroke(r: number, g?: number, b?: number, a?: number): void;
+    push(): void;
     /**
-     * Sets the stroke weight (thickness) for subsequent stroke operations
-     * @param weight The stroke thickness in pixels
+     * Restore the most recently saved rendering state from the state stack.
+     * Use with {@link push} to isolate style changes within a block.
      *
      * @example
      * ```javascript
@@ -89,20 +57,19 @@ export interface RenderingCapabilities {
      * t.draw(() => {
      *   t.background(0);
      *
-     *   // Thin stroke
-     *   t.stroke(255);
-     *   t.strokeWeight(1);
-     *   t.rect(50, 50, 100, 100);
-     *
-     *   // Thick stroke
-     *   t.strokeWeight(8);
-     *   t.rect(200, 50, 100, 100);
+     *   t.push(); // Save current state
+     *   // todo...
+     *   t.pop(); // Restore previous state
      * });
      * ```
      */
-    strokeWeight(weight: number): void;
+    pop(): void;
     /**
-     * Disables stroke rendering for subsequent operations
+     * Draw a rectangle with the current settings.
+     * @param x X-coordinate of the rectangle
+     * @param y Y-coordinate of the rectangle
+     * @param width Width of the rectangle
+     * @param height Height of the rectangle
      *
      * @example
      * ```javascript
@@ -112,23 +79,20 @@ export interface RenderingCapabilities {
      * })
      *
      * t.draw(() => {
+     *   // Set the background color to black
      *   t.background(0);
      *
-     *   // Rectangle with stroke
-     *   t.fill(255, 0, 0);
-     *   t.stroke(0, 255, 0);
-     *   t.strokeWeight(4);
-     *   t.rect(100, 100, 150, 100);
-     *
-     *   // Rectangle without stroke (fill only)
-     *   t.noStroke();
-     *   t.rect(300, 100, 150, 100);
+     *   // todo...
      * });
      * ```
      */
-    noStroke(): void;
+    rect(x: number, y: number, width?: number, height?: number): void;
     /**
-     * Disables fill rendering for subsequent operations
+     * Draw a line from point (x1, y1) to point (x2, y2) with the settings.
+     * @param x1 X-coordinate of the line start point
+     * @param y1 Y-coordinate of the line start point
+     * @param x2 X-coordinate of the line end point
+     * @param y2 Y-coordinate of the line end point
      *
      * @example
      * ```javascript
@@ -138,24 +102,20 @@ export interface RenderingCapabilities {
      * })
      *
      * t.draw(() => {
+     *   // Set the background color to black
      *   t.background(0);
      *
-     *   // Rectangle with fill
-     *   t.fill(255, 0, 0);
-     *   t.stroke(0, 255, 0);
-     *   t.strokeWeight(4);
-     *   t.rect(100, 100, 150, 100);
-     *
-     *   // Rectangle without fill (stroke only)
-     *   t.noFill();
-     *   t.rect(300, 100, 150, 100);
+     *   // todo
      * });
      * ```
      */
-    noFill(): void;
+    line(x1: number, y1: number, x2: number, y2: number): void;
     /**
-     * Sets the rotation angle for subsequent rendering operations
-     * @param degrees The rotation angle in degrees
+     * Set the background color for the canvas.
+     * @param r Red component (0-255)
+     * @param g Green component (0-255)
+     * @param b Blue component (0-255)
+     * @param a Alpha component (0-255)
      *
      * @example
      * ```javascript
@@ -165,64 +125,59 @@ export interface RenderingCapabilities {
      * })
      *
      * t.draw(() => {
-     *   t.background(0);
-     *
-     *   // Normal rectangle
-     *   t.fill(255, 0, 0);
-     *   t.rect(100, 100, 150, 100);
-     *
-     *   // Rotated rectangle
-     *   t.push(); // Save current state
-     *   t.rotate(45); // Rotate 45 degrees
-     *   t.fill(0, 255, 0);
-     *   t.rect(300, 100, 150, 100);
-     *   t.pop(); // Restore state (no rotation)
-     *
-     *   // Back to normal (no rotation)
-     *   t.fill(0, 0, 255);
-     *   t.rect(500, 100, 150, 100);
+     *   // Set the background color to white
+     *   t.background(255);
      * });
      * ```
      */
-    rotate(degrees: number): void;
+    background(r: number, g?: number, b?: number, a?: number): void;
     /**
-     * Save the current rendering state (fill, stroke, etc.) to the state stack.
-     * Use with {@link pop} to isolate style changes within a block.
+     * Clear the canvas.
      *
      * @example
      * ```javascript
      * const t = await textmode.create({
-     *   width: 800,
-     *   height: 600,
+     *  width: 800,
+     *  height: 600,
      * })
      *
      * t.draw(() => {
-     *   t.background(0);
-     *
-     *   // Set initial styles
-     *   t.fill(255, 0, 0);      // Red fill
-     *   t.stroke(0, 255, 0);    // Green stroke
-     *   t.strokeWeight(4);      // Thick stroke
-     *
-     *   t.push(); // Save current state
-     *
-     *   // Change styles temporarily
-     *   t.fill(0, 0, 255);      // Blue fill
-     *   t.stroke(255, 255, 0);  // Yellow stroke
-     *   t.strokeWeight(2);      // Thin stroke
-     *   t.rect(100, 100, 150, 100);
+     *  // Clear the canvas
+     *  t.clear();
+     * });
+     * ```
+     */
+    clear(): void;
+    /**
+     * Update the line weight (thickness) for subsequent {@link line} and {@link bezierCurve} calls.
+     * @param weight The line weight (thickness) to set.
      *
-     *   t.pop(); // Restore previous state
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *  width: 800,
+     *  height: 600,
+     * })
      *
-     *   // Back to red fill, green stroke, thick stroke
-     *   t.rect(300, 100, 150, 100);
+     * t.draw(() => {
+     *  t.background(0);
+     *  t.lineWeight(1); // Thin line
+     *  t.line(0, 0, t.grid.cols, t.grid.rows);
      * });
      * ```
      */
-    push(): void;
+    lineWeight(weight: number): void;
     /**
-     * Restore the most recently saved rendering state from the state stack.
-     * Use with {@link push} to isolate style changes within a block.
+     * Draw a smooth cubic bezier curve between two points with two control points.
+     * The curve thickness is controlled by the current {@link lineWeight} setting.
+     * @param x1 Start point X coordinate
+     * @param y1 Start point Y coordinate
+     * @param cp1x First control point X coordinate
+     * @param cp1y First control point Y coordinate
+     * @param cp2x Second control point X coordinate
+     * @param cp2y Second control point Y coordinate
+     * @param x2 End point X coordinate
+     * @param y2 End point Y coordinate
      *
      * @example
      * ```javascript
@@ -234,39 +189,14 @@ export interface RenderingCapabilities {
      * t.draw(() => {
      *   t.background(0);
      *
-     *   // Default styles
-     *   t.fill(255);           // White fill
-     *   t.stroke(0);           // Black stroke
-     *   t.strokeWeight(1);     // Thin stroke
-     *
-     *   t.push(); // Save current state
-     *
-     *   // Temporary style changes
-     *   t.fill(255, 0, 0);     // Red fill
-     *   t.strokeWeight(8);     // Thick stroke
-     *   t.rect(50, 50, 100, 100);
-     *
-     *   t.push(); // Save red style state
-     *
-     *   t.fill(0, 255, 0);     // Green fill
-     *   t.noStroke();          // No stroke
-     *   t.rect(200, 50, 100, 100);
-     *
-     *   t.pop(); // Back to red fill, thick stroke
-     *   t.rect(350, 50, 100, 100);
-     *
-     *   t.pop(); // Back to white fill, black stroke, thin stroke
-     *   t.rect(500, 50, 100, 100);
+     *   // todo
      * });
      * ```
      */
-    pop(): void;
+    bezierCurve(x1: number, y1: number, cp1x: number, cp1y: number, cp2x: number, cp2y: number, x2: number, y2: number): void;
     /**
-     * Draw a rectangle with the current shader or fill color.
-     * @param x X-coordinate of the rectangle
-     * @param y Y-coordinate of the rectangle
-     * @param width Width of the rectangle
-     * @param height Height of the rectangle
+     * Set the character to be used for subsequent rendering operations.
+     * @param character The character to set
      *
      * @example
      * ```javascript
@@ -276,34 +206,19 @@ export interface RenderingCapabilities {
      * })
      *
      * t.draw(() => {
-     *   // Set the background color to black
      *   t.background(0);
-     *
-     *   const centerX = t.width / 2;
-     *   const centerY = t.height / 2;
-     *   const radius = Math.min(t.width, t .height) / 3;
-     *   const speed = 0.02; // Adjust speed of rotation
-     *
-     *   const angle = t.frameCount * speed;
-     *   const x = centerX + Math.cos(angle) * radius - 100;
-     *   const y = centerY + Math.sin(angle) * radius - 50;
-     *
-     *   // Set the fill color to white
-     *   t.fill(255);
-     *
-     *   // Draw a rectangle with the fill color
-     *   t.rect(x, y, 200, 150);
+     *   t.char('█');
+     *   t.rect(10, 10, 5, 5);
      * });
      * ```
      */
-    rect(x: number, y: number, width?: number, height?: number): void;
+    char(character: string): void;
     /**
-     * Draw a line from point (x1, y1) to point (x2, y2) with the current stroke settings.
-     * Lines respect stroke color, stroke weight, and rotation, but ignore fill properties.
-     * @param x1 X-coordinate of the line start point
-     * @param y1 Y-coordinate of the line start point
-     * @param x2 X-coordinate of the line end point
-     * @param y2 Y-coordinate of the line end point
+     * Set the character color for subsequent rendering operations.
+     * @param r Red component (0-255)
+     * @param g Green component (0-255)
+     * @param b Blue component (0-255)
+     * @param a Alpha component (0-255)
      *
      * @example
      * ```javascript
@@ -313,40 +228,19 @@ export interface RenderingCapabilities {
      * })
      *
      * t.draw(() => {
-     *   // Set the background color to black
      *   t.background(0);
-     *
-     *   // Draw a simple line
-     *   t.stroke(255, 0, 0); // Red stroke
-     *   t.strokeWeight(2);   // 2px thick
-     *   t.line(100, 100, 300, 200);
-     *
-     *   // Draw an animated rotating line
-     *   t.push();
-     *   t.stroke(0, 255, 0); // Green stroke
-     *   t.strokeWeight(4);   // 4px thick
-     *   t.rotate(t.frameCount * 2); // Rotate based on frame count
-     *   t.line(400, 300, 600, 300);
-     *   t.pop();
-     *
-     *   // Draw a thick yellow line
-     *   t.stroke(255, 255, 0); // Yellow stroke
-     *   t.strokeWeight(8);     // 8px thick
-     *   t.line(200, 400, 400, 500);
-     *
-     *   // Line with no stroke won't be visible
-     *   t.noStroke();
-     *   t.line(500, 100, 700, 200); // This won't render
+     *   t.charColor(255, 0, 0, 255); // Red character
+     *   t.rect(10, 10, 5, 5);
      * });
      * ```
      */
-    line(x1: number, y1: number, x2: number, y2: number): void;
+    charColor(r: number, g: number, b: number, a: number): void;
     /**
-     * Set the background color for the canvas.
+     * Set the cell background color for subsequent rendering operations.
      * @param r Red component (0-255)
-     * @param g Green component (0-255, optional)
-     * @param b Blue component (0-255, optional)
-     * @param a Alpha component (0-255, optional)
+     * @param g Green component (0-255)
+     * @param b Blue component (0-255)
+     * @param a Alpha component (0-255)
      *
      * @example
      * ```javascript
@@ -356,72 +250,156 @@ export interface RenderingCapabilities {
      * })
      *
      * t.draw(() => {
-     *   // Set the background color to black
      *   t.background(0);
-     *
-     *   const centerX = t.width / 2;
-     *   const centerY = t.height / 2;
-     *   const radius = Math.min(t.width, t .height) / 3;
-     *   const speed = 0.02; // Adjust speed of rotation
-     *
-     *   const angle = t.frameCount * speed;
-     *   const x = centerX + Math.cos(angle) * radius - 100;
-     *   const y = centerY + Math.sin(angle) * radius - 50;
-     *
-     *   // Set the fill color to white
-     *   t.fill(255);
-     *
-     *   // Draw a rectangle with the fill color
-     *   t.rect(x, y, 200, 150);
+     *   t.cellColor(0, 255, 0, 255); // Green cell background
+     *   t.rect(10, 10, 5, 5);
      * });
      * ```
      */
-    background(r: number, g?: number, b?: number, a?: number): void;
+    cellColor(r: number, g: number, b: number, a: number): void;
     /**
-     * Create a shader program from vertex and fragment source code.
-     * @param vertexSource The GLSL source code for the vertex shader.
-     * @param fragmentSource The GLSL source code for the fragment shader.
-     * @returns The created shader program for use in `textmode.js`.
-     * @ignore
+     * Toggle horizontal flipping for subsequent character rendering.
+     * @param toggle Whether to flip horizontally
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   t.background(0);
+     *   t.flipHorizontally(true);
+     *   t.rect(10, 10, 5, 5);
+     * });
+     * ```
      */
-    createShader(vertexSource: string, fragmentSource: string): Shader;
+    flipHorizontally(toggle: boolean): void;
     /**
-     * Create a filter shader program from a fragment source code.
-     * @param fragmentSource The GLSL source code for the fragment shader.
-     * @returns The created filter shader program for use in `textmode.js`.
+     * Toggle vertical flipping for subsequent character rendering.
+     * @param toggle Whether to flip vertically
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   t.background(0);
+     *   t.flipVertically(true);
+     *   t.rect(10, 10, 5, 5);
+     * });
+     * ```
      */
-    createFilterShader(fragmentSource: string): Shader;
+    flipVertically(toggle: boolean): void;
     /**
-     * Set the current shader for rendering.
-     * @param shader The shader program to use for rendering.
+     * Set the character rotation angle for subsequent character rendering.
+     * @param degrees The rotation angle in degrees
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   t.background(0);
+     *   t.charRotation(45); // Rotate character 45 degrees
+     *   t.rect(10, 10, 5, 5);
+     * });
+     * ```
      */
-    shader(shader: Shader): void;
+    charRotation(degrees: number): void;
     /**
-     * Set a uniform variable for the current shader.
-     * @param name The name of the uniform variable to set.
-     * @param value The value to set for the uniform variable.
+     * Toggle color inversion for subsequent character rendering.
+     * @param toggle Whether to invert colors
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   t.background(0);
+     *   t.invert(true);
+     *   t.rect(10, 10, 5, 5);
+     * });
+     * ```
      */
-    setUniform(name: string, value: UniformValue): void;
+    invert(toggle: boolean): void;
     /**
-     * Draw an image to the canvas.
-     * @param source The image source
-     * @param posX The x position to draw the image
-     * @param posY The y position to draw the image
-     * @param width The width to draw the image (optional)
-     * @param height The height to draw the image (optional)
+     * Draw an ellipse with the current settings.
+     * @param x X-coordinate of the ellipse center
+     * @param y Y-coordinate of the ellipse center
+     * @param width Width of the ellipse
+     * @param height Height of the ellipse
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   t.background(0);
+     *   t.ellipse(20, 15, 10, 8);
+     * });
+     * ```
      */
-    image(source: Framebuffer, posX: number, posY: number, width?: number, height?: number): void;
+    ellipse(x: number, y: number, width: number, height: number): void;
     /**
-     * Clear the canvas.
+     * Draw a triangle with the current settings.
+     * @param x1 X-coordinate of the first vertex
+     * @param y1 Y-coordinate of the first vertex
+     * @param x2 X-coordinate of the second vertex
+     * @param y2 Y-coordinate of the second vertex
+     * @param x3 X-coordinate of the third vertex
+     * @param y3 Y-coordinate of the third vertex
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   t.background(0);
+     *   t.triangle(10, 10, 20, 10, 15, 20);
+     * });
+     * ```
      */
-    clear(): void;
+    triangle(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): void;
     /**
-     * Create a framebuffer.
-     * @param width The width in pixels
-     * @param height The height in pixels
-     * @param options Additional options for the framebuffer
+     * Draw an arc with the current settings.
+     * @param x X-coordinate of the arc center
+     * @param y Y-coordinate of the arc center
+     * @param width Width of the arc
+     * @param height Height of the arc
+     * @param startAngle Starting angle in radians
+     * @param endAngle Ending angle in radians
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   t.background(0);
+     *   t.arc(20, 15, 10, 10, 0, Math.PI);
+     * });
+     * ```
      */
-    createFramebuffer(width: number, height: number, options: FramebufferOptions): Framebuffer;
+    arc(x: number, y: number, width: number, height: number, startAngle: number, endAngle: number): void;
 }
 /**
  * Mixin that adds rendering capabilities to a class by delegating to GLRenderer