textmode.js

Appearance

Quick Actions

Open in ChatGPTOpen in ClaudeOpen in Perplexity

Drawing shapes ​

Shape functions draw into the active grid using the current character, color, transform, and shader state. 〆(・∀・＠)

For the quickest mental model: set drawing state first, then call a primitive.

js
t.char("A");
t.charColor(255, 120, 80);
t.cellColor(0);
t.rect(10, 6);

2D primitives ​

textmode.js includes these 2D drawing methods:

Example ​

Line weight ​

Use lineWeight() for lines and Bezier curves:

js
t.lineWeight(2);
t.line(-16, 0, 16, 0);

When called without arguments, lineWeight() returns the current line weight.

State applies to future drawing ​

Most drawing state is sticky until changed:

js
t.char("#");
t.charColor(255, 0, 0);
t.rect(8, 8);

t.char("*");
t.charColor(80, 200, 255);
t.ellipse(8, 8);

Use push() and pop() to isolate style and transform changes:

js
t.push();
t.translate(-10, 0);
t.char("@");
t.rect(6, 6);
t.pop();

t.rect(6, 6); // back to the previous state

Custom shapes ​

Use beginShape(), vertex(), and endShape() to construct custom polygon paths and vertex geometry:

js
t.char("■");
t.charColor(255, 200, 50);

t.beginShape(t.LINE_STRIP);
t.vertex(-10, -5);
t.vertex(0, -10);
t.vertex(10, -5);
t.vertex(8, 8);
t.vertex(-8, 8);
t.endShape("close");

Shape assembly modes ​

Pass an assembly mode to beginShape(mode) to control how vertices are connected:

  • t.POINTS: Draws each vertex as an individual point.
  • t.LINES: Connects pairs of vertices as disconnected line segments.
  • t.LINE_STRIP: (Default) Connects consecutive vertices as a polyline.
  • t.LINE_LOOP: Connects vertices and automatically closes the loop.
  • t.TRIANGLES: Draws each group of 3 vertices as a filled triangle.
  • t.TRIANGLE_STRIP: Draws a connected strip of triangles.
  • t.TRIANGLE_FAN: Draws triangles radiating from the first vertex.
  • t.QUADS: Draws each group of 4 vertices as a quadrilateral.
  • t.QUAD_STRIP: Draws a continuous strip of quadrilaterals.

When to use 3D primitives ​

Use 3D drawing when you need volume, depth, cameras, or lighting. The 2D primitives are the most direct path for text patterns, interfaces, typography-like layouts, and grid art.