Anti-aliasing

From iGeek
Jump to: navigation, search
WhatsAntiAliasing.jpeg
WhatsAntiAliasing.jpeg
Anti-aliasing is a technique in computers for sacrificing clarity/contrast to give the illusion of better screen resolution.

What is Anti-Aliasing? It is using color to increase the percieved resolution on a display. It can't really alter resolution, but it can appear to do it, to the eye.


Anti-aliasing is a technique for removing the dreaded jaggies, that ugly stair step effect we get when we try to draw an arc or a line (with either a very low or very high slope on a low resolution screen). A jaggie is created when the screen does not have enough resolution to display a line smoothly, so there is a jagged "star-step". This happens with older or low resolution displays. At about 75-100 DPI or PPP (Dots per inch or Pixels per inch: which is a measure of resolution), the eye can see each pixel discretely. At about 200-300 dpi, each pixel is too small to see, and so you don't need it.

Basically, Anti-Aliasing is a way to use color information to make up for a lack of screen resolution. What the Anti-Aliasing algorithms do is to simulate higher resolution by using color information to trick our eye into seeing a smoother line or edge than the screen can physically allow.

How Anti-Aliasing Works

Aa1.jpg

Compare the two following images. Regular drawing and text (top) compared to Anti-Aliased versions (bottom). Notice that in the top image, there is a stair-step effect on the lines and the circles. The bottom image is a little "blurrier", but the images look smoother. (These images may also look darker-- this is an artifact of this particular algorithm and problems with conversion for the web, that are too numerous to go into right now. Most anti-aliasing algorithms do darken the image a little, just not this much).

The computer creates a line by drawing pixels (square dots -- short for picture elements)-- for each few pixels we draw to the side, we must move down one pixel -- this causing a step. The poorer the resolution of the screen the more likely it is that there will be a noticeable step. This step (or jaggie) is an "alias" or artifact -- which we smooth out by "anti-aliasing".

Lets look at it a little closer. Look at all the stages of anti-aliasing, and blur your eyes a little or look at the lines from a distance, to get the idea of what happens. The more anti-aliasing we add to an image, the more the image gets "blurrier", however, the line also looks slightly smoother.

Anti-aliasing strategically blurs[1] the line (adding color information), to make the line look "smoother" (less jaggie).

We are using the gray colors to create false resolution and soften the jaggies. Even though there is no 1/2 pixel between one row of pixels and the row below it, by using a color in between the two high contrasting pixels we can fool the eye into creating one and smoothing the line. The brainsees the fuzzy detail and fills in the missing information for us.

Aa2.jpg
  • A) Standard Line. This is a low angle line showing the traditional jaggies. Notice how the stair-step is very visible, in both the enlarged and normal size lines.
  • B) Simple Anti-Aliased Line. By adding color information (gray) next to the line (at the transition points), we smooth and blur the line. The image looks slightly softer without becoming too blurry. (This particular sample has 2 stages of gray from black to white -- some work with only 1 extra stage, others with many more, but the technique is the same).
  • C) Adjusted-Complex Anti-Aliased Line. Notice how line-B looks like a thicker line than line-A? Since we added gray to the image it made the line look darker/thicker. This more complex sample also tries to lighten the original a bit: it removes some of the black from the original line to balance it out. This correction sacrifices contrast for better coloring / perceived thickness.

Conclusion

Hopefully you can see how Anti-Aliasing can "smooth" out a jaggie line or arc, and give a picture (or text) a better look. You can apply anti-aliasing to colors as well as black and white -- I just used black-white and gray because of the contrast and clarity. But hopefully this gives you an understanding of the term.

GeekPirate.small.png

📚 References
  1. ↑ Blur: technically, a "blur" effect would normally blur the entire line (on all sides). Anti-aliasing only blurs the line where it transitions from one pixel row to the next. So it's a special kind of selective blurring that tricks the eye into seeing what it wants to: a smoother line.

Written 2002.04.01