Data Representation

1 bit Bitmap

Below is a 8 x 8 grid that you can create your own bitmap image design.

Click on each square to reverse the colour, turning black to white, or white to black.
Each row will be converted into a binary byte (8 bits = 1 byte) and the resulting pattern of 0s and 1s is displayed to the right of the grid.

You can reset the grid anytime by clicking on black or white.

You can see the complete binary data below where we are using just one bit for each pixel making 64 bits or 8 bytes in total.
0000000000000000000000000000000000000000000000000000000000000000

If you prefer, there is also a 2-bit version that features an improved 16 x 16 grid offering an increased resolution and as well as an increased colour depth.

Teaching Information

Before commencing on these activities, it's important that all pupils understand that all data on a computer system is represented using binary - including images.

Knowledge of the following vocabulary is also very helpful: Pixel, Resolution, Bitmap Image.

Most pupils have come across the word resolution from their use of streaming media apps such as YouTube, iPlayer and Netflix. They might even be aware of terms such as 1080p but might not necessarily know that it refers to (the resolution of a HD video is 1920 x 1080 pixels). Further details are available on Youtube's video resolution and aspect ratios.