Basic Graphics on the 2068

When writing my first article for SUM, I made an assumption that there were many others like myself that did not know much about the graphic abilities of the 2068.

In reviewing the article, I think that it was a good assumption, but assumptions can be dangerous. Many times I have read an article in which the author assumed that the person reading would know or understand a given item. The end results could be a failure to understand what the author was trying to get across. This particularly is true in technical manuals.

A word to those who may be longing to be able to write a program that you have on your mind. DON’T BE DISCOURAGED! If you have the desire to learn and want to bad enough, hang in there, it will come with patience, and perhaps with some help. There are several things that I intend to cover here. They include forming your program, reasoning it out, the use of PLOT, DRAW, PRINT AT, ON ERROR, POINT, PAUSE, and FOR-NEXT loops.

The first thing that you should do when writing a program is to have a direction in mind, that is, “what do I want to accomplish?”, “How do I do this?”. Make some notes to yourself such as:

Notes: \n1. Draw squares, form them into a three sided box. \n2. Label the sides a, b, etc. \n3. Give the dimensions. 

Purpose: 
Show how to create box shapes. How to place labels. Show the approach to the problem. Show how to start PLOT & DRAW. 

Obviously there are some things that have to be learned here before the program can be written such as how to use the commands which tell the computer what we want it to do. Before we use the DRAW command we must learn how to use the PLOT command. Begin by getting your 2068 manual and turning to page 152. There you find a chart which gives the out will grid coordinates for the screen. Now notice that at the lower left hand corner you will see a 0. This is the starting point for the X coordinate (or axis). At the lower right hand corner is the starting point for the y coordinate. If you read my first article on the 2068 graphics, you will remember the phrase “Why (Y) up and down when (X) across”. This is where it came from. The Y axis is the up and down axis and axis is left to right.

10 PLOT 50,50 tells the computer to move from the lower right corner 50 pixels to the RIGHT and the second number 50 tells the computer to move UP 50 pixels toward the top. The point 1s then put at the intersection of these two coordinates. You may use any two points within the bounds set by the graph. Try entering a few points of your own. You may have discovered that you can string these PLOT commands together, that is ; PLOT 50,50: PLOT 100,75 etc. Now try this:

  10 PLOT 0,100 
  20 DRAW 40,0 
  30 FOR N=0 TO 10 
  35 DRAW N,N 
  40 DRAW N,0 
  50 NEXT N

In line 10 we have the PLOT command that tells the computer to stay at 0 on the X axis and move to 100 on the y axis. This specifies the starting point for the DRAW command. When we tell the computer to DRAW 40,0 we are telling it to start at PLOT point 0,100 and move to the right 40 pixels without moving up or down. All PLOT and DRAW commands must have a comma between numbers.

Line 30 sets up what is called a FOR-NEXT loop. What it does is to set N at a value of 0 and increments N each time a NEXT N is encountered and passes again through the loop until N reaches its final value of 10 in this case. Line 35 causes the computer to DRAW a diagonal line as N is incremented with each pass.

Line 40 draws to the right the count of N pixels. This line will continue to be drawn until the full count of 10 has been reached.

These FOR-NEXT loops are useful in many applications in BASIC. Anytime you may want to advance a number value or repeat a PRINT statement, you may use a FOR-NEXT loop. Of course there are rules here also. See Your manual.

We have shown you two ways to DRAW a line. Notice that the FOR-NEXT loop is the slowest of the two and that DRAW is almost instantaneous. Now lets review using the computer:

  10 CLS: PRINT "A REVIEW OF PLOT AND DRAW" 
  20 INPUT "ENTER TWO PLOT NUMBERS (0-255), (0-175) ";P1,P2 
  30 INPUT "ENTER TWO DRAW NUMBERS "; D1, D2 
  40 ON ERROR GOTO 100 
  50 PLOT P1,P2: DRAW D1, D2 
  60 PRINT "PRESS ANY KEY TO CONTINUE": PAUSE 0 
  80 GOTO 20 
 100 PRINT "YOUR DRAW NUMBER IS TOO LARGE. REDUCE ITS VALUE" 
 110 PRINT "PRESS ANY KEY TO CONTINUE": PAUSE 0: GOTO 20

We stated that the loop would count from 0 to the stated high number. But the computer sees the zero as another number. Try this:

  10 FOR N=0 TO 5 
  20 PRINT N 
  30 NEXT N

After running, you should have the fol- lowing printed down the screen: 0,1,2,3,4,5. That’s six numbers, not five! If you want a count of five, use: 10 FOR N=1 TO 5 in the above example.

