Drawing (ti_draw): TI-84 Evo Python

Pixels, shapes, text and color on the graph screen. 16 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(

ti_draw.clear()

Clears the entire drawing area back to white.

If you have things drawn on the screen, this resets it back to a white canvas.

Watch out

clear() is slow. To erase during a program, paint over the old drawing with fill_rect instead (a full-screen wipe is fill_rect(-1, -1, 321, 211)).

import ti_draw
import ti_system

# draw a red rectangle
ti_draw.set_color(255, 0, 0)
ti_draw.fill_rect(20, 20, 100, 80)
ti_draw.draw_text(10, 180, "Press a key to clear")

ti_system.wait_key()

# clear the screen and show a message
ti_draw.clear()
ti_draw.set_color(0, 0, 0)
ti_draw.draw_text(10, 30, "Cleared!")

ti_system.wait_key()

Draws a shape, waits for a key press, then clears everything and shows a message.

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. Paints that area white, without touching the color you picked with set_color().

If your background isn't white, use fill_rect over the area you want to erase, set to the background color, instead.

Watch out

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

import ti_draw
import ti_system

# a red square
ti_draw.set_color(200, 0, 0)
ti_draw.fill_rect(120, 70, 60, 60)

ti_system.wait_key()

# erase the square
ti_draw.clear_rect(120, 70, 60, 60)

# still red, with no new set_color call
ti_draw.fill_circle(160, 100, 20)

ti_system.wait_key()

A red square. Press a key and it is erased, and the circle that appears is still red: clear_rect never touched the drawing color.

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

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

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

# wait for a keypress
ti_system.wait_key()

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

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

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

# wait for a keypress
ti_system.wait_key()

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().

Watch out

The two lists must be the same length.

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 with corners at (x, y) and (x + w, y + h). Both corners are drawn, so the outline is (w + 1) pixels wide and (h + 1) pixels tall, one bigger than you'd guess. A line from pixel 5 to pixel 10 covers six pixels, not five, because both ends count.

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 letters sit ABOVE it, in the rows from y - 17 down to y - 3.

To center a string horizontally: x = 160 - 5 * len(text). Vertically: y = 115 (the middle row of the screen is 105, and since the letters sit above y, the anchor goes a little below it).

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), erase the old text first, then draw the new text. fill_rect(x - 1, y - 18, 10 * len(text) + 1, 16) covers exactly the band the letters sit in.

import ti_draw
import ti_system

msg = "GAME OVER"

# each character is 10 wide, so back up 5 per character from the middle (160)
x = 160 - 5 * len(msg)

# the letters sit above y, so aim a little below the middle row (105)
y = 115

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

ti_system.wait_key()

Centers GAME OVER in the middle of the screen, both directions.

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().

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 an invisible box with corners at (x, y) and (x + w, y + h). fill_rect fills everything strictly INSIDE that box, skipping the 1-pixel border. It's the partner of draw_rect, which traces that same border: call both with the same numbers and the outline and fill snap together perfectly.

The sizes trip people up. fill_rect(5, 5, 5, 5) uses the box from (5, 5) to (10, 10). Count the pixels 5 through 10: that's six, not five, because both ends count. Skip the border rows (5 and 10) and the fill covers pixels 6 through 9: a 4x4 square starting at (6, 6). In general: the fill starts at (x + 1, y + 1) and is (w - 1) by (h - 1). To fill an exact area, go one pixel up-left and one bigger: fill_rect(x - 1, y - 1, w + 1, h + 1).

The fill uses the current color from set_color() (black if you never set one).

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

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

# 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.

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

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

# 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.

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)
Red: (255, 0, 0)
Green: (0, 255, 0)
Blue: (0, 0, 255)

The color stays in effect until you change it again.

Color changes are slow on this calculator, so when drawing many shapes, draw everything of one color before switching to the next.

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 reads its coordinates in your ranges instead of pixels: set_window(-10, 10, -10, 10) maps the left edge of the screen to x = -10, the right edge to x = 10, and the same for y.

If you never call it, coordinates are the default pixel system: x from 0 to 319, y from 0 to 209.

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

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.

Freezes the program until CLEAR is pressed. No other key works.

You don't need it to make drawings visible: everything you draw appears on the screen immediately. For most programs ti_system.wait_key() is a better choice, because it accepts ANY key rather than only CLEAR.

import ti_draw

msg = "GAME OVER"

ti_draw.set_color(0, 0, 0)
ti_draw.draw_text(160 - 5 * len(msg), 115, msg)

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

Holds a game-over screen until CLEAR is pressed.