source: www/study/part4.html @ 1976

Last change on this file since 1976 was 1976, checked in by Sam Hocevar, 13 years ago
  • Prepare room for part 5, colour dithering.
File size: 7.3 KB
Line 
1<?php header("Content-Type: text/html; charset=utf-8"); ?>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3       "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
4
5<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
6
7<head>
8   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
9   <meta name="GENERATOR" content="vim" />
10   <meta name="Author" content="sam@zoy.org (Sam Hocevar)" />
11   <meta name="Description" content="Libcaca study" />
12   <meta name="Keywords" content="libcaca, ASCII, ASCII ART, console, text mode, ncurses, slang, AAlib, dithering, thresholding" />
13   <title>Libcaca study</title>
14   <link rel="icon" type="image/x-icon" href="/favicon.ico" />
15   <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
16   <link rel="stylesheet" type="text/css" href="/main.css" />
17</head>
18
19<body>
20
21<?php include($_SERVER["DOCUMENT_ROOT"]."/header.inc"); ?>
22
23<div style="float: left;">
24   <a href="part3.html">Error diffusion &lt;&lt;&lt;</a>
25</div>
26<div style="float: right;">
27   <a href="part5.html">&gt;&gt;&gt; Colour dithering</a>
28</div>
29<div style="text-align: center;">
30   <a href="index.html">^^^ Index</a>
31</div>
32
33<h2> 4. Grayscale dithering </h2>
34
35<p> At first sight, generalising dithering to three gray scales seems pretty
36straightforward: just add gray 0.5 in the middle of the palette and dither
37pixels in the [0, 0.5] range with black and gray, and pixels in the [0.5, 1]
38range with gray and white. Here are two different results with 4×4 Bayer
39ordered dithering and with Floyd-Steinberg error diffusion: </p>
40
41<p style="text-align: center;">
42  <img src="out4-0-1.png" width="256" height="256"
43       class="inline" alt="4×4 Bayer ordered dithering, 3 colours" />
44  <img src="grad4-0-1.png" width="32" height="256"
45       class="inline" alt="4×4 Bayer ordered dithering gradient, 3 colours" />
46  <img src="out4-0-2.png" width="256" height="256"
47       class="inline" alt="Floyd-Steinberg error diffusion, 3 colours" />
48  <img src="grad4-0-2.png" width="32" height="256"
49       class="inline" alt="Floyd-Steinberg error diffusion gradient, 3 colours" />
50</p>
51
52<p> These are pretty much the images that imaging software such as The Gimp
53would give (using “positioned” and “Floyd-Steinberg” dithering modes). </p>
54
55<p> Unfortunately the result is not as good as expected: the white pattern
56on Lenna’s cheeks is visually disturbing, and there is a lot of 0.5 gray in
57the image. Also, the whole image looks darker than with pure black-and-white
58dithering, but these previous dithering results looked a lot brighter than
59the original image anyway. </p>
60
61<p> All these issues have to do with the output media’s <b>gamma</b>. </p>
62
63<h3> 4.1. Introducing gamma </h3>
64
65<p> If you are reading this document on a computer screen, you may have
66noticed that the black and white 50% pattern was closer to a 0.73 grayscale
67(left) than to the intuitively expected 0.5 value (right). If you are reading
68a printed copy, it might be a different matter. </p>
69
70<p style="text-align: center;">
71  <img src="pat4-1-1.png" width="240" height="80"
72       class="inline" alt="introducing gamma" />
73</p>
74
75<p> The mapping linking grayscale steps to intensities is called <b>gamma
76correction</b>. An approximate law for gamma correction is given as
77<i>I = v<small><sup>γ</sup></small></i> where <i>v</i> is the coded colour
78value (between 0 and 1), <i>I</i> is the perceived colour intensity (between
790% and 100%) and <i>γ</i> is the gamma. A pattern made of even-numbered
800%-intensity pixels and 100%-intensity pixels has an intensity of 50% by
81definition. But the corresponding grayscale</p>
82
83<p> Most modern computer systems use the sRGB gamma model close to the law
84with <i>γ = 2.2</i>. As can be seen, it is highly non-linear: </p>
85
86<p style="text-align: center;">
87  <img src="fig4-1-1.png" width="460" height="256" alt="introducing gamma" />
88</p>
89
90<p> Éric Brasseur wrote <a href="http://www.4p8.com/eric.brasseur/gamma.html">a
91pretty comprehensive essay</a> about why on a computer screen a 50% black and
92white pattern should be scaled down to a gray value of 0.73 instead of 0.5 and
93how major computer graphics software totally misses the point. Conversely, it
94clearly means that a gray value of 0.5 should not be emulated with a 50%
95dither pattern. </p>
96
97<p> The following figure shows the gamma curve for the naïve three-colour
98grayscale gradient we saw above (red curve) compared to the two-colour
99gradient (blue curve). Two major observations can be made: the new curve is
100far closer to a perfect, linear gradient, but there is a singularity in the
101middle of the curve, meaning a break in the gradient’s smoothness. </p>
102
103<p style="text-align: center;">
104  <img src="fig4-1-2.png" width="460" height="256" alt="3-colour gamma" />
105</p>
106
107<p> There are three possible ways to reduce the singularity and make the
108gradient smoother and/or closer to the original colours: </p>
109
110<ul>
111  <li> Choose a different middle gray value, for instance choosing gray 0.73
112       will cancel the singularity and match the two-colour gradients we have
113       been using so far. This is not always possible if the output palette
114       is fixed. </li>
115  <li> Don’t place the gray value at the middle of the gradient, for instance
116       a value of around 25% intensity will again match the previous two-colour
117       gradients. </li>
118  <li> <b>Gamma-correct</b> input pixels before assigning them an output
119       value. This ensures that the resulting gradient is perfectly linear
120       and has no singularity.
121       </li>
122</ul>
123
124<h3> 4.2. Gamma correction </h3>
125
126<p> Gamma correction consists in converting pixel values into intensity values
127before performing operations on them, then reconverting them to pixel values
128before displaying them. The exact same algorithms can be used, they just
129operate on slightly different data. </p>
130
131<p style="text-align: center;">
132  <img src="fig4-1-3.png" width="460" height="256" alt="3-colour gamma coorection" />
133</p>
134
135<p> Here are the results of gamma-correcting input pixels before doing
136any computation on them, then using Floyd-Steinberg error diffusion: </p>
137
138<p style="text-align: center;">
139  <img src="out4-2-1.png" width="256" height="256"
140       class="inline" alt="Floyd-Steinberg, 2 colours, gamma-corrected" />
141  <img src="grad4-2-1.png" width="32" height="256"
142       class="inline" alt="Floyd-Steinberg, 2 colours, gamma-corrected gradient" />
143  <img src="out4-2-2.png" width="256" height="256"
144       class="inline" alt="Floyd-Steinberg, 3 colours, gamma-corrected" />
145  <img src="grad4-2-2.png" width="32" height="256"
146       class="inline" alt="Floyd-Steinberg, 3 colours, gamma-corrected gradient" />
147</p>
148
149<p> Two-colour dithering is not visually satisfying: dark areas lack much
150detail because the gamma curve is very flat at low intensities. However,
151the result itself is far more accurate that previously. The problem, while
152still visible, is even less important with three-colour dithering: the image
153on the right is superior to what The Gimp or Adobe Photoshop are able to
154come up with. </p>
155
156<div style="float: left;">
157   <a href="part3.html">Error diffusion &lt;&lt;&lt;</a>
158</div>
159<div style="float: right;">
160   <a href="part5.html">&gt;&gt;&gt; Colour dithering</a>
161</div>
162<div style="text-align: center;">
163   <a href="index.html">^^^ Index</a>
164</div>
165
166<?php $rev = '$Id$';
167      include($_SERVER['DOCUMENT_ROOT'].'/footer.inc'); ?>
168
169</body>
170</html>
Note: See TracBrowser for help on using the repository browser.