This would return a count of five for N. It is important to remember this when setting up a program in which you will want to be doing a loop. One occasion where you may want to start at zero instead of one is when you wish to PRINT AT a given location on the screen that starts at a zero position. For example:

  10 FOR N=0 TO 5 
  20 PRINT AT N,0; "POSITION ZERO" 
  30 PRINT AT 5,N; "POSITION ZERO AT LINE 5"
  40 PAUSE 100 
  50 NEXT N

Run the program and study it to under- stand what the FOR-NEXT has done. The first time through the program the position which contained an N was set to zero. The next time through they were Incremented by one and so on until N reaches five. The PAUSE 100 is there to slow the action down so that you may observe the changing locations. PAUSE 100 tells the computer to stop for 100/60 seconds.

Another command that needs to be discussed is the PRINT AT command. This command works in the same manner as the PLOT command except that it has a different set of numbers associated with It. Again referring to the manual page 152. Notice that there are numbers which run from the upper left to the right on the grid, and from the upper left down. These are PRINT AT locations of the screen. To use them, simply decide where on the screen you want the printed material to appear and then insert these numbers into the PRINT AT command.

For example, let’s assume that you may want a title to appear at the top of the page and begin text two lines below the title. You would first look at the graph in the manual and pick the locations for the printed matter. Lets try line 0, 10 spaces over, and text 1s to start on line 2, 5 spaces over. On the computer it would be:

  10 REM ** PRINT AT locations ** 
  20 PRINT AT 0,10; "TITLE HERE"; AT 2,5; "START SECOND LINE HERE"

You may start your line at any line number you wish as long as it is in the bounds of the grid numbers from page 152. However, you also may have to count the spaces available for that line. If you are trying to put words on one line which will take more than 32 spaces they will be sent to the next line and start at position 0 of that line unless you have told the computer to do something else. Remember the FOR-NEXT loop? Well we could use it here for example to space lines or words. Try this:

  10 REM ** SPACING LINES ** 
  20 FOR N=1 TO 6 STEP 2 
  30 PRINT AT N, 5; "LINE SPACING BY TWO'S" 
  40 NEXT N

we have another new command, STEP 2. This command simply tells the computer to count by two’s instead of by one’s. If we had a special case where we wanted to count down from a high number to 0 we could use STEP -2.

OK, if you have stuck with us you are now going to set up the program for drawing a three-sided box. The first thing we have to do is to decide how big we want to make the box and where on the screen we want to put it. We also have to consider the room that the labels will take up on the screen. The best way to do this 1s to have some graph paper that can represent the graph in the manual.

I should mention one other thing before we start our drawing. Each character is made up of a square of 8 x 8 pixels each on the grid. When the computer sees a PRINT AT command, it sets aside an 8 x 8 square for each letter. This has an effect on our PLOT commands in that it will let you print only in each 8 x 8 grid. This means that you must plan your PRINT statements in relation to your graphics. I will not attempt to go into this further here for it is a subject in itself.

Looking at the graph paper (or the choose graph in the manual) we will first choose the PRINT AT area for the title. WE will use line 0 so that we have as much of the screen as possible available for future use. You can change them later if you choose. Now remember that we want to label the dimensions of the box, so we will set aside line 18 and columns 5-12 and set aside lines 10-16 and columns 11 & 12 for the side dimensions.

Now we will pick a PLOT location that will put us somewhere near the center of these PRINT AT locations. Looking at your graph you will see that line 10 and column 11 or 12 is a good choice for the focal point of the top right corner of the box. So we will use that as our starting point for the first PLOT. Now try this:

  200 REM ** DRAW BORDER ** 
  210 PLOT 0,0: DRAW 0,175: DRAW 255,0: DRAW 0, -175: DRAW -255,0 
  220 REM ** BOX-TITLES-LABELS- DATA COMPLETE 
  230 PLOT 75,95: DRAW 10,0: DRAW 10,20: DRAW 0,5 
  240 PRINT AT 18,5; "W= 10"; AT 1 9,5; "H= 5"; AT 20, 5; "L= 5" 
  250 REM ** DRAWING COMPLETED **

Now that you have had a chance to play with the first part of the program, let’s go a little farther and learn how to make an auto-DRAW program which will display any size box within the grid areas of the screen.

