Drawing Lines on the Graph Screen...

HOME >> Tutorials >> Tutorial 15: Lines |

Introduction:

We've finally gotten to the tutorial on Lines. In the previous two tutorials, I've been showing you ways to make lines with points and pixels, but in this tutorial, I'll show you the real way to make horizontal, vertical, and diagonal lines. The problem with using points and pixels to make a line is that you can only easily make horizontal or vertical lines; it's very difficult to make diagonal lines. Actually, the only way to make a diagonal line using pixels or points is to write a command line for each point in the diagonal line; you cannot use a For loop. Lines are really essential in making graphics on the graph screen. A line can be as short as two pixels and as long as the whole length of the screen. The three different line commands use the coordinate plane (*x*,*y*) like the point commands, so you will have to set the window variables.

New Commands:

Line( | Draws a line segment from (X1,Y1) to (X2,Y2) |

Horizontal | Draws a horizontal line through y coordinate |

Vertical | Draws a vertical line through x coordinate |

Line(X1,Y1,X2,Y2) |
Horizontal y |

Line(X1,Y1,X2,Y2,0) |
Vertical x |

The Codes:

There will be many small sets of code in this tutorial. In the first code, we will make a box and a diamond using Line(. In the second code, I will show you how to draw a line and then erase part of it, just like we did in the previous lesson. The third code will show you how to underline and box-in text using Line(. In the fourth code, we will make a grid using Vertical and Horizontal. Finally, the fifth and last code will use Line( to shade in the box we made.

: |
For AShell, SOS, and TI-Explorer |

AxesOff |
Turns the graph axes off |

FnOff |
Deselects all the Y= functions |

0Xmin |
Stores Xmin as 0 |

94Xmax |
Stores Xmax as 94 |

0Ymax |
Stores Ymax as 0 |

-62Ymin |
Stores Ymin as -62 |

ClrDraw |
Clears the graph screen of all drawings |

Line(5,-20,25,-20 |
Draws a horizontal line segment |

Line(25,-20,25,-40 |
Draws a vertical line segment |

Line(25,-40,5,-40 |
Draws a horizontal line segment |

Line(5,-40,5,-20 |
Draws a vertical line segment |

Pause |
Suspends program and waits for user to press |

Line(50,-30,60,-20 |
Draws a diagonal line segment |

Line(60,-20,70,-30 |
Draws a diagonal line segment |

Line(70,-30,60,-40 |
Draws a diagonal line segment |

Line(60,-40,50,-30 |
Draws a diagonal line segment |

press

What this little program does is draw a box, pause until the user presses , and then draws a diamond. The program is very straightforward. Notice how when I'm drawing the box and the diamond that the (*x*,*y*) coordinate at the end of one Line( command is the same as the (*x*,*y*) coordinate at the beginning of the next Line( command. And since I'm closing the figure, the first coordinate in the first Line( command and the last coordinate in the last Line( command are the same. Next, I'm going to show you how to draw lines and then erase part of them.

: |
For AShell, SOS, and TI-Explorer |

AxesOff |
Turns the graph axes off |

FnOff |
Deselects all the Y= functions |

0Xmin |
Stores Xmin as 0 |

94Xmax |
Stores Xmax as 94 |

0Ymax |
Stores Ymax as 0 |

-62Ymin |
Stores Ymin as -62 |

ClrDraw |
Clears the graph screen of all drawings |

Line(5,-10,45,-10 |
Draws a horizontal line segment |

Line(75,-10,75,-50 |
Draws a vertical line segment |

Line(15,-60,63,-40 |
Draws a diagonal line segment |

Pause |
Suspends program and waits for user to press |

Line(15,-10,35,-10,0 |
Erases half of the horizontal line |

Line(75,-20,75,-40,0 |
Erases half of the vertical line segment |

Line(27,-55,51,-45,0 |
Eraseas half of the diagonal line segment |

press

The program just displays three types of lines (diagonal, vertical, and horizontal), waits for the user to press , and then erases exactly half of each line. Figuring out the coordinates to erase part of the diagonal line was pretty difficult actually, but I figured out the slope of the line and was able to work from there. Next, I will show you how to underline and box in text.

: |
For AShell, SOS, and TI-Explorer |

AxesOff |
Turns the graph axes off |

FnOff |
Deselects all the Y= functions |

0Xmin |
Stores Xmin as 0 |

94Xmax |
Stores Xmax as 94 |

0Ymax |
Stores Ymax as 0 |

-62Ymin |
Stores Ymin as -62 |

ClrDraw |
Clears the graph screen of all drawings |

Text(15,25,"UNDERLINED |
Writes "UNDERLINED" |

Text(35,30,"BOXED IN |
Writes "BOXED IN" |

Line(25,-22,63,-22 |
Draws a horizontal line segment to underline text |

Line(28,-34,59,-34 |
Draws the top of the box |

Line(59,-34,59,-42 |
Draws the right side of the box |

Line(59,-42,28,-42 |
Draws the bottom of the box |

Line(28,-42,28,-34 |
Draws the left side of the box |

If you put in everything correctly, at the top should read, "__UNDERLINED__" and in the middle of the screen it should say "BOXED IN" with a box around it. I just wanted to show you different things you can do with line to make your text look better and stand out. Next, we are going to make a grid using the commands Vertical and Horizontal.

: |
For AShell, SOS, and TI-Explorer |

AxesOff |
Turns the graph axes off |

FnOff |
Deselects all the Y= functions |

0Xmin |
Stores Xmin as 0 |

94Xmax |
Stores Xmax as 94 |

0Ymax |
Stores Ymax as 0 |

-62Ymin |
Stores Ymin as -62 |

ClrDraw |
Clears the graph screen of all drawings |

For(X,0,94,8 |
X is going to be stored from 0-94 in increments of 8 |

Vertical X |
Draws a vertical line at each value for X |

End |
End the For loop |

For(Y,0,-62,-8 |
Y is stored from -62-0 in increments of 8 |

Horizontal Y |
Draws a vertical line at each value for Y |

End |
End the For loop |

You have to put a negative in front of the 8 in the second For loop because you're actually counting backwards from 0 to -62. You could just change it to read **For(Y,-62,0,8)**, but I didn't want to do that. If you inputted everything correctly, the program should draw an 8x8 grid. The last code, finally, will shade in the box that we originally made in the first code.

: |
For AShell, SOS, and TI-Explorer |

AxesOff |
Turns the graph axes off |

FnOff |
Deselects all the Y= functions |

0Xmin |
Stores Xmin as 0 |

94Xmax |
Stores Xmax as 94 |

0Ymax |
Stores Ymax as 0 |

-62Ymin |
Stores Ymin as -62 |

ClrDraw |
Clears the graph screen of all drawings |

Line(5,-20,25,-20 |
Draws a horizontal line segment |

Line(25,-20,25,-40 |
Draws a vertical line segment |

Line(25,-40,5,-40 |
Draws a horizontal line segment |

Line(5,-40,5,-20 |
Draws a vertical line segment |

Pause |
Suspends program and waits for user to press |

For(X,5,25 |
X is going to be stored from 5-25 |

Line(X,-20,X,-40 |
Draws a vertical line segment |

End |
End the For loop |

press

Obviously, there is an easier way to shade in something. If you want to find out what command is just solely for shading, go to Tutorial 17. What this code actually does is draw a line from the top of the box to the bottom in each pixel from left to right. This gives the illusion that it is shading in the box. The problem with this method of shading is that you can't shade in diagonally or shade below or above a function. In this code, you could actually take away those four line commands that draw the box, because the shading will make a box in itself. Try it and see.

Conclusion:

Now you know many tricks with using the three line commands. I feel that Line( is the most important of the three, because it can do the functions of the other two. In the next tutorial, we will learn how to draw circles, which is the second to last step in making pictures.

If you do not understand a particular part in this lesson, have suggestions, or find any problems please contact me.

Tutorial 14 | Tutorial 16 |

Contact the Webmaster.