textmode.js 0.1.1 → 0.1.2

package/README.md

@@ -2,7 +2,7 @@
 
 <div align="center">
 
-<img width="1584" height="768" alt="textmodejs_banner" src="https://github.com/user-attachments/assets/f03c2d74-7dc3-45cf-a0a5-043f9438231e" />
+<img alt="textmodejs_banner" src="https://github.com/user-attachments/assets/f03c2d74-7dc3-45cf-a0a5-043f9438231e" />
 
 
 | [![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/) [![WebGL](https://img.shields.io/badge/WebGL1-990000?logo=webgl&logoColor=white)](https://www.khronos.org/webgl/) [![Vite](https://img.shields.io/badge/Vite-646CFF?logo=vite&logoColor=white)](https://vitejs.dev/) | [![docs](https://img.shields.io/badge/docs-vitepress-646cff?logo=vitepress&logoColor=white)](https://code.textmode.art/) [![Discord](https://img.shields.io/discord/1357070706181017691?color=5865F2&label=Discord&logo=discord&logoColor=white)](https://discord.gg/sjrw8QXNks) | [![ko-fi](https://shields.io/badge/ko--fi-donate-ff5f5f?logo=ko-fi)](https://ko-fi.com/V7V8JG2FY) [![Github-sponsors](https://img.shields.io/badge/sponsor-30363D?logo=GitHub-Sponsors&logoColor=#EA4AAA)](https://github.com/sponsors/humanbydefinition) |
@@ -10,20 +10,21 @@
 
 </div>
 
-`textmode.js` is a powerful TypeScript library, designed to transform *any* HTML canvas into dynamic ASCII representations in real-time. With `textmode.js`, you can create intricate ASCII art, textmode games, interactive ASCII experiences, and much more in the web browser with ease.
+`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` and it's predecessor `p5.asciify` are used in live coding performances, installations, interactive art projects and more, allowing artists and developers to explore the unique aesthetic of ASCII art in a modern context. The library is designed to be flexible, efficient, and easy to use, offering a comprehensive range of tools to help you develop unique and engaging ASCII projects.
+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.
 
-## Features
+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.
 
-- **Renderer management**: Create and manage multiple textmode converters with different settings to create a unique rendering pipeline.
-- **Pre-built renderers**: Add pre-built converters, like `'brightness'`-based ones, to your pipeline.
-- **Custom renderers**: Add your own custom textmode converter to the pipeline through code to create unique effects by controlling each cell's ASCII character, character color, background color, and more individually.
-- **Textmodifier management**: Create and manage multiple textmodifiers to apply textmode conversion onto multiple canvases in parallel.
-- **Font management**: Set the font and font size for all ASCII renderers in the pipeline of a textmodifier.
-- **Grid management**: Apply a perfect and responsive grid based on the canvas dimensions, font size, and font metrics, or create a custom grid with a specific number of columns and rows.
+## 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.
-- **Export functionality**: Export your ASCII art as `.txt`, `.svg` and `.json` files for easy sharing, printing and plotting.
+- **Exporting**: Export your creations to various image formats, and as `.txt`, `.svg` and `.json` 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.
 
 ## Installation
 
@@ -31,8 +32,8 @@
 
 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 **HTML canvas element** in your project to apply textmode conversion to
 
 ### Importing `textmode.js`
 
@@ -56,10 +57,6 @@ To use `textmode.js` in a UMD environment, download the latest `umd` build from
             // Reference your existing canvas element
             const canvas = document.querySelector('canvas#myCanvas');
 
-            if (!canvas) {
-                throw new Error('Canvas element not found');
-            }
-
             // Create a `textmodifier` instance to apply textmode conversion to a given canvas
             const textmodifier = await textmode.create(canvas);
         })();
@@ -82,15 +79,17 @@ Then, you can import it in your JavaScript or TypeScript files:
 import { textmode } from 'textmode.js';
 
 (async () => {
-    // Reference your existing canvas element
+    // Canvas example
     const canvas = document.querySelector('canvas#myCanvas');
-
-    if (!canvas) {
-        throw new Error('Canvas element not found');
-    }
-
-    // Create a `textmodifier` instance to apply textmode conversion to a given canvas
     const textmodifier = await textmode.create(canvas);
+    
+    // Video example
+    const video = document.querySelector('video#myVideo');
+    if (video) {
+        const videoTextmodifier = await textmode.create(video);
+        // ASCII conversion will update automatically as video plays
+        video.play();
+    }
 })();
 ```
 
@@ -109,4 +108,11 @@ Explore the comprehensive documentation at [code.textmode.art](https://code.text
 - Tips and tricks
 - ... and much more!
 
-The documentation will help you 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.
+
+## Acknowledgements
+
+`textmode.js` uses a custom-made minified version of [`Typr.js`](https://github.com/photopea/Typr.js) by [**Photopea**](https://github.com/photopea) for font loading and parsing, containing only the necessary components for our use case. `Typr.js` is licensed under the [**MIT License**](https://github.com/photopea/Typr.js/blob/main/LICENSE).
+
+The non-minified version of `textmode.js` ships with [`UrsaFont`](https://ursafrank.itch.io/ursafont) as the default font, created by [**UrsaFrank**](https://ursafrank.itch.io/). This font is available under the [**CC0 (Creative Commons Zero) license**](https://creativecommons.org/publicdomain/zero/1.0/).
+