WARNING! MAKE SURE YOU SAVE THIS BEFORE RUNNING IT!! PROGRAM

  300 REM ** AUTO-DRAW OF BOXES * 
  310 REM GET DATA 
  320 INPUT "GIVE THREE DIMENSION S (H,W,L) ";H,W, L 
  330 PLOT 75,95: DRAW 0,-H: DRAW -W,0:DRAW 0,H 
  340 DRAW W,L: DRAW W,0: DRAW -W,-L: DRAW -W,0 
  350 DRAW 0,-H: DRAW W,0: DRAW L,0: DRAW 0,H 
  360 PRINT AT 18,5; "W= "; W; AT 19,5; "H= "; H; AT 20,5; "L= ";L 
  370 REM ** DRAW AND FILL BORDER 
  380 PLOT 0,0 
  390 DRAW 5,5: DRAW -5,5 
  400 ON ERROR GOTO 420 
  410 GOTO 390 
  420 PLOT 0,175 
  430 DRAW 5,-5: DRAW 5,5 
  440 ON ERROR GOTO 460 
  450 GOTO 430 
  460 PLOT 255,175 
  470 DRAW -5,-5: DRAW 5,-5 
  480 ON ERRER GOTO 500 
  490 GOTO 470 
  500 PLOT 250,0 
  510 DRAW -5,5: DRAW-5,-5 
  520 ON ERROR GOTO 540 
  530 GOTO 510 
  540 PRINT AT 1,10; "AUTO-DRAW"
  550 ON ERROR RESET 
  560 STOP

Now run Program 2 above and watch what happens after you enter the data. If the program locked up, check your typing and run it again. There are some unusual things in this program which you don’t see very often. We will explain these and leave the others for you to think over.

Note the ON ERROR statements. If the computer detects an error, the program will do as commanded in the last ON ERROR statement encountered. You must be very careful how you use them else you may find your computer “locked up” and turning it off as the only way to get out of it.

Lines 310-360 takes the data for the dimensions and DRAWs the inner and outer border lines. Then starting at line 370, we see the first PLOT followed by a DRAW. It is at this point that we must carefully observe whats going on.

The computer PLOTs Its starting point, then it starts to DRAW. But notice that the DRAW is stuck in a loop formed by line 410. Now there are only 175 pixels available going up the grid. When the 175th point is reached, there will be an error generated as the computer tries to PLOT beyond this point. Hence, it goes to line 420 and starts again from there with the commands given in that line. It “drops through” the program until it comes to the end, thus being completed.

At line 550 we see ON ERROR RESET. This tells the computer to clear itself from the previous error commands. Change line 400 to ON ERROR CONTINUE. RUN the program. Now you can see just what happens when the computer “locks up”.

Now lets add a new command, POINT, which checks any point of the screen to see if It is “colored” or “filled”. If it is, a value of one is returned, if it is not, 0 is returned. Lets use this new command to fill in the box.

To activate this command, we tell the computer where on the screen we want to check for this condition. We know from our PLOT and DRAW statements where this is, but we will start before that point so that you may see better how this command works. DELETE line 560 then add these lines to Program 2:

  570 REM ** add color fill ** 
  580 LET C=4: REM >>COLOR<< 
  590 FOR N=35 TO 100 
  600 PLOT N,95 
  610 IF POINT (N+1,100) THEN GOTO 630 
  620 NEXT N 
  630 FOR N=N TO N+47 
  640 PLOT 48,145-N 
  650 DRAW INK C; 47,0: NEXT N 
  660 STOP

Now look at the program starting at line 590. Here we have set up a FOR-NEXT 1oop. Line 600 starts to PLOT at position Nand continues until the conditions at line 610 are met. Now notice here that N is given a value of N+1. The reason this was done is that if we had told the computer to look at the point of N, it would have seen a value of 1 and started to ink fill there. We don’t want to happen. We need it to fill when this the point in front of the N point is 1.

In line 630 a new FOR-NEXT loop is set up for the fill routine. The computer now starts to fill the front of the box. Notice the loop is set up to the dimensions of the front of the box. Again the value of N is one less than that needed (48 would be on the line used to DRAW the box, we want to stop short of this by one count).

(Ed. Note: One good way to learn programming is to try different approaches. In the color fill program, try making the computer “scan” for the beginning of the box, remember this point, then look for the end of the box (the other sidel and use the DRAW command to f1ll the space. Remember DRAW 1s faster. –JW)

You have been given a lot to digest in this article. You have seen how to use the PRINT AT, PLOT, DRAW, FOR-NEXT, STEP, ON ERROR, POINT, and PAUSE commands. You have also learned about color fill, screen coordinates (X & Y axis), and how to choose your screen layout. True, there is much more, but this is one big step forward in learning how to use your machine.

Let SUM know what you think of such articles as well as others. Remember, you are the ones who make or break a magazine! Lets all do our best to help keep such magazines alive and well. It’s the only media that we have available for reaching many people.

I hope that this may help many of you out there get a start. I will reply to any questions that you may have concerning this article, or any other. Please send a SASE. Give full details of your problem and I will do my best to answer them.