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:
Color modes
Numeric colors are interpreted as RGB by default. Use colorMode() to switch numeric inputs to rgb, hsl, or hsb:
t.colorMode("hsb", 360, 100, 100, 1);
t.charColor(210, 80, 100);
t.cellColor(210, 70, 12);
t.rect(12, 8);
t.colorMode("rgb");Passing one max value applies the same range to every channel:
t.colorMode("rgb", 1);
t.charColor(1, 0.6, 0.2, 1);Passing per-channel maxes is useful for hue-based color work:
t.colorMode("hsl", 360, 100, 100, 1);
t.charColor(30, 90, 65);colorMode() affects numeric colors passed to charColor(), cellColor(), fill(), stroke(), background(), and color(). CSS color strings and existing TextmodeColor instances keep their own values.
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.