Difference between revisions of "Anti-aliasing"

From iGeek
Jump to: navigation, search
(Created page with "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. <noinclu...")
(No difference)

Revision as of 10:22, 14 June 2019

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.

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 pictureelements)-- 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".

How Anti-Aliasing Works

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).

(1) A "blur" effect would normally blur the entire line (on all sides), but anti-aliasing only blurs the line where it transitions from one pixel row to the next.


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.

  • 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 -- some work with only 1 extra stage, others with many. Notice there are 2 stages -- steps, from black to white).
  • C) Adjusted-Complex Anti-Aliased Line. Since we are adding gray (darkness) to the image (and more stages), this more complex sample also tries to lighten the original a bit (in some spots). Notice how line-B looks like a thicker line than line-A. Unfortunately the correction isn't very visible on some monitors (and computers). This correction sacrifices contrast for better coloring.

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.[ ]

Written 2002.04.01