[Gimp-developer] Single-pixel width outlines with anti-aliasing

[yahvuu <yahvuu gmail com>]

[HTML version of this posting: http://yahvuu.wordpress.com/2012/10/16/single-pixel-width-outlines-with-anti-aliasing/ ]


Hi,

here's how good old XOR drawing can be anti-aliased in order to better meet today's
aesthetic standards. In GIMP terms:

  Duplicate the layer, invert it and simply perform the outline drawing on the layer mask.

Examples (created with a slightly more elaborate scheme, see below):
http://yahvuu.files.wordpress.com/2012/10/sharp-antialias-overlay1.png
http://yahvuu.files.wordpress.com/2012/10/sharp-antialias-overlay2.png


What's wrong with the current 3-line outline style?

Ideally, outlines should be much thinner than the desired resolution of the
adjustment. Note how the tick marks of a ruler are much thinner in dimension
than the resolution of the ruler. Roughly 1/10 of a millimeter thin marks for
a ruler with 1mm resolution.

Now one could rely on the trend towards higher screen DPIs which will gracefully
let the 3-line outline appear accurate enough in near future. Fair enough -- but
then a new problem will show up: when the three lines can no longer be visually
distinguished, they will appear as an overlay of a single gray line. Which in turn
does not provide enough contrast in all situations.

You may simulate the effect of high DPIs by stepping back while looking at the
following test image. One of the vertical outlines will blend into the background
(which one, depends on your monitor gamma):
http://yahvuu.files.wordpress.com/2012/10/fatlines-fading.png


Which color should the single-pixel outline have?

The ideal outline contrasts both the surrounding pixels and the underlying
pixels in any situation. But which color gives the best contrast?
The W3C recommendations for contrast between text and its background [1]
seem close enough here -- what is good for reading performance can only be
good for outline recognition.

It turns out that pure black and white pixels yield the highest contrast ratios.
Brightness contrast beats color contrast. Which nicely matches the GUI attitude
to let the colorful pixels to the user, not to the application.

In summary, this gives the following steps:
    1) Calculate luminance of underlying pixels
    2) Threshold to black and white
    3) Invert
    4) Mask by desired outline

(Regrettably, contrast to surrounding pixels is not taken into account here)


What's wrong with these black'n'white outlines?

The harsh contrast edges can be distracting. This problem apppears most
prominently when moving an outline, in particular over smooth image regions
which are just about as bright as the threshold. You may try this Flash demo
https://sites.google.com/site/yahvuu/stuff/antialiasoverlay.swf?attredirects=0

or try moving the layer mask of the upper layer of the following XCF:
https://sites.google.com/site/yahvuu/stuff/outline-tester.xcf.zip?attredirects=0&d=1


Still way to go, but it's a start...
-yahvuu


[1] http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html, see also
    http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/G18
    http://snook.ca/technical/colour_contrast/colour.html