BIT-101

Following up on yesterday’s post about drawing crisp lines, I realized it would be nice to add some details on why putting lines on a 0.5 pixel makes them crisp and not blurry.

In many common drawing apis, when you draw lines, the pixel values you give mark the center of the line. If you are drawing a one-pixel thick line, it will draw it half a pixel on either side of the measurment you supplied. Because it crosses pixel boundaries, automatic antialiasing kicks in and the line is blurred to make it look like it is in between two pixels.

Here’s an simulated image that might help:

Here, each of the squares in the grid represents one pixel. Each of those pixels is measured not by its center, but by its top left corner. So if you set pixel 0, 0 to black, that whole top left pixel would turn black.

But when you draw a vertical line at a certain whole number pixel value, it puts half that line on the previous pixel column, and half on the given pixel column. So you get a blur.

In the second case, this is a one-pixel wide rectangle drawn at whole pixel boundaries. As you can see it only affects whole pixels. And it’s sharp and crisp.

The third image respresents a line drawn on a 0.5 pixel value. It draws the line half a pixel to the right and half a pixel to the left, which exactly fills that column of pixels, so it is crisp, just like the rectangle. No antialiasing is applied.

In the image below, I’ve drawn a series of one-pixel rectangles on the top half. Below that is a series of one-pixel lines, each with a bit of a horizontal offset. The one of the far left has no offset and is on an exact pixel, so if very blurry and looks thick. Moving left to right, each pixel has a bit more of an offset until the last one has a 0.5 pixel offset. This puts it within a full pixel and there’s no antialiasing.

This also applies to drawing rectangles. But in the opposite way. Rectangles should be on whole pixel values if you wan them to appear crisp.

Below are two squares, and two one-pixel wide rectangles. In both cases the first example is on a 0.5 pixel boundary, and the next one is on an exact pixel. The first ones look blurry and the next ones are crisp.

Finally, since we’re talking about pixels, let’s look at some honest-to-god PIXELS!

Using my USB microscope, here’s the left part of that second picture showing the whole pixel rectangle and whole pixel line. The top half with the rectangle only affects the single pixel. Below that it affects some to the left of that column, and overall it’s less dark.

And we can zoom in even more and really see it clearly.

Here, in the rectangle portion, the entire set of red, green and blue elements is blacked out completely. And the ones on either side of it are fully on.

But on the blurred version, a wider area is just dimmed down. That’s the antialiasing at work.

Further to the right in that same image, the line is at more of an offset and the antialiasing is less prominent, but it’s not quite the same as the rectangle.

And on the far right, where the line is on a 0.5 pixel value, there is no difference between the line and the rectangle.

If there’s any real takeaway from this post, it’s: Get a USB microscope! They are awesome!