A shader is a bit of JS that exports either per-cell functions or one
whole-buffer function. TEXTMODE calls it once per frame (per cell, or
for the whole grid) and draws the result.
Per-cell style
Simplest style - called once per cell, per frame:
exports.char = function () {
return '#'; // a single character
};
exports.fg = function () {
return 'green'; // foreground color (optional)
};
exports.bg = function () {
return 'default'; // background color (optional)
};
Whole-buffer style
For effects that need to remember state or look at neighboring
cells, export a single frame function instead:
exports.frame = function (buffer) {
// buffer[y][x] = { ch, fg, bg } - mutate cells in place
buffer[0][0].ch = '@';
buffer[0][0].fg = 'red';
};
Available variables
These are ready to use as bare identifiers inside your functions:
x, y | column/row of the cell being drawn (per-cell style only) |
width, height | grid size in columns/rows |
fps | the frames-per-second setting |
frame | frame count since the shader started (divide by fps to get elapsed seconds) |
Colors
fg/bg accept a name:
black red green yellow blue magenta cyan white
gray brightred brightgreen brightyellow brightblue
brightmagenta brightcyan brightwhite default
...or a 256-color palette index (an integer from 0 to 255):
exports.fg = function () {
return 196; // bright red, from the 256-color palette
};
Toolbar
| Example | load a bundled shader into the editor |
| FPS / W×H | frame rate and grid size |
| Run | run the shader (Ctrl/Cmd+Enter) |
| Stop | stop the animation |
| Share | copy a link with the code and options baked in - nothing is uploaded |
| Layout | toggle side-by-side vs stacked panels |
| Fullscreen | fill the screen with just the preview |