textmode.js 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/README.md +111 -2
  2. package/dist/textmode.esm.js +1556 -2112
  3. package/dist/textmode.umd.js +18 -16
  4. package/dist/types/export/base/DataExtractor.d.ts +33 -0
  5. package/dist/types/export/base/FileHandler.d.ts +60 -0
  6. package/dist/types/export/base/index.d.ts +2 -0
  7. package/dist/types/export/image/ImageContentGenerator.d.ts +27 -0
  8. package/dist/types/export/image/ImageDataExtractor.d.ts +15 -0
  9. package/dist/types/export/image/ImageExporter.d.ts +44 -0
  10. package/dist/types/export/image/ImageFileHandler.d.ts +51 -0
  11. package/dist/types/export/image/index.d.ts +6 -0
  12. package/dist/types/export/image/types.d.ts +57 -0
  13. package/dist/types/export/index.d.ts +3 -0
  14. package/dist/types/export/svg/SVGContentGenerator.d.ts +7 -6
  15. package/dist/types/export/svg/SVGDataExtractor.d.ts +7 -38
  16. package/dist/types/export/svg/SVGFileHandler.d.ts +2 -19
  17. package/dist/types/export/svg/index.d.ts +1 -1
  18. package/dist/types/export/svg/types.d.ts +0 -19
  19. package/dist/types/export/txt/TXTContentGenerator.d.ts +14 -0
  20. package/dist/types/export/txt/TXTDataExtractor.d.ts +18 -0
  21. package/dist/types/export/txt/TXTExporter.d.ts +31 -0
  22. package/dist/types/export/txt/TXTFileHandler.d.ts +24 -0
  23. package/dist/types/export/txt/index.d.ts +5 -0
  24. package/dist/types/export/txt/types.d.ts +40 -0
  25. package/dist/types/index.d.ts +2 -1
  26. package/dist/types/textmode/ConversionPipeline.d.ts +1 -0
  27. package/dist/types/textmode/Textmodifier.d.ts +108 -0
  28. package/dist/types/textmode/converters/Converter.d.ts +16 -1
  29. package/dist/types/textmode/font/TextmodeFont.d.ts +3 -1
  30. package/dist/types/textmode/font/typr/Typr.min.d.ts +19 -0
  31. package/package.json +1 -1
package/README.md CHANGED
@@ -1,3 +1,112 @@
1
- # textmode.js
1
+ # textmode.js (✿◠‿◠)
2
2
 
3
- ~ work in progress ~
3
+ <div align="center">
4
+
5
+ <img width="1584" height="768" alt="textmodejs_banner" src="https://github.com/user-attachments/assets/f03c2d74-7dc3-45cf-a0a5-043f9438231e" />
6
+
7
+
8
+ | [![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) |
9
+ |:-------------|:-------------|:-------------|
10
+
11
+ </div>
12
+
13
+ `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.
14
+
15
+ `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.
16
+
17
+ ## Features
18
+
19
+ - **Renderer management**: Create and manage multiple textmode converters with different settings to create a unique rendering pipeline.
20
+ - **Pre-built renderers**: Add pre-built converters, like `'brightness'`-based ones, to your pipeline.
21
+ - **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.
22
+ - **Textmodifier management**: Create and manage multiple textmodifiers to apply textmode conversion onto multiple canvases in parallel.
23
+ - **Font management**: Set the font and font size for all ASCII renderers in the pipeline of a textmodifier.
24
+ - **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.
25
+ - **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.
26
+ - **Export functionality**: Export your ASCII art as `.txt`, `.svg` and `.json` files for easy sharing, printing and plotting.
27
+
28
+ ## Installation
29
+
30
+ ### Prerequisites
31
+
32
+ To get started with `textmode.js`, you'll need:
33
+ - A **modern web browser** with `WebGL` support
34
+ - **Node.js 16+** and `npm` *(optional, for ESM installation)*
35
+ - A **HTML canvas element** in your project to apply textmode conversion to
36
+
37
+ ### Importing `textmode.js`
38
+
39
+ #### UMD
40
+
41
+ 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:
42
+
43
+ ```html
44
+ <!DOCTYPE html>
45
+ <html>
46
+ <head>
47
+ <title>textmode.js example</title>
48
+
49
+ <!-- Import textmode.js from jsDelivr CDN -->
50
+ <script src="https://cdn.jsdelivr.net/npm/textmode.js@latest/dist/textmode.umd.js"></script>
51
+ </head>
52
+ <body>
53
+ <canvas id="myCanvas" width="800" height="600"></canvas>
54
+ <script>
55
+ (async () => {
56
+ // Reference your existing canvas element
57
+ const canvas = document.querySelector('canvas#myCanvas');
58
+
59
+ if (!canvas) {
60
+ throw new Error('Canvas element not found');
61
+ }
62
+
63
+ // Create a `textmodifier` instance to apply textmode conversion to a given canvas
64
+ const textmodifier = await textmode.create(canvas);
65
+ })();
66
+ </script>
67
+ </body>
68
+ </html>
69
+ ```
70
+
71
+ #### ESM
72
+
73
+ To use `textmode.js` in an ESM environment, you can install it via `npm`:
74
+
75
+ ```bash
76
+ npm install textmode.js
77
+ ```
78
+
79
+ Then, you can import it in your JavaScript or TypeScript files:
80
+
81
+ ```javascript
82
+ import { textmode } from 'textmode.js';
83
+
84
+ (async () => {
85
+ // Reference your existing canvas element
86
+ const canvas = document.querySelector('canvas#myCanvas');
87
+
88
+ if (!canvas) {
89
+ throw new Error('Canvas element not found');
90
+ }
91
+
92
+ // Create a `textmodifier` instance to apply textmode conversion to a given canvas
93
+ const textmodifier = await textmode.create(canvas);
94
+ })();
95
+ ```
96
+
97
+ ### Next steps
98
+
99
+ 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.
100
+
101
+ ## Learn more
102
+
103
+ ### 📚 [Visit the Official Documentation](https://code.textmode.art/)
104
+
105
+ Explore the comprehensive documentation at [code.textmode.art](https://code.textmode.art/) for:
106
+ - Detailed guides
107
+ - Interactive examples
108
+ - Complete API reference
109
+ - Tips and tricks
110
+ - ... and much more!
111
+
112
+ The documentation will help you unlock the full potential of `textmode.js` in your creative coding projects.