Anti Aliasing

Anti aliasing is a technique that makes shapes drawn by a computer look better. A computer monitor -- or indeed a TV -- displays images as a grid of points.

If you draw a white line on a black background then you'd think that each point would be either black, or white. Indeed, this is often the way things work. But when you draw a diagonal line this way it forms "staircases" -- points stick out (or tuck in), ruining the illusion of a straight line.

The solution is to use shades of gray. Instead of coloring each point either black or white the computer, internally, draws the line of a grid that is finer than the monitor's display. It then colors the pixel on the monitor with a brightness that depends on the number of points, on the finer grid, that were black or white.

It turns out that it can help to include points, from the fine grid, that you'd think would be associated with adjacent pixels. That is, the radius of the sampling is greater than a single pixel. In the interactive demo, below, you can play with both the radius, and the number of points to sample (i.e. how much finer the fine grid is than the pixel grid) to see how this effects the brightness of individual pixels.

Finally, you can play with the function that is used to draw the image. The default is "x*x + y*y < 100" which is the equation of a circle. You might also try "y<3 * x" which draws a straight edge, or "y < 5 * x && y > 5 * x - 4" to draw narrow line.


Loading animation: if the static image doesn't go away almost immediately then you're probably using an ancient browser such as Internet Explorer, on which it doesn't work.

static screenshot for ancient browsers

X-axis:
Y-axis:

Sampling:
Average Value: {{(100 * value(highlight)).toPrecision(3)}}%

This page was my first experiment with AngularJS, a technology for better integrating html and javascript in a page.
Created June 2012 by Dave Whipp
(index) (home)
Comments