Crossing the boundary - analogue universe, digital worlds

This free course is available to start right now. Review the full course description and key learning outcomes and create an account and enrol if you want a free statement of participation.

Free course

# 4.4 Introducing pixels

Let's try a simple example. I'm going to take an image, divide it into discrete parts and then transform the result into numbers. I shall use the simple picture of a church shown in Figure 12(a). The process will be exactly the same, whatever image we use.

Figure 12 Picture of a church

Signac laid down his paint with an artist's hand and eye. I will have to work more systematically. The first thing to do is place a border around the picture, as in Figure 12(b), to indicate the area I'm interested in. Anything outside the border will not be part of the capture.

Next I'll divide the picture up by laying down a grid of equal-sized squares over it, as in Figure 13. I'll enlarge the original slightly so you can see clearly what is going on.

I can now examine each square of Figure 13. If it contains just the background colour (light grey, in this case) I'll just fill the square with white. If it contains any other image colour (mauve), then I'll colour it black. Looking at the grid, you can see that some squares contain both background and image colour. In such cases I will colour a square black if roughly a third or more of it is image colour, white otherwise. There is no need at this stage to try to be too precise. The resulting image, shown in Figure 14, is rather crude, but at least recognisable.

Figure 13 The picture with grid
Figure 14 The image of the original picture mapped to the grid

You might like to start thinking about how we might improve the image, but we are not quite ready for this yet. We still haven't reached our goal of transforming the picture into numbers. Let's take the final step. For each square on the image, I will assign the number 0 to it if it is coloured white and 1 if it is coloured black. I call this mapping the square's colour to a number. This gives the following pattern:

The image represented as a series of ‘O’ and ‘I’

You might be tempted to look on this as one horrendously long binary number, but it's more accurate to see it as a set of 31×22 separate numbers. Since each number is only either 0 or 1, and computers use bits to store 0s and Is, this sort of encoding is usually referred to as a bitmap. Each square that we have mapped to a 0 or a 1 is called a pixel (short for picture element).

As I've noted already, Figure 14 is hardly a very satisfactory image – a long way from Vermeer. It has a very crude appearance, with the diagonal lines, in particular, looking jagged and unrealistic. We need to improve the quality.

M150_1