Sketch lifecycle

Most sketches follow the same lifecycle. (¬‿¬)ﾉ

Create

const t = textmode.create({
  width: 800,
  height: 600,
  fontSize: 16,
  frameRate: 60,
});

Use width and height when textmode.js creates the canvas. Use canvas when your app already owns an HTMLCanvasElement.

setup() runs after the renderer and base layer are initialized:

let font;

t.setup(async () => {
  font = await t.loadFont("./fonts/display.woff");
  console.log(t.grid.cols, t.grid.rows);
});

Use setup when you need access to initialized resources such as t.grid, t.font, loaded media, custom shaders, or layer-local assets.

draw() sets the callback for the automatic render loop:

t.draw(() => {
  t.background(0);
  t.char("*");
  t.rotateZ(t.frameCount);
  t.rect(8, 8);
});

The draw callback should describe the whole frame. Call background() or clear() at the start when you do not want previous contents to remain.

Use windowResized() for browser-driven resizing:

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

resizeCanvas() updates the canvas and layer resources. If it is called during a render frame, the resize is deferred safely.

By default, textmode.js renders automatically. For framework integration, previews, or event-driven sketches, pause the loop and render on demand:

t.noLoop();

button.addEventListener("click", () => {
  t.redraw();
});

Useful APIs:

Call destroy() when a sketch is removed from an app:

function unmount() {
  t.destroy();
}

This disposes textmode-managed resources, input listeners, media sources, framebuffers, plugins, and internal layers.