textmode.js 0.7.0 → 0.7.1-beta.2
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.
- package/README.md +4 -60
- package/dist/textmode.esm.js +819 -814
- package/dist/textmode.umd.js +15 -16
- package/dist/types/textmode/layers/Layer2DCompositor.d.ts +19 -7
- package/dist/types/textmode/layers/TextmodeLayer.d.ts +3 -0
- package/dist/types/textmode/layers/interfaces/ITextmodeLayer.d.ts +32 -0
- package/dist/types/textmode/layers/types.d.ts +4 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -18,6 +18,9 @@ The library is designed to be easy to use and accessible to developers of all sk
|
|
|
18
18
|
|
|
19
19
|
- Real‑time* ASCII/textmode rendering with a simple drawing API
|
|
20
20
|
- Font system with runtime font loading and dynamic sizing *(supports TTF/OTF/WOFF)*
|
|
21
|
+
- Dynamic layering system with blend modes and opacity for multi‑layered textmode scenes
|
|
22
|
+
- Filter system with built-in filters and support for custom filter shaders
|
|
23
|
+
- Load images and videos as sources and render them in customizable textmode styles
|
|
21
24
|
- 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
|
|
22
25
|
- Flexible exporting: TXT, SVG, raster images *(PNG/JPG/WebP)*, animated GIFs, and video *(WebM)*
|
|
23
26
|
- Animation loop control: `frameRate`, `loop`/`noLoop`, `redraw`, `frameCount`, etc.
|
|
@@ -159,65 +162,6 @@ t.windowResized(() => {
|
|
|
159
162
|
});
|
|
160
163
|
```
|
|
161
164
|
|
|
162
|
-
## Conversion strategies & add-ons
|
|
163
|
-
|
|
164
|
-
`textmode.js` now exposes a pluggable conversion pipeline so you can swap out how images, videos, and other sources translate into ASCII cells. The core bundle ships with the classic brightness-based converter, and you can register additional strategies at runtime—either from your own code or from official/community add-ons.
|
|
165
|
-
|
|
166
|
-
```ts
|
|
167
|
-
import {
|
|
168
|
-
registerConversionStrategy,
|
|
169
|
-
Shader,
|
|
170
|
-
type TextmodeConversionStrategy,
|
|
171
|
-
} from 'textmode.js';
|
|
172
|
-
|
|
173
|
-
import fragmentSource from './my-custom-image-to-mrt.frag';
|
|
174
|
-
import vertexSource from './my-shared-instanced.vert';
|
|
175
|
-
|
|
176
|
-
const customStrategy: TextmodeConversionStrategy = {
|
|
177
|
-
id: 'posterize',
|
|
178
|
-
createShader({ gl }) {
|
|
179
|
-
return new Shader(gl, vertexSource, fragmentSource);
|
|
180
|
-
},
|
|
181
|
-
createUniforms({ source }) {
|
|
182
|
-
return {
|
|
183
|
-
...source.createBaseConversionUniforms(),
|
|
184
|
-
u_levels: 6,
|
|
185
|
-
};
|
|
186
|
-
},
|
|
187
|
-
};
|
|
188
|
-
|
|
189
|
-
registerConversionStrategy(customStrategy);
|
|
190
|
-
|
|
191
|
-
// Later in your sketch
|
|
192
|
-
image.conversionMode('posterize');
|
|
193
|
-
```
|
|
194
|
-
|
|
195
|
-
### Accurate conversion add-on
|
|
196
|
-
|
|
197
|
-
The heavy multi-sample “accurate” converter now lives in a standalone add-on so you only pay for it when you need it:
|
|
198
|
-
|
|
199
|
-
```bash
|
|
200
|
-
npm install textmode.accurate.js
|
|
201
|
-
```
|
|
202
|
-
|
|
203
|
-
```ts
|
|
204
|
-
import { textmode } from 'textmode.js';
|
|
205
|
-
import { createAccurateConversionPlugin } from 'textmode.accurate.js';
|
|
206
|
-
|
|
207
|
-
const t = textmode.create({
|
|
208
|
-
width: 1024,
|
|
209
|
-
height: 576,
|
|
210
|
-
plugins: [createAccurateConversionPlugin()],
|
|
211
|
-
});
|
|
212
|
-
|
|
213
|
-
t.setup(async () => {
|
|
214
|
-
const img = await t.loadImage('https://example.com/image.jpg');
|
|
215
|
-
img.conversionMode('accurate', { sampleRate: 12 });
|
|
216
|
-
});
|
|
217
|
-
```
|
|
218
|
-
|
|
219
|
-
If you call `conversionMode('accurate')` without the add-on installed, `textmode.js` will throw a clear runtime error explaining how to enable it.
|
|
220
|
-
|
|
221
165
|
## Next steps
|
|
222
166
|
|
|
223
167
|
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:
|
|
@@ -231,5 +175,5 @@ Now that you have `textmode.js` set up, you can start creating your textmode art
|
|
|
231
175
|
`textmode.js` uses a custom-made TypeScript rewrite and 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).
|
|
232
176
|
|
|
233
177
|
|
|
234
|
-
|
|
178
|
+
`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/).
|
|
235
179
|
|