source: www/study/part4.html @ 1956

Revision 1956, 5.6 KB checked in by sam, 6 years ago (diff)
  • Split document into an index page and four sections.
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=""></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> Generalising dithering to more than two colours is straightforward in the
36grayscale palette. Here are the results with 4×4 Bayer ordered dithering and
37with Floyd-Steinberg error diffusion: </p>
38
39<p style="text-align: center;">
40  <img src="out4-0-1.png" width="256" height="256"
41       class="inline" alt="4×4 Bayer ordered dithering, 3 colours" />
42  <img src="grad4-0-1.png" width="32" height="256"
43       class="inline" alt="4×4 Bayer ordered dithering gradient, 3 colours" />
44  <img src="out4-0-2.png" width="256" height="256"
45       class="inline" alt="Floyd-Steinberg error diffusion, 3 colours" />
46  <img src="grad4-0-2.png" width="32" height="256"
47       class="inline" alt="Floyd-Steinberg error diffusion gradient, 3 colours" />
48</p>
49
50<p> Unfortunately the result is not as good as expected. The white pattern
51on Lenna’s cheeks is visually disturbing, and the whole image looks darker
52than with pure black-and-white dithering. But then, the previous dithering
53results looked a lot brighter than the original image. This is due to the
54output media’s <b>gamma</b>. </p>
55
56<h3> 4.1. Introducing gamma </h3>
57
58<p> If you are reading this document on a computer screen, you may have
59noticed that the black and white 50% pattern was closer to a 0.73 grayscale
60(left) than to the intuitively expected 0.5 value (right). If you are reading
61a printed copy, it might be a different matter. </p>
62
63<p style="text-align: center;">
64  <img src="pat4-1-1.png" width="240" height="80"
65       class="inline" alt="introducing gamma" />
66</p>
67
68<p> The mapping linking grayscale steps to intensities is called <b>gamma
69correction</b>. An approximate law for gamma correction is given as
70<i>I = v<small><sup>γ</sup></small></i> where <i>v</i> is the coded colour
71value (between 0 and 1), <i>I</i> is the perceived colour intensity (between
720 and 1) and <i>γ</i> is the gamma. Most modern computer systems use the
73sRGB gamma model close to the law with <i>γ = 2.2</i>. As can be seen, it is
74highly non-linear: </p>
75
76<p style="text-align: center;">
77  <img src="fig4-1-1.png" width="300" height="240" alt="introducing gamma" />
78</p>
79
80<p> Éric Brasseur wrote <a href="http://www.4p8.com/eric.brasseur/gamma.html">a
81pretty comprehensive essay</a> about why on a computer screen a 50% black and
82white pattern should be scaled down to a gray value of 0.73 instead of 0.5 and
83how major computer graphics software totally misses the point. </p>
84
85<p> Conversely, it clearly means that a gray value of 0.5 should not be
86emulated with a 50% dither pattern. </p>
87
88<!--
89<p> So, instead of using 25%, 50% and 75% patterns (which give non-uniform
90gray values of 0.53, 0.73 and 0.88), one should rather use 6.25%, 25% and 50%
91patterns, which give the better spread gray values of 0.28, 0.53 and 0.73
92and result in far more accurate gradients. This is especially obvious when
93observing the high intensity drop between the 25% pattern and black (top row):
94</p>
95
96<p style="text-align: center;">
97  <img src="pat005.png" width="400" height="240"
98       class="inline" alt="better gradients" />
99</p>
100
101<p> Here is the result on Lenna. As you can see, the result is visually less
102appealing than with the “incorrect” colours. But when seen from a distance,
103there is no doubt this version is more accurate: </p>
104
105<p style="text-align: center;">
106  <img src="out007.png" width="256" height="256"
107       class="inline" alt="gamma-aware 3-pattern halftoning" />
108  <img src="grad007.png" width="32" height="256"
109       class="inline" alt="gamma-aware 3-pattern halftoning gradient" />
110</p>
111-->
112
113<!--
114<h3> Gamma with more gray levels </h3>
115
116<p> As seen previously, the smoothest dithering pattern that can be created
117with black and white is by uniformly alterning the two colours. However, the
118resulting colour (0.73) it is not evenly situated on the gray scale. </p>
119
120  <img src="out008.png" width="256" height="256"
121       class="inline" alt="gamma-aware 6.25%, 25% and 50% halftoning" />
122
123<p> Here is the application to Lenna, using the 0-0.2, 0.2-0.4, 0.4-0.6,
1240.6-0.8 and 0.8-1 ranges for black, white and the three patterns: </p>
125
126<p style="text-align: center;">
127  <img src="out005.png" width="256" height="256"
128       class="inline" alt="20/40/60/80% threshold and 25/50/75% halftones" />
129</p>
130-->
131
132<div style="float: left;">
133   <a href="part3.html">Error diffusion &lt;&lt;&lt;</a>
134</div>
135<!--<div style="float: right;">
136   <a href=""></a>
137</div>-->
138<div style="text-align: center;">
139   <a href="index.html">^^^ Index</a>
140</div>
141
142<?php $rev = '$Id$';
143      include($_SERVER['DOCUMENT_ROOT'].'/footer.inc'); ?>
144
145</body>
146</html>
Note: See TracBrowser for help on using the repository browser.