colour

Have you ever noticed the slightly green colouration in the movie The Matrix? The movies are full of different colour pallets, but when inside The Matrix everything gets a slight green colouration.

This is colour pallet is created as a post processing step, using a colour grading algorithm. The original colours of the film are passed through a filter to tweak the colours slightly for the scenes inside the simulation.

In this article we will look at how we can convert a pixel so that it has the green colour grading found in the matrix, and how to use the system on images in PHP.

A common web design pattern is to incorporate an image into the design of the page. This creates a tighter integration with the image and the rest of the page.

The main issue in designing a page around the image is that the colours of the page must match the image. Otherwise this creates a dissonance between the image and the styles of the site.

In this article I will look at extracting a colour palette from an image so that it can be used in the design of a web page.

If you've ever looked at the settings in a digital camera, or have experience with image processing programs like GIMP, then you may have seen a colour histogram. This is a simple graph that shows the amount of different shades of colour are present in the image.

They are created by looking at the number of colours in a given image and them mapping their red, green and blue values against a the frequency of their occurrence in the image.

Colour histograms are useful for looking at the overall colour distribution within an image and can also be used to simplify the colours of an image by restricting how much of a certain colour is allowed based on its frequency.

I finished my last post on sorting colours using PHP looking at incorporating all three dimensions into the display of the colours. This lead to some interesting displays of colours in discs using different shapes or lengths as an indication of the colour in question. It was still lacking actually rendering out the third dimension in any meaningful 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 colours (red, green, blue) into the three dimensions of the 3D engine (x, y, z). This means creating a 3D scene with random colour 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 colours 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 colour space, which lends itself to generating 3D objects. Indeed, the red, green, blue colour space is built around a cube so it can often be represented as a cube.

The hue, saturation, and value colour 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 colour space.

Colourising images is fairly simple to accomplish, especially using PHP's GD library. All we need to do is load an image, create a blank image of the same size in a particular colour and then merge the two images together.

In fact, we can do this entirely with the imagecopymerge() function, but creating a function to wrap all of this makes sense as well.

The following function takes an image resource (as created by imagecreatefrompng()), the red, green, and blue values of the colour, and the percentage to overlay the colour on top of the image. The percentage can be set to 0 for no effect and 100 to fully replace the image with the given colour.

Following on from by previous post about sorting colours I decided to take another step towards sorting colours 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 colour, 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 colours I had produced a nice band or sorted colours, but to do so I had essentially removed a third of the data from the colour information. This meant that there was no white or black colours in the band of sorted colours.

After a bit of thinking on how to solve this I hit upon a way of using a two dimensional array of colours to filter the colours into blocks. This would allow the missing colour 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 colour available and use that as the data. What I wanted to generate was a random assortment of colours that would represent the sort of data being produced by a system or other input.

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

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

Sorting colours is the sort of thing that you never really think about until you need to do it. Sorting a bunch of items by their colour 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 colours 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 colour 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 Colour class so that I could have a standard way of storing a colour. This just takes the red, green and blue values for a colour and allows a simple way of accessing those values.