Drawing (ti_draw): TI-84 Evo Python

Pixels, shapes, text and color on the graph screen. 15 functions in ti_draw, each with a working example.

Try any of these in CalcPlex PRGM, a browser code editor, which sends your program to a calculator over USB.

ti_draw.clear_rect(

ti_draw.clear_rect(x, y, w, h)

Erases a rectangular area back to white without changing your drawing color.

Same arguments as fill_rect(): top-left corner plus width and height. Erases that area back to white.

The useful thing is that it doesn't touch your current drawing color. So you can erase a sprite's old position and draw the new one without calling set_color() in between.

That said, if your code is already batching draws by color, a white fill_rect is faster than clear_rect.

Watch out

When erasing text, the erase band has to cover where the letters actually are: roughly y - 18 to y - 6 for text drawn at y. Erasing from y downward leaves the tops of the old letters behind.

Keep the width and height at 2 or more. A 1-pixel extent raises tidrawException.

import ti_draw
import ti_system

ti_draw.set_color(0, 0, 0)
ti_draw.draw_text(10, 40, "SCORE 7")

# erase the old score and reprint
# text sits from about y-18 to y-6, so erase that band
ti_draw.clear_rect(10, 40 - 18, 200, 24)
ti_draw.draw_text(10, 40, "SCORE 8")

ti_system.wait_key()

Erases one line of text and reprints it. The erase band starts at y - 18 because that's where the top of the letters actually sit.

See also: ti_draw.fill_rect(, ti_draw.clear(, ti_draw.draw_text(

ti_draw.draw_circle(

ti_draw.draw_circle(x, y, r)

Draws the outline of a circle centered at (x, y) with radius r.

Note that (x, y) is the CENTER, not a corner. This is different from the rectangle functions, which take a top-left corner.

The outline uses the current color from set_color() and the current thickness from set_pen(). The inside is left alone, so you can outline a circle you already filled.

import ti_draw
import ti_system

ti_draw.set_color(255, 220, 0)          # yellow
ti_draw.fill_circle(160, 104, 30)       # filled disc, radius 30

ti_draw.set_color(0, 0, 0)              # black
ti_draw.draw_circle(160, 104, 30)       # outline on top of the fill

ti_system.wait_key()                    # wait for a keypress

A yellow disc outlined in black, centered on the screen.

ti_draw.draw_line(

ti_draw.draw_line(x1, y1, x2, y2)

Draws a straight line between two points.

Both points are pixel coordinates, with (0, 0) at the top left.

Call set_color() first to pick the line color, and set_pen() to change the thickness. For a thick horizontal or vertical bar, fill_rect is often simpler than a thickened line.

import ti_draw
import ti_system

ti_draw.set_color(0, 0, 0)              # black
ti_draw.draw_line(0, 40, 319, 40)       # horizontal line across the screen

ti_draw.set_color(200, 0, 0)            # red
ti_draw.draw_line(10, 60, 300, 200)     # diagonal line

ti_system.wait_key()                     # wait for a keypress

A black horizontal divider across the screen, then a red diagonal below it.

ti_draw.draw_poly(

ti_draw.draw_poly(x_list, y_list)

Draws connected line segments through a list of points.

Pass two lists of the same length: one with all the x coordinates and one with all the y coordinates. Point i is at (x_list[i], y_list[i]).

This draws a polyline (connected segments), not a closed shape. To close it, repeat the first point at the end of both lists.

Uses the current color from set_color() and thickness from set_pen(). Good for title art, arrows, and diagram outlines.

Watch out

The two lists must be the same length.

On this calculator, xs[::-1] (step slices) works on lists but raises NotImplementedError on strings and tuples. Use list(reversed(xs)) instead if you need to reverse coordinates.

import ti_draw
import ti_system

xs = [160, 200, 180, 140, 120, 160]
ys = [60, 90, 140, 140, 90, 60]

ti_draw.set_color(0, 0, 0)
ti_draw.draw_poly(xs, ys)

ti_system.wait_key()

A pentagon. The first point is repeated at the end to close the shape.

ti_draw.draw_rect(

ti_draw.draw_rect(x, y, w, h)

Draws a rectangle outline with the current color.

Draws the border of a rectangle. The top-left corner is at (x, y), and the border extends w pixels to the right and h pixels down. That means the outline is (w + 1) pixels wide and (h + 1) pixels tall.

For example, draw_rect(5, 5, 5, 5) draws a 6x6 pixel border with its top-left corner at (5, 5). The inside of that border is a 4x4 empty space.

draw_rect and fill_rect use the same (x, y, w, h) arguments and describe the same box: draw_rect traces the border, and fill_rect fills the inside.

Call set_color() first to choose the outline color. Use set_pen() to change the line thickness.

Watch out

The outline is 1 pixel bigger on each side than the fill. If you outline a grid cell at its full size, the border pokes into the neighboring cell's space. To keep borders inside a cell, shrink the outline: draw_rect(x + 1, y + 1, size - 3, size - 3).

import ti_draw
import ti_system

# fill a gray box, then outline it in black
ti_draw.set_color(200, 200, 200)
ti_draw.fill_rect(60, 60, 100, 60)

ti_draw.set_color(0, 0, 0)
ti_draw.draw_rect(60, 60, 100, 60)

ti_system.wait_key()

Fills a gray box and outlines it in black. Both calls use the same coordinates, so the border fits exactly around the fill.

ti_draw.draw_text(

ti_draw.draw_text(x, y, "string")

Draws a string on the screen. Each character is 10 pixels wide.

The font is fixed-width (monospaced), and every character is exactly 10 pixels wide. That gives you about 31 characters per line.

The anchor point is a bit unusual. x is the left edge of the first character, which is normal. But y does NOT mark the top of the text. The actual letters sit roughly from y - 18 to y - 6. This matters when you need to erase text (see Watch out).

To center a string horizontally: x = 160 - 5 * len(text)

Watch out

Drawing a space does NOT erase the old character underneath it. draw_text only paints foreground pixels. To update text (like a score), paint a background-colored rectangle over the old text first, then draw the new text.

When erasing text, remember the letters sit from about y - 18 to y - 6. Clearing from y downward misses the tops of the old letters.

import ti_draw
import ti_system

W = 320  # screen is 320 pixels wide
msg = "GAME OVER"
x = W // 2 - 5 * len(msg)

ti_draw.set_color(0, 0, 0)
ti_draw.draw_text(x, 110, msg)

ti_system.wait_key()

Centers a string horizontally on the screen.

ti_draw.fill_circle(

ti_draw.fill_circle(x, y, r)

Fills a solid disc centered at (x, y) with radius r.

(x, y) is the CENTER, not a corner. The disc is painted in the current color from set_color().

Good for game pieces, planets, traffic lights, and anything drawn once. For a ball that moves every frame, a small fill_rect is faster and easier to erase.

import ti_draw
import ti_system

for i in range(3):
    ti_draw.set_color(60 + 60 * i, 40, 200 - 50 * i)
    ti_draw.fill_circle(80 + 80 * i, 104, 24)

ti_system.wait_key()

Three solid discs across the middle of the screen in different colors.

ti_draw.fill_poly(

ti_draw.fill_poly(x_list, y_list)

Fills the polygon whose corners come from two coordinate lists.

Same arguments as draw_poly(): two equal-length lists of x and y coordinates. The corners are connected in order and the enclosed region is filled with the current color.

Polygons are the most expensive shape to draw. Anything rectangular should be a fill_rect instead.

import ti_draw
import ti_system

# a small triangle pointing right, like a play button
xs = [20, 40, 20]
ys = [90, 104, 118]

ti_draw.set_color(0, 120, 255)
ti_draw.fill_poly(xs, ys)

ti_system.wait_key()

A small blue triangle pointing right.

ti_draw.fill_rect(

ti_draw.fill_rect(x, y, w, h)

Fills a solid rectangle with the current color.

Think of (x, y, w, h) as defining an invisible box from the point (x, y) to the point (x + w, y + h). fill_rect fills everything strictly INSIDE that box, skipping the border itself. So the filled area starts one pixel in from the corner and is (w - 1) pixels wide by (h - 1) pixels tall.

For example, fill_rect(5, 5, 5, 5) fills a 4x4 square starting at pixel (6, 6).

You MUST call set_color() before fill_rect() to choose what color to fill with. If you never set a color, it defaults to black.

This is the fastest shape you can draw, and it can be any size. Use it for backgrounds, sprites, erasing old positions, and anything that runs every frame.

Watch out

fill_rect(0, 0, 319, 209) does NOT fill the entire screen. Because fill_rect skips the border of its box, it misses the edges. To fill every pixel, use fill_rect(-1, -1, 321, 211), which extends the box past the screen on all sides.

A width or height of exactly 1 raises tidrawException. Keep both at 2 or more.

import ti_draw
import ti_system

W = 320  # screen is 320 pixels wide
H = 210  # screen is 210 pixels tall

# fill the entire screen light blue
ti_draw.set_color(180, 220, 255)
ti_draw.fill_rect(-1, -1, W + 1, H + 1)

# draw a dark blue square
ti_draw.set_color(0, 90, 200)
ti_draw.fill_rect(40, 80, 60, 60)

ti_system.wait_key()

Fills the whole screen light blue, then draws a dark blue square on top. Notice that set_color is called before each fill_rect.

See also: ti_draw.set_color(, ti_draw.clear(, ti_draw.clear_rect(, ti_draw.draw_rect(

ti_draw.get_screen_dim(

ti_draw.get_screen_dim()

Returns [319, 209], the largest x and y coordinates you can draw at.

Returns a two-item list: [319, 209]. These are the largest COORDINATES, not the width and height. The screen is 320 pixels wide and 210 pixels tall, so x runs from 0 to 319 and y runs from 0 to 209.

Coordinates start at the top-left corner. x grows to the right and y grows DOWNWARD (the opposite of a math graph).

Watch out

get_screen_dim() returns the last usable coordinate, not a count. So range(320) covers every column, but range(319) misses the last one.

Anything drawn past x = 319 or y = 209 just won't appear on the screen. No error, no warning.

import ti_draw
import ti_system

W = 320  # screen is 320 pixels wide
H = 210  # screen is 210 pixels tall

# draw a red frame around the entire screen
ti_draw.set_color(220, 0, 0)
ti_draw.draw_rect(0, 0, W - 1, H - 1)

ti_draw.set_color(0, 0, 0)
ti_draw.draw_text(90, 110, str(W) + " x " + str(H))

ti_system.wait_key()

A red frame right on the edge of the screen, with the dimensions shown in the middle.

See also: ti_draw.set_window(, ti_draw.fill_rect(, ti_draw.clear(

ti_draw.plot_xy(

ti_draw.plot_xy(x, y, shape)

Draws a small marker at (x, y). shape is a number from 1 to 13.

(x, y) is the center of the marker and shape picks which marker to draw. Uses the current color from set_color().

The thirteen shapes:

1: filled circle, radius 2
2: open circle, radius 2
3: filled 4x4 square
4: open 4x4 square
5: x mark
6: plus mark
7: single pixel
8-13: circles of increasing size (filled/open alternating)

import ti_draw
import ti_system

ti_draw.set_color(0, 0, 200)
for i in range(10):
    x = 20 + i * 28
    y = 180 - i * i
    ti_draw.plot_xy(x, y, 3)

ti_system.wait_key()

Ten data points as small filled squares along an upward curve.

ti_draw.set_color(

ti_draw.set_color(r, g, b)

Sets the drawing color. Everything drawn after this uses the new color.

Each value goes from 0 to 255. Common colors:

Black: (0, 0, 0) (the default)
White: (255, 255, 255) (use this to erase)
Red: (255, 0, 0)
Green: (0, 200, 0)
Blue: (0, 0, 255)

The color stays in effect until you change it again.

Changing colors isn't free on this calculator. If you're drawing lots of shapes in a loop, try to batch by color: draw all the red things, then switch to blue and draw all the blue things. Switching colors inside a tight loop slows things down noticeably.

import ti_draw
import ti_system

# batch by color: all dark squares first, then all gold squares
ti_draw.set_color(30, 30, 40)
for i in range(6):
    ti_draw.fill_rect(20 + i * 48, 60, 40, 40)

ti_draw.set_color(255, 200, 0)
for i in range(6):
    ti_draw.fill_rect(20 + i * 48, 120, 40, 40)

ti_system.wait_key()

Two rows of squares. Batching by color (one set_color call per row) is faster than switching colors inside a single loop.

ti_draw.set_pen(

ti_draw.set_pen("size", "style")

Sets the line thickness and dash pattern for outline drawing calls.

Both arguments are strings. They affect draw_line(), draw_rect(), draw_circle(), and draw_poly(). The settings stay until you change them.

Sizes: "thin", "medium", "thick"

Styles: "solid", "dotted", "dashed"

The default (if you never call this) is thin and solid.

Watch out

ti_plotlib uses different style names ("dot" and "dash"). Those spellings raise tidrawException here, so don't mix them up.

import ti_draw
import ti_system

ti_draw.set_color(0, 0, 0)

ti_draw.set_pen("thick", "solid")
ti_draw.draw_rect(40, 40, 240, 130)

ti_draw.set_pen("thin", "dashed")
ti_draw.draw_rect(50, 50, 220, 110)

ti_system.wait_key()

A thick solid outer frame with a thin dashed inner frame.

ti_draw.set_window(

ti_draw.set_window(xmin, xmax, ymin, ymax)

Changes coordinates from pixels to your own number system.

After calling this, every ti_draw function uses your coordinate system instead of raw pixels. For example, set_window(0, 10, 0, 10) maps the full screen to a 0-to-10 range in both directions.

This is useful for drawing math graphs where you want to work in real units instead of pixel positions.

A coordinate outside your window won't cause an error. The shape just won't appear, which can be confusing to debug.

Watch out

Set the window once, before you draw anything. For games, stay in pixel coordinates and do the math yourself. set_window is meant for graphing.

import ti_draw
import ti_system

# set up math-style axes from -10 to 10
ti_draw.set_window(-10, 10, -10, 10)

ti_draw.set_color(0, 0, 0)
ti_draw.draw_line(-10, 0, 10, 0)
ti_draw.draw_line(0, -10, 0, 10)

ti_system.wait_key()

Draws x and y axes across the full screen, centered at the origin.

ti_draw.show_draw(

ti_draw.show_draw()

Pauses the program until CLEAR is pressed. You don't need it to see drawings.

Everything you draw with ti_draw appears on the screen immediately. You do NOT need to call show_draw() to make shapes visible (on some older TI models you did, but the Evo doesn't work that way).

What show_draw() actually does is freeze the program until someone presses CLEAR. No other key works.

For most programs, ti_system.wait_key() is a better choice because it accepts ANY key, not just CLEAR.

import ti_draw

ti_draw.set_color(0, 0, 0)
ti_draw.draw_text(85, 110, "GAME OVER")

# the text is already on screen; this just waits for CLEAR
ti_draw.show_draw()

Holds a game-over screen. Consider using ti_system.wait_key() instead if you want any key to work.

See also: ti_system.wait_key(, ti_system.get_key(, ti_draw.clear(