The Rogue's
TI-86 BASIC Tutorial
~
Chapter 6: Graphics

And now the moment that you've been waiting for... Graphics! We'll start with pictures, learn to set up the graph screen, and then move on to line, dot and circle graphics.

Pictures: There are two commands that deal with pictures: StPic and RcPic. StPic will take whatever is on the graph screen and store it to a variable. RcPic will take whatever is in a variable and put it on the screen. First, go on to the graph screen by pressing the [GRAPH] key. Now hit [MORE], [F2] (Draw), [MORE], and [F2] (Pen). Draw squiggles all over the graph screen (Enter starts/stops drawing, and the arrow keys move the pointer. When you finish, make yet another program and name it PICTURE. Enter this code:

:ClLCD
:Disp "Storing..."
:StPic A
:ClDrw
:Text "It's gone..."
:Pause
:ClDrw
:RcPic A

This will clear the home screen, display "Storing...", store the contents of the graph screen to variable A, clear the graph screen, write "It's gone...", pause, clear the graph screen, and recall the picture from variable A onto the graph screen. Neat...

Setting up the Graph Screen: The next commands will be using coordinates on the graph screen, so we must set the graph screen settings for them. Make a new program called LINES, and enter this code:

:AxesOff
:0->xMin
:126->xMax
:0->yMin
:62->yMax

Note: You will need to put the above code at the top of ALL the programs that use point graphics, or they will not work! First, the x-y axes is turned off (The command "AxesOn" would put it back up again). Next, some values are stored to the graph screen size variables (This is the same as manually changing the values of variables on the graph window screen). In case you couldn't guess, xMin is the lowest value for x (The column of points on the far left of the screen now has an x value of 0), xMax is the highest value of x (The column of points on the far right now has an x value of 126), yMin is the smallest y value (The bottom row of points has a y value of 0), and yMax is the highest y value (The top row of points has a y value of 126). So, for example, this means that the coordinate pair (0,62) is the upper-leftmost point, while (126,0) is the lower-rightmost point. That was pretty hard to describe :) Anyway, this makes it so that every point on the screen has whole number coordinates. If you kept TI's default values, the point in the top row, second from the left would be called (-9.841269841,10). That would be hard to work with. Note: I have called all of these "points" instead of pixels. The upper-leftmost pixel is always pixel 0,0. However, for graphing, TI assigns each pixel a different value so that the user can change the window values. In commands like Text( and PxOn (Which you will learn soon), the true pixel coordinates are used. In others, such as Line( and PtOn (Also coming up soon), the graphing point coordinates are used. After you read this chapter, experiment with the commands until you fully understand this.

Lines, Dots, and Circles: Let's draw some lines! The syntax for a line is Line([x1],[y1],[x2],[y2]. As I mentioned above, this command uses the graph point coordinates instead of pixels. Add this code to the bottom of the LINES program that you made in the previous example:

:ClDrw
:Line(0,62,126,0


Run it, and you will find that it clears the graph screen and draws a line from point (0,62) (Upper-leftmost point) to point (126,0) (Lower-rightmost point). This doesn't seem useful, but it is one of the most powerful BASIC graphic commands. Now get rid of the previous Line( command (Make sure you keep the code from the first example!), and enter this in it's stead:

:Line(30,62,63,62
:Line(63,62,63,31
:Line(63,31,30,31
:Line(30,31,30,62
:Line(36,53,43,53
:Line(51,53,58,53
:Line(47,49,48,43
:Line(37,39,56,39

This code does not look like much, but if you enter the program correctly it will draw a face... sort of. The poor guy's nose needs a little work. Add the following line of code to fix it:

:PtOn(47,43

This program turns point (47,43) on (Hence the name PtOn(). Notice that, like I said in the first example, PtOn( uses graph point coordinates instead of pixel coordinates, as do the commands PtOff( (Turns a point off) and PtChg( (If the point is on, it turns it off; if the point is off, it turns it on). Here are the pixel commands: PxOn(, PxOff(, PxChg(, and PxTest(. The first three do the same as their point using counterparts. The differences are that they use the true pixel coordinates instead of the graphing ones, and the x and y coordinates are reversed (This means that the syntax for a PxOn( command is actually PxOn(y,x)). The fourth is only a pixel command, and has no point counterpart. PxTest( tests a coordinate to see if the pixel is on or off. If it is on, then PxTest( is equal to 1. If it is off, then it is equal to 0. Make a new program called PIXELS. Note that it does NOT need the code from the first example, since it uses the standard pixel coordinates, not the graphing coordinates. Enter this code:

:PxOn(0,0
:PxOn(4,0
:PxOn(0,4
:PxOn(4,4
:PxOn(2,2
:Pause
:If PxTest(0,0)==1
:Disp "0,0 is On"
:Pause
:ClLCD
:PxOff(0,0
:If PxTest(0,0)==1
:Disp "It's still on"

First, five pixels are illuminated and the program pauses. Next, it tests to see if pixel (0,0) is on. If it is on (Which it is), the text "0,0 is On" will be displayed. Otherwise, nothing is displayed. After the pause, the homescreen is cleared and the pixel (0,0) is turned off. Next, pixel (0,0) is tested again. If it is on, "It's still on" will be displayed. However, it has been turned off and so that text will not be displayed. Fool around with these commands, and be sure that you understand the difference between the Px** and Pt** commands. Now, onto something simpler :) Make a program called CIRCLES, and add the code from the first example on this page to it (It uses graphing point coordinates, not pixels). Then, add this code at the bottom:

:Circl(63,31,10
:Line(63,34,64,31
:Line(61,27,66,27
:PtOn(60,35
:PtOn(67,35
:PtOn(63,31
:PtOn(60,28
:PtOn(67,28

This will draw a more natural-looking smiley. I hope you can understand my attempt at explaining these commands, feel free to ask questions by sending mail to the address below. At the end of the programs which modify the graph window, set xMin, xMax, yMin, and yMax back to -10, 10, -10, and 10 respectively so that users can graph again. Our window is great for programs, but not for math! Learn a better way to do this in Chapter 9: Tips and Tricks.


Once you have mastered basic BASIC graphics, you can take on Chapter 7: Other Commands.

Click to Return to This Tutorial's Home Page