textmode.js 0.2.0-beta.5 → 0.2.0

package/README.md

@@ -10,32 +10,36 @@
 
 </div>
 
-`textmode.js` is a free, lightweight and framework-agnostic creative coding library for real-time ASCII art and textmode experiences in web browsers.
+textmode.js is a lightweight creative-coding library for real‑time ASCII and textmode graphics in the browser. It combines a grid‑based API with a modern `WebGL2` pipeline, multiple render targets, and aggressive instanced rendering to deliver smooth, high‑performance rendering.
 
-Transform any `<canvas>` or `<video>` element into dynamic ASCII representations with blazing-fast WebGL rendering. Whether you're using p5.js, three.js, or vanilla JavaScript, textmode.js seamlessly integrates with your existing projects to create interactive textmode games, live visual performances, and artistic installations.
+The library is designed to be easy to use and accessible to developers of all skill levels. Whether you're a seasoned developer or just starting out, `textmode.js` provides a simple and intuitive API that makes it easy to create stunning textmode art and animations.
 
-For standalone projects, textmode.js provides its own p5.js-inspired drawing API, letting you create compelling ASCII experiences without additional dependencies. 
-
-The library powers live coding performances, interactive installations, and digital art projects worldwide, bringing the nostalgic aesthetic of textmode art into modern web development.
+Key ideas in one sentence: you draw with simple shape calls; under the hood we batch instances and write to a special framebuffer with five render targets; a conversion pass maps those buffers to a crisp grid of characters on the canvas.
 
 ## Features
