cacalabs
/
web


			
				
					
						
						
							
							<?php header("Content-Type: text/html; charset=utf-8"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="GENERATOR" content="vim" />
   <meta name="Author" content="sam@zoy.org (Sam Hocevar)" />
   <meta name="Description" content="Libcaca study - 6. Colour dithering" />
   <meta name="Keywords" content="libcaca, ASCII, ASCII ART, console, text mode, ncurses, slang, AAlib, dithering, thresholding" />
   <title>Libcaca study - 6. Colour dithering</title>
   <link rel="icon" type="image/x-icon" href="/favicon.ico" />
   <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
   <link rel="stylesheet" type="text/css" href="/main.css" />
</head>

<body>

<?php include($_SERVER["DOCUMENT_ROOT"]."/header.inc"); ?>

<p> <span style="color: #aa0000; font-weight: bold;">Warning</span>: this
document is still work in progress. Feel free to send comments but do not
consider it final material. </p>

<div style="float: left;">
   <a href="part5.html">Greyscale dithering &lt;&lt;&lt;</a>
</div>
<div style="float: right;">
   <a href="part7.html">&gt;&gt;&gt; Photographic mosaics</a>
</div>
<div style="text-align: center;">
   <a href="index.html">^^^ Index</a>
</div>

<h2> 6. Colour dithering </h2>

<p> Dithering colour images means dithering three-dimensional elements (RGB
pixels) instead of one-dimensional grey values. It is very complex and
depends on the output media even more than greyscale dithering. </p>

<h3> 6.1. Separate-space dithering </h3>

<p> In some cases it is possible to perform three one-dimensional dithering
operations instead of one three-dimensional one. Consider for instance the
following palette:
</p>

<p style="text-align: center;">
  <img src="out/pat6-1-1.png" width="512" height="64"
       class="inline" alt="8-colour RGB palette" />
</p>

<p> It is made of the eight possible red/green/blue combinations made of 0
and 1 values: </p>

<div style="text-align: center;">
  <table style="margin: auto;">
    <tr>
      <td><b>Red</b></td>
      <td>0</td> <td>0</td> <td>1</td> <td>1</td>
      <td>0</td> <td>0</td> <td>1</td> <td>1</td>
    </tr> <tr>
      <td><b>Green</b></td>
      <td>0</td> <td>0</td> <td>0</td> <td>0</td>
      <td>1</td> <td>1</td> <td>1</td> <td>1</td>
    </tr> <tr>
      <td><b>Blue</b></td>
      <td>0</td> <td>1</td> <td>0</td> <td>1</td>
      <td>0</td> <td>1</td> <td>0</td> <td>1</td>
    </tr>
  </table>
</div>

<p> One way of dithering an image using this palette is to convert the image
into three greyscale images (separating the red, green and blue channels),
dither each subimage to two colours separately and recombine the images into
three channels. For instance, if at a given pixel the red channel is dithered
to 1 and the green and blue channels are dithered to 0, the final pixel will
be [1  0  0] which is the colour red. </p>

<p> Separate-space dithering works by splitting the image into three red,
green and blue channels. Each of this channel is treated as a greyscale image
that is then dithered to black and white using any dithering method seen
previously. The resulting images are then treated again as three red, green
and blue channels and recombined into the final image: </p>

<p style="text-align: center;">
  <img src="fig6-1-7.png" width="704" height="560"
       class="matrix" alt="separate-space dithering" />
</p>

<p> Here are the results with serpentine Floyd-Steinberg dithering applied to
each channel. On the left, no colour correction, as The Gimp or Photoshop would
do; on the right, gamma-corrected dithering: </p>

<p style="text-align: center;">
  <img src="out/lena6-1-1.png" width="256" height="256"
       class="inline" alt="serpentine FS, 8 colours" />
  <img src="out/grad6-1-1.png" width="64" height="256"
       class="inline" alt="serpentine FS, 8 colours gradient" />
  <img src="out/lena6-1-2.png" width="256" height="256"
       class="inline" alt="serpentine FS, 8 colours, gamma-corrected" />
  <img src="out/grad6-1-2.png" width="64" height="256"
       class="inline" alt="serpentine FS, 8 colours, gamma-corrected gradient" />
</p>

<h3> 6.2. Accounting for other dimensions </h3>

<p> The previous palette was suitable for separate-space dithering. Such a
palette is called <b>separable</b> or <b>orthogonal</b>. </p>

<p> Here is a palette that cannot be used in the same way: </p>

<p style="text-align: center;">
  <img src="out/pat6-2-2.png" width="512" height="128"
       class="inline" alt="8-colour RGB palette" />
</p>

<p> As can be seen, it does not have the [0.5 0.5 0.5] grey colour, or the
[1 0.5 0] orange colour, for instance, despite having other combinations of
0, 0.5 and 1 values: </p>

<div style="text-align: center;">
  <table style="margin: auto; border: 1px;">
    <tr>
      <td><b>Red</b></td>
      <td>0</td> <td>0</td> <td>0.5</td> <td>0.5</td>
      <td>0</td> <td>0</td> <td>0.5</td> <td>0.7</td>
      <td>0.3</td> <td>0</td> <td>1</td> <td>1</td>
      <td>0</td> <td>0</td> <td>1</td> <td>1</td>
    </tr> <tr>
      <td><b>Green</b></td>
      <td>0</td> <td>0</td> <td>0</td> <td>0</td>
      <td>0.5</td> <td>0.5</td> <td>0.5</td> <td>0.7</td>
      <td>0.3</td> <td>0</td> <td>0</td> <td>0</td>
      <td>1</td> <td>1</td> <td>1</td> <td>1</td>
    </tr> <tr>
      <td><b>Blue</b></td>
      <td>0</td> <td>0.5</td> <td>0</td> <td>0.5</td>
      <td>0</td> <td>0.5</td> <td>0</td> <td>0.7</td>
      <td>0.3</td> <td>1</td> <td>0</td> <td>1</td>
      <td>0</td> <td>1</td> <td>0</td> <td>1</td>
    </tr>
  </table>
</div>

<p> It is no longer possible to compute the closest colour in each colourspace
and combine them into an RGB colour, since that colour might not be available
in the palette. So we need to determine what the “closest colour” means when
dealing with the whole colour spectrum. </p>

<p> The following examples show gamma-corrected Floyd-Steinberg using the
above 16-colour palette and two different definitions of distance: the <b>sum
of absolute differences</b> and the <b>euclidian distance</b>. The sum of
absolute differences performs pretty poorly because it does not penalise wide
disparities: </p>

<p style="text-align: center;">
  <img src="out/lena6-2-1.png" width="256" height="256"
       class="inline" alt="Floyd-Steinberg, sum of absolute differences" />
  <img src="out/grad6-2-1.png" width="64" height="256"
       class="inline" alt="Floyd-Steinberg, sum of absolute differences gradient" />
  <img src="out/lena6-2-2.png" width="256" height="256"
       class="inline" alt="Floyd-Steinberg, euclidian distance" />
  <img src="out/grad6-2-2.png" width="64" height="256"
       class="inline" alt="Floyd-Steinberg, euclidian distance gradient" />
</p>

<p> Distances can be computed in another space. For instance, the <b>HSV
space</b> allows to give colour variations a smaller influence than brightness
variations simply by changing the HSV cone’s height. On the left is spatial
Floyd-Steinberg using the euclidian distance in an HSV cone of height 1 and
base radius 1. On the right is the same distance within a cone of height 3 and
base radius 1: </p>

<p style="text-align: center;">
  <img src="out/lena6-2-3.png" width="256" height="256"
       class="inline" alt="Floyd-Steinberg, 1×1 HSV cone" />
  <img src="out/grad6-2-3.png" width="64" height="256"
       class="inline" alt="Floyd-Steinberg, 1×1 HSV cone gradient" />
  <img src="out/lena6-2-4.png" width="256" height="256"
       class="inline" alt="Floyd-Steinberg, 3×1 HSV cone" />
  <img src="out/grad6-2-4.png" width="64" height="256"
       class="inline" alt="Floyd-Steinberg, 3×1 HSV cone gradient" />
</p>

<h3> 6.3. Reducing visual artifacts </h3>

<p> The following patterns show four ways to dither the same colour using
our 8-colour palette: </p>

<ul>
  <li> 1/2 black, 3/8 blue, 1/8 white </li>
  <li> 1/2 blue, 3/8 black, 1/8 yellow </li>
  <li> 3/8 black, 3/8 blue, 1/8 red, 1/8 cyan </li>
  <li> 1/2 blue, 1/4 black, 1/8 red, 1/8 green </li>
</ul>

<p> All patterns visually blend to the same shade, but the last one is
the most visually appealing: </p>

<p style="text-align: center;">
  <img src="out/pat6-2-1.png" width="320" height="160"
       class="inline" alt="3 ways to dither the same colour" />
</p>

<p> Shaked, Arad, Fitzhugh and Sobel introduce the <b>minimum brightness
variation criterion</b> (MBVC), stating that in order to reduce halftone noise,
the halftone set which should be used to render the desired colour should be
the one whose brightness variation is minimal [25]. Similarly, Klassen <i>et
al.</i> suggest the selection of low-contrast colour combiation wherever
possible [24]. </p>

<h3> 6.4. Colour sub-block error diffusion </h3>

<p> Adapting sub-block error diffusion to colour images is almost
straightforward. The major problem is proper weighting in the block-choosing
step. It is a crucial part of the algorithm, and we have yet to find an
efficient method to perform it. </p>

<p> The images below shows the result using our now well-known “lines” tile
list, using respectively the 8-colour palette and the 16-colour palette: </p>

<p style="text-align: center;">
  <img src="out/lena6-4-1.png" width="256" height="256"
       class="inline" alt="8-colour sub-block error diffusion" />
  <img src="out/grad6-4-1.png" width="64" height="256"
       class="inline" alt="8-colour sub-block error diffusion gradient" />
  <img src="out/lena6-4-2.png" width="256" height="256"
       class="inline" alt="16-colour sub-block error diffusion" />
  <img src="out/grad6-4-2.png" width="64" height="256"
       class="inline" alt="16-colour sub-block error diffusion gradient" />
</p>

<p> Speed is starting to become a problematic issue. A 16-colour palette can
generate 65,536 unique 2×2 blocks. Exhaustive search to determine the best
tile is no longer realistic, and we need to find better ways to find the
best matching block. </p>

<div style="float: left;">
   <a href="part5.html">Greyscale dithering &lt;&lt;&lt;</a>
</div>
<div style="float: right;">
   <a href="part7.html">&gt;&gt;&gt; Photographic mosaics</a>
</div>
<div style="text-align: center;">
   <a href="index.html">^^^ Index</a>
</div>

<?php $rev = '$Id$';
      include($_SERVER['DOCUMENT_ROOT'].'/footer.inc'); ?>

</body>
</html>