A Picture Is a Grid of Numbers

Numbers, not pictures

Eleanor Price holds up a printed photograph of the workbench. “So this is what Bramble sees?”

Henry Wren shakes his head. “That's what you see. Bramble never sees a picture at all. Its camera measures how much light arrives at thousands of tiny points, and hands the computer a long list of numbers. Everything Bramble knows about the workbench, it has to work out from those numbers. Today you'll look at the numbers for yourself.”

Pixels, rows and columns

A camera picture is divided into a grid of tiny squares called pixels (short for “picture elements”). Each pixel holds one measurement of light. The pictures from Bramble's cameras in this course are 64 pixels wide and 48 pixels high: 64 × 48 = 3072 pixels in all. That is far fewer than a phone camera, which keeps the numbers small enough for you to study.

In JavaScript, a grey picture is stored as a list of rows. Each row is itself a list of numbers, one for each pixel from left to right. The first row is the top of the picture.

Here is a tiny picture of a cup, 12 pixels wide and 10 high. Run it to see the picture and the numbers that make it:

Here is what each line does. camera("tinycup") fetches a picture. const cup = ... gives that picture a name, cup, so that the later lines can use it; const is the JavaScript word for “make a new name”. show(cup, "A tiny cup") draws the picture with a title, and showNumbers(cup) prints the numbers inside it as a grid.

Point at the picture (or tap it on a phone) to see the value of each pixel. Compare the picture with the grid of numbers. The dark outline of the cup is made of 60s, the pale inside of the cup is 200, and the background is 230.

Brightness from 0 to 255

In a grey picture, each pixel is one number that says how bright that point is:

• 0 means black: no light at all.
• 255 means white: as much light as the camera can measure.
• Numbers in between are shades of grey. The bigger the number, the lighter the grey.

Why stop at 255? Each pixel is stored in one byte of computer memory, and a byte can hold 256 different values: 0 to 255. That is enough steps for the eye to see a smooth change from black to white.

Finding a pixel: picture[y][x]

Every pixel has an address made of two numbers:

• x is the column: how far across from the left edge.
• y is the row: how far down from the top edge.

Both are counted from 0, not from 1. So the top-left pixel is at x = 0, y = 0, and in a 64 × 48 picture the bottom-right pixel is at x = 63, y = 47. Notice that y grows downwards, the opposite of a graph in a mathematics book. Nearly every camera and computer screen counts this way.

To read a pixel, you first pick the row, then the column inside that row:

picture[y][x]

The row comes first because the picture is a list of rows: picture[y] is one whole row, and picture[y][x] is one pixel in it. It is easy to get the order the wrong way round, so say it to yourself as “row, then column”.

Use console.log(...) to print a value. You can print several values at once by separating them with commas:

The last line shows how to find the size of a picture. cup.length is the number of rows, which is the height. cup[0].length is the number of pixels in the first row, which is the width. The workbench also has two ready-made helpers, width(picture) and height(picture), that give the same answers.

Colour pixels: three numbers

A colour camera measures three amounts of light at every pixel: how much red, how much green and how much blue. Each amount is again a number from 0 to 255. So in a colour picture, each pixel is a small list of three numbers, [red, green, blue].

• [255, 0, 0] is bright red, [0, 255, 0] is bright green, and [0, 0, 255] is bright blue.
• [0, 0, 0] is black and [255, 255, 255] is white.
• When the three numbers are equal, the colour is a grey: [128, 128, 128] is middle grey.

This is Bramble's head camera looking down at the workbench, where Eleanor has left a red cup, a blue box, a green ball and a spanner:

The middle of the cup gives about [132, 25, 28]: plenty of red, very little green or blue. The box gives far more blue than anything else, and the wood has a lot of red, a fair amount of green and less blue, which is what brown is made of. You will use numbers like these to find objects in Module 2.

To get one of the three numbers on its own, add a third pair of square brackets: bench[15][15][0] is the red amount, [1] the green and [2] the blue.

Changing a pixel, and making a picture

A picture is an ordinary JavaScript list, so you can change a pixel by giving it a new value with =. Here the tiny cup gets a black pixel in its top-left corner and a white stripe across its base row:

You can also make a brand-new picture. makePicture(width, height, value) makes a picture of the size you ask for, with every pixel set to the value you give. For a colour picture, give [red, green, blue] as the value.

Small pictures are drawn with big square pixels so that you can see each one. Bramble's camera pictures are drawn a little smaller, but they are made the same way.

Exercises

Quick check

Choose an answer to see whether you are right and why.

Found a mistake on this page, or something unclear? Report a problem and mention “Robot Vision Lesson 1.2”.