textmode.export.js (✿◕‿◕)ﾉ

textmode.export.js is an add-on library for textmode.js that adds various export options to your Textmodifier instance, including:
- Plain text (.txt)
- Image files (.png, .jpg, .webp)
- Animated image files (.gif)
- Video files (.webm)
- Scalable vector graphics (.svg)

Besides exporting programatically, textmode.export.js also provides an overlay UI for users to easily export their creations.

Installation

$3

- The latest textmode.export.js version requires textmode.js v0.7.0 or later.

$3

To use textmode.export.js in a UMD environment, download the latest umd build from the GitHub releases page or import it directly from a CDN like jsDelivr. 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
















`

`javascript
// sketch.js
const t = textmode.create({
width: window.innerWidth,
height: window.innerHeight,
fontSize: 16,
frameRate: 60,
plugins: [
ExportPlugin
]
});

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!

if (t.frameCount === 60) {
t.saveCanvas({
format: 'png',
filename: 'my-sketch'
});
}
});

// Control the export overlay UI at runtime
// t.exportOverlay.hide(); // Hide the overlay
// t.exportOverlay.show(); // Show the overlay
// t.exportOverlay.toggle(); // Toggle visibility

t.windowResized(() => {
t.resizeCanvas(window.innerWidth, window.innerHeight);
});
`

#### ESM

To use textmode.export.js in an ESM environment, you can install it via npm:

`bash
npm install textmode.export.js
`

Then, you can import it in your JavaScript or TypeScript files:

`html











`

`javascript
// sketch.js
import { textmode } from 'textmode.js';
import { ExportPlugin } from 'textmode.export.js';

const t = textmode.create({
width: window.innerWidth,
height: window.innerHeight,
fontSize: 16,
frameRate: 60,
plugins: [
ExportPlugin
]
});

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!

if (t.frameCount === 60) {
t.saveCanvas({
format: 'png',
filename: 'my-sketch'
});
}
});

// Control the export overlay UI at runtime
// t.exportOverlay.hide(); // Hide the overlay
// t.exportOverlay.show(); // Show the overlay
// t.exportOverlay.toggle(); // Toggle visibility

t.windowResized(() => {
t.resizeCanvas(window.innerWidth, window.innerHeight);
});
`

Next steps

Now that you have textmode.export.js set up, you can explore the following resources to learn more about its features and capabilities:

📚 Visit the Official Documentation for a detailed guide on how to use the textmode.export.js and all its features.

🔍 Browse the TypeDoc API reference hosted right here in the repository for in-depth API details.

Acknowledgements

textmode.export.js packages webm-writer-js by Nicholas Sherlock to provide WebM video export support. webm-writer-js is distributed under the WTFPL v2 license.

Animated GIF export relies on gifenc` by Matt DesLauriers, available under the MIT License.