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.

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

2D primitives

textmode.js includes these 2D drawing methods:

• point()
• rect(width, height)
• line(x1, y1, x2, y2)
• ellipse(width, height)
• triangle(x1, y1, x2, y2, x3, y3)
• arc(width, height, startAngle, endAngle)
• bezierCurve(x1, y1, cx1, cy1, cx2, cy2, x2, y2)

Example

Line weight

Use lineWeight() for lines and Bezier curves:

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:

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:

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

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

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.

Related APIs

• Textmodifier.point()
• Textmodifier.rect()
• Textmodifier.line()
• Textmodifier.ellipse()
• Textmodifier.triangle()
• Textmodifier.arc()
• Textmodifier.bezierCurve()