1. Draw with bits
Tap a square: navy is 1, white is 0. Keyboard users can Tab to any pixel and press Space or Enter.
2. Read the picture as data
One row, one byte
Read left to right. The leftmost bit has weight 128, then 64, 32, 16, 8, 4, 2, 1. Add the weights where the bit is 1.
The rows update as you draw. Clearing pixels does not shrink this fixed-size, uncompressed image: white pixels still need bits.
3. Pixel detective challenge
- Clear the picture. Turn on only the first and last squares of row 1. Predict that row’s decimal value, then check it.
- Draw the same picture in a different row. What stays the same? What changes?
- Invert your picture twice. Does the original return?
Why this model is deliberately tiny
A bit has two possible values: 0 or 1. A byte contains 8 bits. Here, each pixel has only two colours, so it uses 1 bit. Our 8 × 8 grid has 64 pixels and needs 64 bits, or 8 bytes, for the raw pixel data.
This is a teaching model, not a PNG file encoder. Real image files can include dimensions, colour information and other metadata, and may compress their data. A colour image may use more bits per pixel. The decimal numbers above display the same bytes; they are not extra picture data.
Your drawing stays on this page. Nothing is uploaded or saved; reloading clears it.