How 1983 pixels worked

The bill for a pixel

Imagine a square picture 64 dots wide and 64 dots tall. That is 4,096 dots. If each dot can be only black or white, one bit is enough to remember it, and the whole picture fits in 512 bytes. If each dot can be one of sixteen colours, each needs four bits, and the picture swells to 2,048 bytes. Full 24-bit colour needs twenty-four bits a dot, which is 12,288 bytes for the same tiny picture. Early home machines had a few thousand bytes to spare for the screen, and some had less. The number of colours was the first thing to go.

So the picture was stored as a grid of small numbers, and the numbers were looked up in a short list called a palette. Number 3 meant “this particular amber”, whatever your artwork needed amber to be. A palette is chosen by the artist, but its size is chosen by the hardware: two entries needs one bit a dot, four needs two, sixteen needs four.

Three ways to cope

Choose well. With four colours you do not pick the four prettiest. You pick the four that let a night sky, a face and a lit window all exist in the same picture. That is what the colour buttons below do: they snap every dot to the nearest colour in a fixed palette of our own design.

Dither. Place two colours in a pattern and the eye blends them into something in between. An ordered dither uses a small grid of thresholds so the pattern looks regular and tidy. A checker dither alternates dots like a chessboard, which is the simplest pattern of all and the most recognisable. The cost is a rougher texture; the gain is smooth gradients from very few colours.

Share colour between neighbours. Some machines stored the shape of the picture as plain on-or-off dots, then stored colour separately for each 8 by 8 block: one colour for the dots that were on, and one for those that were off. That saves a great deal of memory, at a price. If two objects of different colours share a block, one of them has to give way. This is attribute clash. Switch it on and look at where two bright shapes meet.

How to use the toy

Pick a scene, a resolution (32, 64 or 128 dots across), a number of colours and a dither. The big picture is your constrained version; the small one is the original with all its colours. The swatches list every colour in the palette with its hex code and a name, and how many dots use it. Below the picture, a line tells you what the result would cost in memory.

You can also paint. With a mouse or finger, drag across the picture. With a keyboard, tab to the picture, move the brush with the arrow keys (hold Shift to move eight dots at a time) and press Enter or Space to paint. Pick any colour you like; it will be squeezed into the palette like everything else. When you are happy, export a PNG.