textmode.js

Build real-time ASCII and textmode graphics in the browser with a grid-based WebGL2 drawing interface. Create a textmode drawing context, then compose characters, colors, shapes, media, layers, and effects on its grid.

Start a sketch

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  fontSize: 16
});

t.draw(() => {
  t.background(8);
  t.char('@');
  t.charColor(255, 180, 80);
  t.point();
});

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

Sketch workflow

1. Create the drawing context with textmode.create.
2. Load or configure resources in Textmodifier.setup.
3. Draw the base scene in Textmodifier.draw.
4. Add layers, media conversion, plugins, or shaders when the sketch needs them.
5. Respond to resize and input events as the sketch runs.

Read the first sketch guide, fundamentals, and examples for guided learning; use Textmodifier for the complete drawing interface.

Conversion

Convert visual sources into textmode data and post-process the result.

Namespace	Description
conversion	All media conversion related modules and types.

Core workflow

Create, configure, and run a textmode sketch.

Name	Description
textmode	The main entry point for the textmode.js library.
Textmodifier	The main textmode.js drawing context.
TextmodeOptions	Options when creating a Textmodifier instance via textmode.create.

Creative coding utilities

Use deterministic randomness and vector math in generative sketches.

Class	Description
TextmodeRandom	A deterministic pseudo-random number generator for textmode sketches.
TextmodeVector	Mutable two- or three-dimensional vector for creative-coding math.

Drawing & 3D

Draw primitives and control the camera used for spatial scenes.

Name	Description
ShapeAssemblyMode	Shape assembly modes for Textmodifier.beginShape.
TextmodeCamera	Mutable camera object used for p5-style camera workflows.

Fonts & media

Load glyph sources and use images, video, and live textures.

Namespace	Description
fonts	All font rendering related modules and types.
media	All media asset related modules and types.

Grid, glyphs & color

Define the cell-based visual language of a sketch.

Name	Description
color	Color objects, color modes, and types.
TextmodeGlyphRamp	Immutable character sequence for mapping numbers to glyphs.
TextmodeGrid	Grid used by a textmode layer.
GridPosition	Position on a grid, typically in center-based coordinates.

Interaction

Respond to keyboard, mouse, touch, and gamepad input.

Namespace	Description
input	All types and interfaces related to input event handling.

Layers & GPU rendering

Compose scenes and work with GPU-backed drawing resources.

Name	Description
layering	All modules and types related to multi-layered textmode rendering.
TextmodeFramebuffer	Framebuffer class for managing offscreen rendering targets initialized via Textmodifier.createFramebuffer.
TextmodeShader	WebGL shader program created by Textmodifier.createMaterialShader or Textmodifier.createShader.
TextmodeFramebufferOptions	Options for creating a framebuffer via Textmodifier.createFramebuffer. If not specified, width and height default to the current textmode grid size.
TextmodeUniformValue	Values accepted by custom shader uniforms.

Loading & errors

Control loading feedback and diagnose runtime failures.

Namespace	Description
errors	All error handling related modules and types.
loading	All loading screen related modules and types.

Plugins

Extend runtime instances and the sketch lifecycle.

Namespace	Description
plugins	Plugin system types for extending textmode.js functionality.