source: www/study/part1.html @ 1956

Last change on this file since 1956 was 1956, checked in by Sam Hocevar, 14 years ago
  • Split document into an index page and four sections.
File size: 4.2 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: right;">
24   <a href="part2.html">&gt;&gt;&gt; Halftoning patterns</a>
25</div>
26<div style="text-align: center;">
27   <a href="index.html">^^^ Index</a>
28</div>
29
30<h2> 1. Colour quantisation </h2>
31
32<p> Colour quantisation is a very old and common computer graphics problem.
33Many methods exist to do the task, and their efficiency depends on several
34parameters: </p>
35
36<ul>
37  <li> the input image: is it a photograph? a vector drawing? a composition
38       of both? </li>
39  <li> the target media: is it a computer screen? if so, what are the size
40       and the position of the pixels? is it a printed document? if so,
41       what kind of paper?  what kind of ink? or maybe the conversion should
42       be optimised for both targets? </li>
43  <li> the quality requirements: for instance, can contrast be raised for
44       a more appealing result at the expense of accuracy?
45  <li> the allowed computation time: do we need 50fps or can we afford to
46       wait 10 seconds for a better result? </li>
47</ul>
48
49<h3> 1.1. Black and white thresholding </h3>
50
51<p> Since a grayscale pixel has a value between 0 and 1, a fast method
52to convert the image to black and white is to set all pixels below 0.5
53to black and all pixels above 0.5 to white. This method is called
54<b>thresholding</b> and, in our case, results in the following image: </p>
55
56<p style="text-align: center;">
57  <img src="out1-1-1.png" width="256" height="256"
58       class="inline" alt="50% threshold" />
59  <img src="grad1-1-1.png" width="32" height="256"
60       class="inline" alt="50% threshold gradient" />
61</p>
62
63<p> Not that bad, but we were pretty lucky: the original image’s brightness
64was rather well balanced. A lot of detail is lost, though. Different results
65can be obtained by choosing “threshold values” other than 0.5, for instance
660.4 or 0.6, resulting in a much brighter or darker image: </p>
67
68<p style="text-align: center;">
69  <img src="out1-1-2.png" width="256" height="256"
70       class="inline" alt="40% threshold" />
71  <img src="grad1-1-2.png" width="32" height="256"
72       class="inline" alt="40% threshold gradient" />
73  <img src="out1-1-3.png" width="256" height="256"
74       class="inline" alt="60% threshold" />
75  <img src="grad1-1-3.png" width="32" height="256"
76       class="inline" alt="60% threshold gradient" />
77</p>
78
79<p> Choosing the best thresholding value for a given image is called
80<b>average dithering</b>. But even with the best value, the results will
81not improve tremendously. </p>
82
83<h3> 1.2. Grayscale thresholding </h3>
84
85<p> Better results can be achieved with a slightly bigger palette. Here is
86thresholding applied to a 3-colour and to a 5-colour palette: </p>
87
88<p style="text-align: center;">
89  <img src="out1-2-1.png" width="256" height="256"
90       class="inline" alt="3-colour threshold" />
91  <img src="grad1-2-1.png" width="32" height="256"
92       class="inline" alt="3-colour threshold gradient" />
93  <img src="out1-2-2.png" width="256" height="256"
94       class="inline" alt="4-colour threshold" />
95  <img src="grad1-2-2.png" width="32" height="256"
96       class="inline" alt="4-colour threshold gradient" />
97</p>
98
99<div style="float: right;">
100   <a href="part2.html">&gt;&gt;&gt; Halftoning patterns</a>
101</div>
102<div style="text-align: center;">
103   <a href="index.html">^^^ Index</a>
104</div>
105
106<?php $rev = '$Id$';
107      include($_SERVER['DOCUMENT_ROOT'].'/footer.inc'); ?>
108
109</body>
110</html>
Note: See TracBrowser for help on using the repository browser.