source: www/study/part4.html @ 2034

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