Lesson 9:


Introducing the Graphscreen

In this lesson, we are moving away from the homescreen, and moving on to the graphscreen. Over the course of the next several tutorials we will learn about the functions of the Drawing tools, how to graph from a program, how to set paramaters of the graphscreen and alot more.

Screen Dimensions



The screen is composed of 5,828 pixels; 94 pixel columns, 62 pixel rows. If your calculator is new, or you have reset the memory, then the calculator will have set itself to the calculators defaults, which would mean a 10x10 graphscreen. There should also be an axes sitting in the middle of the screen, and as far as programming is concerned, that is just in the way.

Now, you may want to know how to set your screen dimensions. There are two ways to accomplish this.

1. You can manually adjust the settings by pressing [WINDOW]. You should be looking at the following screen:



You can resize your screen in many different sizes. Now the commands Xmin, Xmax, Ymin, Ymax are fairly self explanatory. These control how many pixels up and down equal one. I always like it set up at the maximum, Xmax=94 and Ymax=62. This removes any chance of having decimals to contend with when drawing from within a program.

Xscl, Yscl, and Xres are another matter. Xscl/Yscl are scales, that define the distances between the 'tick' marks that can be seen on the axes. Set them to 0 to turn them off. Xres sets pixel resolution for function graphs only. So unless you plan on graphing in your program for some kind of gaming effect, this should be left at its default number, 1. The highest it can be set at is 8.

2. You can manually resize the screen within a program, using variables found under the [VAR] key. Under the Window... menu, the first 7 options will be the same as on the window screen. You store to these as you would any normal variable.

The last four, have a different function. X and Y (Little symbols unavailable) define the distance from the center of one pixel to the center of any adjacent pixel on the graph. This may or may not be of use to you.

Formatting the Graphscreen


Now of course there are ways of enhancing the graphscreen further, by adding and taking away from it. You can remove/add the axes, a grid, coordinate display, axes labels, and expressions. Most of this will have little bearing on game design, unless you aren't building a game, then you will find some use for them then.

Like the Window settings, there are 2 ways to use the above commands. You can use them by pressing [2nd] and [ZOOM] or by placing the commands in a program, which you also get the commands from pressing the afore mentioned key sequence. Go to the Format screen from the homescreen, then go to it from within the program editor. You should see the difference.

Most great games use the graphscreen for the title, so they can have some really cool image, and so one of the first things they do in their program is turn everything in the above off. Now, you want to know how to draw some cool things on the graphscreen, huh? Let's start in on that then.

Drawing on the screen


To draw on the graphscreen, you need to access the drawing commands, located by pressing [2nd] and [PRGM]. This will bring up 3 sub-menus; DRAW, POINTS, and STO.

The first option under the DRAW menu is ClrDraw. Simply, this clears the entire graph buffer. What is a graph buffer, you might ask? It is just a technical term for the graphscreen, used when programming assembly.

The second option is
Line(. This creates a line in the following syntax:

Line(x1,y1,x2,y2,n

Variable n is a little known fact, since it is something that is optional. If you don't put anything there, the calculator automatically assumes that you want to create a line, and will substitute a 1 in its place. It won't paste it in, so that will save you 2 bytes per command. Now if you want to delete a line, you need to place a 0 in place of n.

Now, it is very important how you set up the Line( command, because order with diagonal lines matters. Set up your graphscreen for the maximum as described above, then on the homescreen, type the following:

Line(10,10,50,30

That will land you a line starting close to the bottom left of the screen, and works its way up and right. But, if you rearrange the numbers, to be 50,10,10,30, you get one that starts in the middle of the left of the screen, and works its way down and right. Switching the y variables only changes it slightly, but it does make a difference if you are going for precision.

Command number 3 is Horizontal and it has a syntax of:

Horizontal n

n is equal to greater than Ymin. It just draws a line from the left side of the screen to the right side of the screen. You can also use Ymin and Ymax in place of n

Number 4 is Vertical, and has the same syntax as Horizontal, the only difference is that you have to give it a number greater than Xmin, and it draws a line up and down.

Tangent(, DrawF and DrawInv (options 5, 6, and 8) are all graphing functions that draw a line from either a function or an expression. Unless you plan on encorporating graphing functions into your game, there is really no other use for those commands.

Option 7 is the Shade( command. Its purpose of course, is to shade sctions of the graphscreen. The syntax of this command is:

Shade(lowerfunction,upperfunction,Xleft,Xright,pattern,patres

upperfunction and lowerfunction are shaded relative to x on the graphscreen without clearing, and shades the area that is specifically above lowerfunction and below upperfunction. If you just use the lowerfunction,upperfunction syntax, you will get a shaded area as you define it, but if you use the syntax, upperfunction,lowerfunction, you will get two lines that go across the screen, nothing more. While it doesn't shade anything, it also does not clear anything either.

Now, you may be wondering what the Xleft,Xright part of the above do. This shades an area starting at Xleft and ending at Xright. With the window settings set to the max, try the following from the homescreen:

Shade(10,25,23,50

Now, the pattern can be one of 4 options:

1 = Vertical (default)
2 = Horizontal
3 = negative slope 45°
4 = positive slope 45°

The above will make no sense until you know/understand what patres does. Simply put, once patres has been set, it will shade every x variable, where x can be numbers 1 through 8.

So, if you set pattern to 1 and patres to 4, it will shade every fourth pixel vertically. If you set pattern to 2, it will shade every fourth line horizontally.

Setting patres to 3 will shade in a 45° angle to the left, while setting it to 4 will shade in a 45° angle to the right. Experiment with the command, you might be able to turn this command into a really cool effect. :)

Option number 9 is Circle(. This command is really easy, and has little complexities to it. The syntax for this command is:

Circle(x,y,radius

Now the complexity of this command is that the window settings can cause distortions and make the circle... not so circular. You can fix this with one of two ways. You can use ZSquare (Adjusts the X or Y window settings, so that each pixel represents an equal width and height in the coordinate system) or you can set the screen to the max setting (or find a setting that suits your needs).

Number 10 (option 0) is one of the most widely used commands in almost all good games. Text( displays text on the graphscreen starting at pixel location (row,column) where row is greater than or equal to 0, but less than or equal to 57. The colum has to be greater than or equal to 0, and less than or equal to 94. You can display variables and lists with text, but you can not seperate information like you can with the Disp command.

Another not so well known fact about Text( command is that you can have two font sizes, the default is a 6 high by 4 wide font charachter set. The second character set has the size of 8 high by 6 wide, which is the standard size for the homescreen. To access the second character set, simply use this syntax:

Text(-1,row,column

And last but not least, you have the Pen command, which is accessible only when on the graphscreen, or on the homescreen. This command is not available to place inside a program or game. There are other commands that will work like this though, we will tackle them in the next lesson.

Once you activate the Pen command, press [ENTER] and you will have turned on the pen. Move the cursor around to draw. To turn off the pen, press [ENTER] again. Did you mess up your picture, and you think the only way to remove the blemish is select ClrDraw and start all over? Read on to the next lesson, and learn about some other commands that will save you from this catastrophe.

<<Previous - Contents - Next>>