Computer Images – Anti-Alias

The computer images series has covered pixels, lines, polygons, splines and text.

When images have hard transitions between colors, it’s called an aliased image. Images with softer transitions are called anti-aliased. If you zoom into a photo, even one that’s in focus and crisp, there are never hard transitions from one pixel to the next. Below, A is aliased and B is anti-aliased. When magnified it looks unusual, but when seen from a distance the anti-aliased image seems straighter and more real.

A B

The easiest way to create an aliased image is to draw it in higher resolution then shrink the image. For example, if the image is twice as large then it can be easily shrunk by half. Each resulting pixel is the average of four pixels. If the image is three times as large then nine pixels are averaged into one. Using this method allows fast aliased drawing algorithms.

The next method is to examine the intersection between a line and a pixel. Lines aren’t one dimensional, they have thickness. An aliased algorithm assumes a line is one pixel wide. Newer image drawing algorithms allow for variable line thickness. Even when lines don’t have thickness, such as when they define a polygon, this method still applies. Consider this image:

Suppose the blue line is the border of a surface and that surface extends down. Any pixel fully covered by the surface is fully colored. Partially filled surfaces are colored based on the percent it is covered. This introduces some error when several lines pass through the same pixel, but that is an ignorable error. The algorithms can make assumptions and approximations to speed calculation, or it could be precise and computationally more expensive. It’s up to the type of image library you want to build. A single line may seem easy, until you add splines and small line segments. Add different line endings, such as curved or straight, and things can get complex.

Suppose the blue line represents the center of a line. The line borders exist to either side of the line. In this case, the line can be drawn as a polygon. Some thin drawing algorithms use a weighted average system, where area in the center of each pixel is more statistically significant. A system like this draws clearer thin lines, but it is rarely implemented.

Computationally expensive anti-aliasing, such as that needed for text, can be pre-calculated. If the user requests a font of a particular size then create small images of each character. You can use a conventional image for each or you can compress them. Each pixel only requires a single byte representing the amount of color to apply. When drawing, if the color isn’t maxed then a bit of the background color has to bleed through. If implemented, the drawing algorithm can implement computational expensive but accurate anti-aliasing to the text then copy it with a computationally inexpensive algorithm.

Anti-aliasing is a simple concept and can be simple to add to an image library. It results in nice output.

Together our conversations can expand solutions and value

We look forward to helping you bring your ideas and solutions to life.
Share the Post:

Leave a Reply

Your email address will not be published. Required fields are marked *