Tutorial 15: Lines
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.