color

I finished my last post on sorting colors using PHP looking at incorporating all three dimensions into the display of the colors. This lead to some interesting displays of colors in discs using different shapes or lengths as an indication of the color in question. It was still lacking actually rendering out the third dimension in any meaingful way though.

As I am essentially looking at three dimensional data I thought about displaying the data as a cube in a 3D engine. I could then map the three dimensions of colors (red, green, blue) into the three dimensions of the 3D engine (x, y, z). This means creating a 3D scene with random color data and rendering that scene out. Funnily enough, there aren't a lot of people writing 3D rendering engines in PHP so I looked into writing a very basic version that would just show point data.

Since my last visit to this subject I have been thinking about how to represent a collection of random colors so that it looks sorted and that no information is lost during that process. I quickly realised that I needed to use all three aspects of the color space, which lends itself to generating 3D objects. Indeed, the red, green, blue color space is built around a cube so it can often be represented as a cube.

The hue, saturation, and value color space is built around the concept of a cylinder, which means that 2 of the axis lend themselves to a circumference of a circle (the hue) and the diameter of a circle (the saturation). This is an example of the polar coordinate system. We can therefore draw a circle using hue and saturation and the value can be used to represent a different aspect of the color space.

Following on from by previous post about sorting colors I decided to take another step towards sorting colors by segmenting the data to create a further dimension to the multi-dimensional array.

The array is already split into segments based on the hue of the color, but we can further split this by separating out saturation and value into separate arrays within hue. To do this we set the saturation or value to be a constant and push them into separate arrays.

The new code looks like this. Please excuse the duplication of code here. This is just a simple example to show how the array is put together.

The last time I looked at sorting colors I had produced a nice band or sorted colors, but to do so I had essentially removed a third of the data from the color information. This meant that there was no white or black colors in the band of sorted colors.

After a bit of thinking on how to solve this I hit upon a way of using a two dimensional array of colors to filter the colors into blocks. This would allow the missing color information to be rendered correctly, and would only mean a small amount of work to allow it to work with the rendering function used in the previous examples.

Generating The Data

I could easily just generate every color available and use that as the data. What I wanted to generate was a random assortment of colors that would represent the sort of data being produced by a system or other input.

Following on from my last post about sorting colors I have been thinking about different ways of sorting colors. I have been looking at interfaces that allow people to select colors and they will quite normally have a band of colors that does look nicely sorted. As it turns out this is perfectly possible to do if the colors are normalised to remove light and dark variations of different colors.

The easiest way to remove different amounts of lightness and darkness from a color is to convert it to the HSV color space. This way we can just set the value (brightness) and saturation (amount of grey) to be 1. This will change the color by simply removing any information that does not pertain to the actual color. For example, a color that is a very light shade of blue will be changed to be simply blue.

Sorting colors is the sort of thing that you never really think about until you need to do it. Sorting a bunch of items by their color is useful in a number of applications, but the simplest is just to display items to the user in a more controlled manner. As it happens sorting with colors is a much more complex topic than I originally thought and required digging into quite a bit more maths than I expected.

Incidentally, there is a whole world of color maths that I didn't know existed until I started looking into this. It was worth learning about though.

Setting Up

To start with, I created a little Color class so that I could have a standard way of storing a color. This just takes the red, green and blue values for a color and allows a simple way of accessing those values.

Use the following snippet to convert any jpeg image into the equivalent image in ASCII format. It works by loading an image using the PHP GD2 library function ImageCreateFromJpeg() and then figures out the height and width of it. It then uses these values to loop through every pixel in the image and figures out the colour of that pixel. It uses this value to create a "span" element that uses the text colour of a # to change the colour of the text.

An additional time (and space) saver for this function is that it detects any pixels that are just off white and simply displays a   character instead.

Here is a short bit of code to generate a random hexadecimal colour using PHP. Essentially you just create a random number between 0 (000000) and 10,000,000 (ffffff) and turn this into a hexadecimal number using the PHP function dechex.

$colour = rand(0, 10000000);
$colour = dechex($colour);

This can also be accomplished on a single line.

$colour = dechex(rand(0, 10000000));

The following function will reduce a hexadecimal colour string by a set value. It can take three and six digit colour values.

function ColorDarken($color, $dif=20)
{
 $color = str_replace('#','', $color);
 $rgb = '';
 if (strlen($color) != 6) {
  // reduce the default amount a little
  $dif = ($dif==20)?$dif/10:$dif;
  for ($x = 0; $x < 3; $x++) {
   $c = hexdec(substr($color,(1*$x),1)) - $dif;
   $c = ($c < 0) ? 0 : dechex($c);
   $rgb .= $c;
  }
 } else {
  for ($x = 0; $x < 3; $x++) {
   $c = hexdec(substr($color, (2*$x),2)) - $dif;
   $c = ($c < 0) ? 0 : dechex($c);
   $rgb .= (strlen($c) < 2) ? '0'.$c : $c;
  }
 }
 return '#'.$rgb;
}

Here are some examples of use.

echo ColorDarken('#123456'); // #002042
echo ColorDarken('#666'); // #444
echo ColorDarken('#ffffff'); // #ebebeb
echo ColorDarken('#ffffff',1); // #eeeeee