Zoom into any image far enough and the picture dissolves into a grid of numbers. This lab lets you take an image apart, pixel by pixel, and see exactly what a computer sees.
Move your cursor over the image (tap on mobile) to inspect individual pixels below.
Why show a 7 × 7 patch? Almost every operation later in this series — blur, sharpen, edge detection — never looks at one pixel alone. It looks at a small neighbourhood exactly like this one and does maths across it. Get comfortable reading this grid; it's the raw material the rest of computer vision runs on.
"Pixel" = picture element. It's the smallest unit of a digital image — one square, one colour, one set of numbers. A 1920×1080 photo is really just a spreadsheet with over 2 million rows, each holding three numbers.
Every pixel stores three brightness values — Red, Green, Blue — each between 0 (none) and 255 (full). Mixing those three amounts produces every colour on your screen. That's why our inspector shows R, G, B as plain numbers, not "colours."
Every operation later in this series — blur, edge detection, thresholding — is just arithmetic performed on this grid of numbers. Understand the grid, and the rest of computer vision stops feeling like magic.
Drag the "Grid resolution" slider above down to 8 × 6 px. Before you look — how low do you think the resolution can go before the sample scene becomes unrecognisable?