Characters and colors
Every cell has three main pieces of visual state:
- a character or glyph index
- a character color
- a cell background color
The drawing API exposes these as char(), charColor(), and cellColor(). (⌐■_■)
Characters
Use char() to choose the glyph for future drawing:
t.char("@");
t.rect(10, 6);You can pass a string or a numeric glyph index. When called without arguments, char() returns the current character.
Character color and cell color
charColor() controls the foreground glyph color. cellColor() controls the cell background:
t.char("A");
t.charColor(255, 220, 120);
t.cellColor(16, 20, 32);
t.rect(12, 8);Color methods accept grayscale values, RGB/RGBA numbers, CSS color strings, and TextmodeColor instances.
p5-style aliases
textmode.js also provides familiar aliases:
fill()maps to cell fill state.stroke()maps to line and character stroke state.background()fills the whole active layer.clear()clears the active layer.
t.background(0);
t.fill(20, 30, 50);
t.stroke(255);
t.rect(20, 10);Color helpers
Use color() to create a reusable TextmodeColor:
const amber = t.color(255, 190, 90);
t.charColor(amber);
t.rect(8, 8);Useful color properties include:
Glyph transforms
These methods affect how future glyphs are rendered:
t.char(">");
t.charRotation(t.frameCount * 4);
t.flipX(t.frameCount % 60 < 30);
t.point();invert() swaps character and cell colors for later drawing operations.
Tile colors
Bitmap tilesets can provide their own colors. Use useTileColors() on the base layer, or layer.useTileColors() for a specific layer:
t.useTileColors(true);See Fonts and tilesets for the full tileset workflow.