-- **Dependency-free**: No external libraries required, making it lightweight and easy to integrate into any project.
-- **TTF/OTF font support**: Load and use TrueType and OpenType fonts for rendering textmode art, allowing for a wide range of styles and characters.
-- **Framework-agnostic**: Use `textmode.js` with any JavaScript framework or library, such as `p5.js`, `three.js`, or even vanilla JavaScript.
-- **Standalone drawing API**: Use the built-in `p5.js`-like drawing API for creating textmode art without any other dependencies.
-- **Injectable**: Easily inject `textmode.js` into websites like YouTube to convert `<video>` or `<canvas>` elements into textmode representations for a unique viewing experience.
-- **WebGL1/WebGL2 support**: All shader code provided by `textmode.js` is written in `GLSL ES 1.0`, making it compatible with both `WebGL1` and `WebGL2` contexts, allowing for a wide range of devices to run your ASCII projects.
-- **Exporting**: Export your creations to various image formats, and as `.txt`, `.svg` and image files for easy sharing, printing and plotting.
-- **Typescript support**: Fully typed library with TypeScript definitions, making it easy to integrate into TypeScript projects and ensuring type safety.
+- Real‑time* ASCII/textmode rendering with a simple drawing API
+- `WebGL2` pipeline with [Multiple Render Targets (MRT)](https://en.wikipedia.org/wiki/Multiple_Render_Targets) for rich per‑cell data
+- Instanced rendering and batching for low draw call counts
+- Font system with runtime font loading and dynamic sizing
+- Author custom filter shaders in [`GLSL ES 3.00`](https://registry.khronos.org/OpenGL/specs/es/3.0/GLSL_ES_Specification_3.00.pdf) for advanced effects
+- Flexible exporting: TXT, SVG, and raster images *(PNG/JPG/WebP)*
+- Animation loop control: `frameRate`, `loop`/`noLoop`, `redraw`, `frameCount`, etc.
+- Zero dependencies, written in TypeScript, with comprehensive type definitions
+
+> [!NOTE]
+> *Performance depends on the complexity of your scene and device capabilities. Consider authoring filter shaders for complex effects at low cost.
 
 ## Installation
 
 ### Prerequisites
 
 To get started with `textmode.js`, you'll need:
-- A **modern web browser** with `WebGL` support
-- A `<canvas>` or `<video>` element in your project *(optional, for capturing content from a different source)*
-- **Node.js 16+** and `npm` *(optional, for ESM installation)*
+- A **modern web browser** with `WebGL2` support *(Chrome, Firefox, Safari, Edge, etc.)*
+- A [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) in your project *(optional, otherwise the library will create one for you)*
+- [Node.js 16+](https://nodejs.org/) and `npm` *(optional, for ESM installation)*
+
+> [!IMPORTANT]
+> `textmode.js` is currently fully dependent on `WebGL2`. Ensure your target browsers support it. You can check compatibility on [caniuse.com](https://caniuse.com/webgl2).
 
 ### Importing `textmode.js`
 
@@ -43,28 +47,31 @@ To get started with `textmode.js`, you'll need:
 
 | Bundle type | File size | Font included? | Best for |
 |-------------|-----------|---------------|----------|
-| **Standard UMD**<br/>(`textmode.umd.js`) | ~111kB | ✅ [UrsaFont](https://ursafrank.itch.io/ursafont) embedded | Quick setup, prototyping |
-| **Standard ESM**<br/>(`textmode.esm.js`) | ~128kB | ✅ [UrsaFont](https://ursafrank.itch.io/ursafont) embedded | Quick setup, prototyping |
-| **Minified UMD**<br/>(`textmode.umd.min.js`) | ~64kB | ❌ Requires external font | Production apps, custom fonts |
-| **Minified ESM**<br/>(`textmode.esm.min.js`) | ~82kB | ❌ Requires external font | Production apps, custom fonts |
+| **Standard UMD** (`textmode.umd.js`) | ~112kB | ✅ [UrsaFont](https://ursafrank.itch.io/ursafont) embedded | Quick setup, prototyping |
+| **Standard ESM** (`textmode.esm.js`) | ~130kB | ✅ [UrsaFont](https://ursafrank.itch.io/ursafont) embedded | Quick setup, prototyping |
+| **Minified UMD** (`textmode.umd.min.js`) | ~65kB | ❌ Requires external font | Custom fonts |
+| **Minified ESM** (`textmode.esm.min.js`) | ~84kB | ❌ Requires external font | Custom fonts |
 
 **Choose standard bundles for:**
 - Quick setup with no additional configuration
-- Everything embedded and ready to use
-- Getting started without worrying about fonts
+- Production applications that use the embedded font
 
 **Choose minified bundles for:**
 - Production applications that don't use the embedded font
 
-#### UMD
+> [!NOTE]
+> Apart from the font inclusion, both bundle types are functionally identical and equally minified.
+
+### UMD
 
 To use `textmode.js` in a UMD environment, download the latest `umd` build from the [**GitHub releases page**](https://github.com/humanbydefinition/textmode.js/releases/) or import it directly from a CDN like [**jsDelivr**](https://www.jsdelivr.com/package/npm/textmode.js). The library is distributed as a single JavaScript file, which you can include in your project by adding the following script tag to your HTML file:
 
 ```html
+<!-- index.html -->
 <!DOCTYPE html>
 <html>
 <head>
-    <title>textmode.js example</title>
+    <title>textmode.js sketch</title>
 
     <!-- Standard bundle (with embedded UrsaFont) -->
     <script src="https://cdn.jsdelivr.net/npm/textmode.js@latest/dist/textmode.umd.js"></script>
@@ -73,26 +80,40 @@ To use `textmode.js` in a UMD environment, download the latest `umd` build from
     <!-- <script src="https://cdn.jsdelivr.net/npm/textmode.js@latest/dist/textmode.umd.min.js"></script> -->
 </head>
 <body>
-    <canvas id="myCanvas" width="800" height="600"></canvas>
-    <script>
-        (async () => {
-            // Reference your existing canvas element
-            const canvas = document.querySelector('canvas#myCanvas');
-
-            // Standard bundle - no font configuration needed
-            const textmodifier = await textmode.create(canvas);
-            
-            // Minified bundle - font required
-            // const textmodifier = await textmode.create(canvas, {
-            //     fontSource: './path/to/your/font.ttf'
-            // });
-        })();
-    </script>
+    <script src="sketch.js"></script>
 </body>
 </html>
 ```
 
-#### ESM
+```javascript
+// sketch.js
+const t = textmode.create({
+    width: window.innerWidth,
+    height: window.innerHeight,
+    fontSize: 16,
+    frameRate: 60
+});
+
+t.setup(() => {
+    // Optional setup code here (e.g., load fonts/shaders, initialize variables that access 't')
+});
+
+t.draw(() => {
+    t.background(32); // Dark gray background
+
+    t.char('A');
+    t.charColor(255, 0, 0); // Cover the top-left quarter of the grid with a rectangle of red 'A's
+    t.rect(0, 0, t.grid.cols / 2, t.grid.rows / 2);
+
+    // ...add your drawing code here!
+});
+
+t.windowResized(() => {
+    t.resizeCanvas(window.innerWidth, window.innerHeight);
+});
+```
+
+### ESM
 
 To use `textmode.js` in an ESM environment, you can install it via `npm`:
 
@@ -102,43 +123,73 @@ npm install textmode.js
 
 Then, you can import it in your JavaScript or TypeScript files:
 
+```html
+<!-- index.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>textmode.js sketch</title>
+</head>
+<body>
+    <script type="module" src="./sketch.js"></script>
+</body>
+</html>
+```
+
 ```javascript
+// sketch.js
 // Standard bundle (with embedded UrsaFont)
 import { textmode } from 'textmode.js';
 
 // OR Minified bundle (requires external font)
 // import { textmode } from 'textmode.js/min';
 
-(async () => {
-    // Canvas example
-    const canvas = document.querySelector('canvas#myCanvas');
-    
-    // Standard bundle - no font configuration needed
-    const textmodifier = await textmode.create(canvas);
-    
-    // Minified bundle - font required
-    // const textmodifier = await textmode.create(canvas, {
-    //     fontSource: './path/to/your/font.ttf'
-    // });
-})();
+const t = textmode.create({
+    width: window.innerWidth,
+    height: window.innerHeight,
+    fontSize: 16,
+    frameRate: 60
+});
+
+t.setup(() => {
+    // Optional setup code here (e.g., load fonts/shaders, initialize variables that access 't')
+});
+
+t.draw(() => {
+    t.background(32); // Dark gray background
+
+    t.char('A');
+    t.charColor(255, 0, 0); // Cover the top-left quarter of the grid with a rectangle of red 'A's
+    t.rect(0, 0, t.grid.cols / 2, t.grid.rows / 2);
+
+    // ...add your drawing code here!
+});
+
+t.windowResized(() => {
+    t.resizeCanvas(window.innerWidth, window.innerHeight);
+});
 ```
 
-### Next steps
+## Verification
+
+To verify your installation is working correctly, try this simple test:
+
+```javascript
+// Test if textmode.js is available
+console.log('textmode.js version:', textmode.version);
+```
 
-Now that you have `textmode.js` set up, you can start creating your ASCII art projects! Check out the [**API documentation**](/api/) for detailed information on how to use the library, including examples and advanced features.
+> [!NOTE]
+> If you see the version number printed in the console, your installation was successful!
 
-## Learn more
+## Next steps
 
-### 📚 [Visit the Official Documentation](https://code.textmode.art/)
+Now that you have `textmode.js` set up, you can start creating your textmode art projects! Going forward, here are some resources to help you get the most out of the library:
 
-Explore the comprehensive documentation at [code.textmode.art](https://code.textmode.art/) for:
-- Detailed guides
-- Interactive examples
-- Complete API reference
-- Tips and tricks
-- ... and much more!
+📚 **[Visit the Official Documentation](https://code.textmode.art/)** for detailed guides, interactive examples, complete API reference, tips and tricks, and much more to unlock the full potential of `textmode.js` in your creative coding projects.
 
-The documentation will help you unlock the full potential of `textmode.js` in your creative coding projects.
+🎨 **[Try the Web Editor](https://editor.textmode.art)** to experiment with `textmode.js` without setting up a local environment.
 
 ## Acknowledgements
 

package/dist/textmode.esm.js

@@ -62,8 +62,8 @@ const v = class v {
   }
 };
 n(v, "o", null);
-let F = v;
-const _ = F.D(), V = /* @__PURE__ */ new WeakMap();
+let S = v;
+const _ = S.D(), V = /* @__PURE__ */ new WeakMap();
 function G(E, A) {
   V.set(E, A);
 }
@@ -348,7 +348,7 @@ class tA {
     n(this, "RA", /* @__PURE__ */ new Map());
     this.m = A;
   }
-  TA(A, t, e, s) {
+  SA(A, t, e, s) {
     const r = this.m;
     let i = this.RA.get(A);
     i || (i = /* @__PURE__ */ new Map(), this.RA.set(A, i));
@@ -362,7 +362,7 @@ class tA {
     }
     r.bindVertexArray(B);
   }
-  SA() {
+  TA() {
     this.m.bindVertexArray(null);
   }
   W() {
@@ -388,9 +388,9 @@ class eA {
       if (!a || !a.HA()) return;
       const g = a.unitGeometry, l = a.unitBuffer;
       try {
-        this.FA.TA(s.QA, a.type + "", g, l), a.batch.WA(s), a.batch.JA(g.primitiveType, g.vertexCount);
+        this.FA.SA(s.QA, a.type + "", g, l), a.batch.WA(s), a.batch.JA(g.primitiveType, g.vertexCount);
       } finally {
-        a.batch.VA(s), this.FA.SA(), a.KA();
+        a.batch.VA(s), this.FA.TA(), a.KA();
       }
     };
     let o = null, h = null;
@@ -419,9 +419,9 @@ class eA {
     if (s.jA({ x: 0, y: 0, width: g.width, height: g.height }, l), s.HA()) {
       const u = s.unitGeometry, M = s.unitBuffer;
       try {
-        this.FA.TA(o.QA, s.type + "", u, M), s.batch.WA(o), s.batch.JA(u.primitiveType, u.vertexCount);
+        this.FA.SA(o.QA, s.type + "", u, M), s.batch.WA(o), s.batch.JA(u.primitiveType, u.vertexCount);
       } finally {
-        s.batch.VA(o), this.FA.SA(), s.KA();
+        s.batch.VA(o), this.FA.TA(), s.KA();
       }
     }
     g.H();
@@ -433,9 +433,9 @@ class eA {
     if (s.jA({ x: d, y: I, width: w, height: p }, e), s.HA()) {
       const u = s.unitGeometry, M = s.unitBuffer;
       try {
-        this.FA.TA(c.QA, s.type + "", u, M), s.batch.WA(c), s.batch.JA(u.primitiveType, u.vertexCount);
+        this.FA.SA(c.QA, s.type + "", u, M), s.batch.WA(c), s.batch.JA(u.primitiveType, u.vertexCount);
       } finally {
-        s.batch.VA(c), this.FA.SA(), s.KA();
+        s.batch.VA(c), this.FA.TA(), s.KA();
       }
     }
     A.shader.AA();
@@ -769,8 +769,8 @@ class DA {
   constructor(A) {
     n(this, "m");
     n(this, "Rt", null);
-    n(this, "Tt", null);
-    n(this, "St", {});
+    n(this, "St", null);
+    n(this, "Tt", {});
     n(this, "Ft", null);
     n(this, "Ot", /* @__PURE__ */ new Map());
     n(this, "Ut");
@@ -791,13 +791,13 @@ class DA {
     return new z(this.m, A, t);
   }
   Vt(A) {
-    this.Tt = A, A && (this.St = {});
+    this.St = A, A && (this.Tt = {});
   }
   Kt(A, t) {
-    this.St[A] = t;
+    this.Tt[A] = t;
   }
   Zt(A) {
-    Object.assign(this.St, A);
+    Object.assign(this.Tt, A);
   }
   jt(A) {
     return new z(this.m, L, A);
@@ -810,7 +810,7 @@ class DA {
     c !== -1 && (r.enableVertexAttribArray(c), r.vertexAttribPointer(c, 2, r.FLOAT, !1, 8, 0)), r.drawArrays(r.TRIANGLES, 0, 6), c !== -1 && r.disableVertexAttribArray(c);
   }
   Nt(A, t, e, s) {
-    this.Tt ? (this.Lt.st(A, t, e, s, this.Tt, { ...this.St }, this.kt), this.Tt = null, this.St = {}) : this.Lt.Bt(A, t, e, s, this.kt);
+    this.St ? (this.Lt.st(A, t, e, s, this.St, { ...this.Tt }, this.kt), this.St = null, this.Tt = {}) : this.Lt.Bt(A, t, e, s, this.kt);
   }
   qt(A, t, e, s) {
     this.Lt.it(A, t, e, s, this.kt.lineWeight, this.kt);
@@ -1011,7 +1011,7 @@ const f = { readShort: (E, A) => (f.t.uint16[0] = E[A] << 8 | E[A + 1], f.t.int1
   }
   return null;
 }, T: N, B: f };
-class S {
+class F {
   constructor() {
     n(this, "ae", /* @__PURE__ */ new Map());
     n(this, "he", /* @__PURE__ */ new Map());
@@ -1150,7 +1150,7 @@ class dA {
 class wA {
   constructor() {
     n(this, "$e");
-    const A = new S();
+    const A = new F();
     this.$e = new dA(A);
   }
   extractCharacters(A) {
@@ -1172,18 +1172,18 @@ class mA {
     n(this, "Ye");
     n(this, "ze");
     n(this, "Re");
-    this.ze = A, this.Re = new S(), this.Me = document.createElement("canvas"), this.Ye = this.Me.getContext("2d", { willReadFrequently: !0, alpha: !1 });
+    this.ze = A, this.Re = new F(), this.Me = document.createElement("canvas"), this.Ye = this.Me.getContext("2d", { willReadFrequently: !0, alpha: !1 });
   }
   createTextureAtlas(A, t, e, s) {
     const r = A.length, i = Math.ceil(Math.sqrt(r)), B = Math.ceil(r / i), Q = t.width * i, o = t.height * B, h = typeof s == "object" ? s : null;
-    this.Te(Q, o), this.Se(A, t, i, e, h);
+    this.Se(Q, o), this.Te(A, t, i, e, h);
     const a = this.ze.Be(Q, o, 1, { filter: "nearest" });
     return a.F(this.Me), { framebuffer: a, columns: i, rows: B };
   }
-  Te(A, t) {
+  Se(A, t) {
     this.Me.width = A, this.Me.height = t, this.Me.style.width = A + "px", this.Me.style.height = A + "px", this.Ye.imageSmoothingEnabled = !1, this.Me.style.imageRendering = "pixelated", this.Ye.fillStyle = "black", this.Ye.fillRect(0, 0, A, t), this.Ye.textBaseline = "top", this.Ye.textAlign = "left", this.Ye.fillStyle = "white";
   }
-  Se(A, t, e, s, r) {
+  Te(A, t, e, s, r) {
     const i = s / r.head.unitsPerEm;
     for (let B = 0; B < A.length; B++) {
       const Q = B % e, o = Math.floor(B / e), h = A[B].character, a = this.Fe(r, h);
@@ -1245,7 +1245,7 @@ class mA {
 class pA {
   constructor() {
     n(this, "fe");
-    this.fe = new S();
+    this.fe = new F();
   }
   calculateMaxGlyphDimensions(A, t, e) {
     let s = 0;
@@ -1272,7 +1272,7 @@ class pA {
 class yA {
   constructor() {
     n(this, "Re");
-    this.Re = new S();
+    this.Re = new F();
   }
   createCharacterObjects(A, t) {
     return A.map((e, s) => {
@@ -1646,10 +1646,10 @@ class W {
     const A = /* @__PURE__ */ new Date();
     return { date: A.toISOString().split("T")[0], time: A.toTimeString().split(" ")[0].replace(/:/g, "-") };
   }
-  TB(A) {
+  SB(A) {
     return A.replace(/[<>:"/\\|?*]/g, "_").replace(/\s+/g, "_").replace(/_{2,}/g, "_").replace(/^_+|_+$/g, "").substring(0, 255);
   }
-  SB() {
+  TB() {
     return "textmode-export-" + this.zB();
   }
 }
@@ -1827,10 +1827,10 @@ class YA extends W {
     return this.MB(A, "image/svg+xml;charset=utf-8");
   }
   ss(A, t) {
-    this.YB(A, this.TB(t) + ".svg", "image/svg+xml;charset=utf-8");
+    this.YB(A, this.SB(t) + ".svg", "image/svg+xml;charset=utf-8");
   }
   Qs(A, t) {
-    this.ss(A, t || this.SB());
+    this.ss(A, t || this.TB());
   }
 }
 class H {
@@ -1841,7 +1841,7 @@ class H {
     this.rs = new MA(), this.Es = new GA(), this.ns = new YA();
   }
   gs(A) {
-    return { includeBackgroundRectangles: A.includeBackgroundRectangles ?? !0, drawMode: A.drawMode ?? "fill", strokeWidth: A.strokeWidth ?? 1, backgroundColor: A.backgroundColor ?? [0, 0, 0, 0], filename: A.filename || this.ns.SB() };
+    return { includeBackgroundRectangles: A.includeBackgroundRectangles ?? !0, drawMode: A.drawMode ?? "fill", strokeWidth: A.strokeWidth ?? 1, backgroundColor: A.backgroundColor ?? [0, 0, 0, 0], filename: A.filename || this.ns.TB() };
   }
   hs(A, t = {}) {
     const e = this.rs.UB(this.rs.bB(A.pipeline), A.grid), s = this.Es.ts(e, A.grid, A.font, this.gs(t));
@@ -1851,7 +1851,7 @@ class H {
     this.ns.Qs(this.hs(A, t), t.filename);
   }
 }
-class SA extends O {
+class FA extends O {
   cs(A, t, e, s = " ") {
     var B;
     const r = [];
@@ -1867,7 +1867,7 @@ class SA extends O {
     return r;
   }
 }
-class FA {
+class SA {
   Cs(A, t) {
     const e = [];
     for (const r of A) {
@@ -1886,8 +1886,8 @@ class zA extends W {
     this.YB(A, e, "text/plain;charset=utf-8");
   }
   ls(A) {
-    let t = this.TB(A);
-    return t === ".txt" || t.length <= 4 ? this.SB() : t;
+    let t = this.SB(A);
+    return t === ".txt" || t.length <= 4 ? this.TB() : t;
   }
 }
 class X {
@@ -1895,10 +1895,10 @@ class X {
     n(this, "rs");
     n(this, "Es");
     n(this, "ns");
-    this.rs = new SA(), this.Es = new FA(), this.ns = new zA();
+    this.rs = new FA(), this.Es = new SA(), this.ns = new zA();
   }
   gs(A) {
-    return { preserveTrailingSpaces: A.preserveTrailingSpaces ?? !1, lineEnding: A.lineEnding ?? "lf", emptyCharacter: A.emptyCharacter ?? " ", filename: A.filename || this.ns.SB() };
+    return { preserveTrailingSpaces: A.preserveTrailingSpaces ?? !1, lineEnding: A.lineEnding ?? "lf", emptyCharacter: A.emptyCharacter ?? " ", filename: A.filename || this.ns.TB() };
   }
   Ps(A, t = {}) {
     const e = this.gs(t), s = this.rs.cs(this.rs.bB(A.pipeline), A.grid, A.font, e.emptyCharacter);
@@ -1945,7 +1945,7 @@ class LA {
 const OA = { png: "image/png", jpg: "image/jpeg", webp: "image/webp" }, J = { png: ".png", jpg: ".jpg", webp: ".webp" };
 class WA extends W {
   ds(A, t, e) {
-    this.ps(A, this.TB(t) + J[e]);
+    this.ps(A, this.SB(t) + J[e]);
   }
   ps(A, t) {
     const e = URL.createObjectURL(A);
@@ -1968,7 +1968,7 @@ class $A {
     this.rs = new UA(), this.Es = new LA(), this.ns = new WA();
   }
   gs(A) {
-    return { format: A.format ?? "png", quality: A.quality ?? 1, scale: A.scale ?? 1, backgroundColor: A.backgroundColor ?? "transparent", filename: A.filename || this.ns.SB() };
+    return { format: A.format ?? "png", quality: A.quality ?? 1, scale: A.scale ?? 1, backgroundColor: A.backgroundColor ?? "transparent", filename: A.filename || this.ns.TB() };
   }
   vs(A) {
     if (!this.ns._s(A.format)) throw Error(`Saving '${A.format}' files is not supported`);
@@ -2062,8 +2062,8 @@ class JA extends function(t, ...e) {
 }(XA, TA, kA, NA, HA) {
   constructor(t = {}) {
     super();
-    n(this, "Ts", !1);
-    n(this, "Ss", () => {
+    n(this, "Ss", !1);
+    n(this, "Ts", () => {
     });
     n(this, "Fs", () => {
     });
@@ -2076,7 +2076,7 @@ precision highp float;in vec2 v_uv;in vec3 v_character;in vec4 v_primaryColor;in
   async Ls(t) {
     await this.We.BB(t.fontSource);
     const e = this.We.maxGlyphDimensions;
-    this.Ms = new vA(this.aB.canvas, e.width, e.height), this.$s = this.ze.Be(this.Ms.cols, this.Ms.rows, 5), this.ks(), this.Ss(), this.Ys.start(() => this.zs());
+    this.Ms = new vA(this.aB.canvas, e.width, e.height), this.$s = this.ze.Be(this.Ms.cols, this.Ms.rows, 5), this.ks(), this.Ts(), this.Ys.start(() => this.zs());
   }
   ks() {
     this.Us = () => {
@@ -2084,13 +2084,13 @@ precision highp float;in vec2 v_uv;in vec3 v_character;in vec4 v_primaryColor;in
     }, window.addEventListener("resize", this.Us);
   }
   zs() {
-    if (this.Ys.measureFrameRate(), this.Ys.incrementFrame(), this.Ts) return;
+    if (this.Ys.measureFrameRate(), this.Ys.incrementFrame(), this.Ss) return;
     this.$s.k(), this.ze.Wt(this.Gs), this.Fs(), this.ze.re(this.Gs), this.$s.H();
     const t = this.ze.state.canvasBackgroundColor;
     this.ze.ot(t[0], t[1], t[2], t[3]), this.ze.Wt(this.Rs), this.Rs.eA({ u_characterTexture: this.We.fontFramebuffer, u_charsetDimensions: [this.We.textureColumns, this.We.textureRows], u_asciiCharacterTexture: this.$s.textures[0], u_primaryColorTexture: this.$s.textures[1], u_secondaryColorTexture: this.$s.textures[2], u_transformTexture: this.$s.textures[4], u_rotationTexture: this.$s.textures[3], u_gridCellDimensions: [this.Ms.cols, this.Ms.rows], u_gridPixelDimensions: [this.Ms.width, this.Ms.height], u_gridOffsetPixels: [this.Ms.offsetX, this.Ms.offsetY], u_aspectRatio: this.Ms.width / this.Ms.height }), this.ze.Xt(this.Ms.offsetX, this.Ms.offsetY, this.Ms.width, this.Ms.height);
   }
   setup(t) {
-    this.Ss = t;
+    this.Ts = t;
   }
   draw(t) {
     this.Fs = t;
@@ -2102,7 +2102,7 @@ precision highp float;in vec2 v_uv;in vec3 v_character;in vec4 v_primaryColor;in
     this.aB.O(t, e), this.Ms.fA(), this.$s.O(this.Ms.cols, this.Ms.rows), this.ze.Qe(), this.zs();
   }
   destroy() {
-    this.Ts || (this.Ys.stop(), window.removeEventListener("resize", this.Us), this.We.W(), this.ze.W(), this.Ts = !0);
+    this.Ss || (this.Ys.stop(), window.removeEventListener("resize", this.Us), this.We.W(), this.ze.W(), this.Ss = !0);
   }
   get grid() {
     return this.Ms;
@@ -2120,7 +2120,7 @@ precision highp float;in vec2 v_uv;in vec3 v_character;in vec4 v_primaryColor;in
     return this.aB.canvas;
   }
   get isDisposed() {
-    return this.Ts;
+    return this.Ss;
   }
   get drawFramebuffer() {
     return this.$s;
@@ -2128,7 +2128,6 @@ precision highp float;in vec2 v_uv;in vec3 v_character;in vec4 v_primaryColor;in
 }
 class $ {
   constructor() {
-    throw new m("Textmode is a static class and cannot be instantiated.");
   }
   static create(A = {}) {
     return new JA(A);
@@ -2137,7 +2136,7 @@ class $ {
     _.u(A);
   }
   static get version() {
-    return "0.2.0-beta.5";
+    return "0.2.0";
   }
 }
 const jA = Object.freeze(Object.defineProperty({ __proto__: null }, Symbol.toStringTag, { value: "Module" })), ZA = $.create, KA = $.setErrorLevel, qA = $.version;