How does a computer actually draw a line?

When using programs like Rhino3D or CAD, you may have wondered how they actually display lines on a monitor. This is because such programs are commonly described as vector-based, and may people understand vector-based programs as displaying lines defined mathematically.

However, the monitor we look at is made up of individual pixels. So how do vector-based programs turn mathematically defined lines into pixels on the screen?

To start with the conclusion, the answer is that they go through a process called rasterization. If you have ever tried to open an illustrator or CAD file in Photoshop for edidting, you may have seen a message saying, “This smart object must be rasterized before it can be edited”.

Rasterization is a process of converting data that is stored according to rules — such as mathematical formulas — into individual pixels that correspond to those formulas.

This may not feel very intuitive yet. If it already makes sense to you, feel free to skip this part.

Here is a single straight line drawn in Rhino 3D.

Try moving your eyes closer to the monitor.

Do you see the jagged shapes?

Let’s take an even closer to look.

In the end, you can see that what’s actually there is a grid pattern with black dots unevenly plotted on it.

So, aren’t you curious how a line segment defined by a mathematical formula is converted into individual pixels?

There are several ways to rasterize a line segment, but in this post, I’ll introduce one of the simplest methods: the Digital Differential Analyzer (DDA) algorithm.

Despite its grand name, it isn’t very difficult if you know how to find the equation of a straight line. The overal steps are as follows.

Below is the code that implements this logic.

unction DDA(xStart, yStart, xEnd, yEnd) {
 let dx = xEnd - xStart
 let dy = yEnd - yStart
 let steps, k;
 let xIncrement, yIncrement;
 let x = xStart;
 let y = yStart;

 if (Math.abs(dx) > Math.abs(dy)) steps = Math.abs(dx);
 else steps = Math.abs(dy);

 xIncrement = dx / steps;
 yIncrement = dy / steps;

 for(k = 0; k < steps; k++) {
  x += xIncrement;
  y += yIncrement;
  grid[Math.round(y)][Math.round(x)] = 1;
 }
}

I alse included an example in p5.js, which I hope will help you understand it more easily. You can play it.

https://openprocessing.org/sketch/2848562

If you want more rigorous and detailed explanation, you can refer to the following link: the DDA algorithm as described on Wikpedia.

https://en.wikipedia.org/wiki/Digital_differentialanalyzer(graphics_algorithm)