Drawing Lines

Okay, by this stage we know how to set Graphics mode, set Text Mode, and draw pixels to the screen. So know we know everything we need to draw lines.

Horizontal Lines

Drawing horizontal lines are simple. A horizontal line is merely a run of pixels. So, to draw our horizontal line we do the following:

  1. Obviously, we must be in Mode13h
  2. We accept 4 parameters from the user - Starting X and Y position, ending X position, and color of the line
  3. Calculate the starting offset for the first point in the line (the same formula for calculating a pixel position).
  4. Loop for the length of the line, plotting a new pixel next to the old one.

Vertical Lines

Vertical lines are a little different to drawing horizontal lines, but are still simple. However, when instead of drawing the next pixel in the line next to the previous one, we plot it underneath. To make this routine a little faster, instead of increasing the Y position of the pixel to be plotted by one, we simple increase the X position by 320 (ie the width of the screen). This is faster than calculating the new position each time

  1. Obviously, we must be in Mode13h
  2. We accept 4 parameters from the user - Starting X and Y position, ending Y position, and color of the line
  3. Calculate the starting offset for the first point in the line (the same formula for calculating a pixel position).
  4. Loop for the length of the line, plotting a new pixel underneath the next one by incresing the X postion by 320

Sloping Lines

This is where it gets interesting. Firstly, we need the X and Y positions of the start and end points, and the color. But, how do we know which pixels do draw between the 2 lines? There are a number of methods to achieve this; I'll examine a slow one, which is easier to understand.

Firstly you have to decide whether to work from X1 to X2 or Y1 to Y2. We do this by finding out the distance between X1 and X2, and the distance between Y1 and Y2. We'll call these values XLENGTH and YLENGTH respectively.

If XLENGTH > YLENGTH, we work from X1 to X2. If YLENGTH is greater, we work from Y1 to Y2. If they are equal, it doesn't matter which. The axis along which we move is called the "step axis" and the other axis we will call "other axis". ;)

Now we must be sure that the FROM step is less than the TO step ie that X1 < X2 or Y1 < Y2, depending on which way we are working. Remember, if you swap the X values you must swap the Y values.

The trick to drawing sloping lines is to know when to move along the OTHER axis. If we don't move along the other axis at the appropriate time, we end up with gaps in our line.

What is happening basically is that for every move along our "step" axis, we also move a fraction along our "other" axis. The reason we went to work out which axis to follow is because we want to determine which axis we can move along in increments of less than one.

Now towork out the fraction we should move. If moving along the X axis, we know we are taking (X2-X1) steps, and by that time we want to have moved (Y2-Y1) along the Y axis, so each step has to be done in fraction.

YSTEP = (Y2 - Y1) / (X2 - X1)

If moving along the Y axis, then we move YLENGTH steps, and so we want to move XLENGTH along the X axis, so the formula is:

XSTEP = (X2-X1) / (Y2 - Y1)

So, our final steps to drawing our line are:

  1. Calculate the lengths of X and Y, making sure they are both positive
  2. If XLENGTH is greater, make sure X1 < X2. Swap if necessary.
  3. Calculate the fractional step we want to take along the Y axis for every step we move along the X axis.
  4. We must setup a variable to strack our fractional position on the Y axis. This initially has the value of Y1.
  5. Now we loop, one pixel at a time, from X1 to X2. Each time we plot our pixel at (XCOUNT, Y). We then add YSTEP to our fractional Y coordinate, and the loop continues.
  6. If the Y length was greater, the code is nearly exactly the same, except we are moving along the Y axis and keeping track of a fractional X coordinate.

Now, this routine is sloooooooooooow. It uses fractional numbers. Also it is possible that in the rounding off of our fractional values we may not end up at exactly the end value we specified. However, I feel this routine is easier to understand. To optimize this, get rid of the floating point numbers. Or, implement Bresenhams algorithmsl; they are some of the fastest I have seen.

I have faster line drawing routines than the ones given here; email me if you want them.

Download the source code and executable progam here.

Back