Phase 2: Pictures as Data — Binary, Hex, and Bit Masks

In Phase 1, you put Hi Yush on a real screen. Now let’s look inside the picture. How can numbers describe which pixels should light up? By the end, you’ll be able to build a byte deliberately and change one of its bits without disturbing the others.

What You Will Be Able to Do

• Explain why one bit can represent one monochrome pixel, and calculate an image’s raw storage.
• Read a byte in binary, hexadecimal, and decimal, including inside an RGB color code.
• Shift patterns and use masks to set, clear, or inspect selected bits.
• Build reusable bit operations and explain how they preserve the states you want to keep.

Get Ready

Download the Phase 2 byte lab . Only a starting value and a readiness message run; the comments give prompts for your own code. No OLED or driver is needed. Ordinary Python on your computer and MicroPython on the Pico both work for this phase.

Write one experiment at a time in the file and run it. Predict the result first, then use print() to check. Keep the answers closed until you’ve given the problem a serious try.

From Pixels to Bytes

A bit is a single binary digit: 0 or 1. Give those two values a meaning and you can record a choice: no or yes, off or on. A byte is a group of eight bits. Patterns of bits can represent numbers, text, colors, and recorded sound. The rules we choose give a pattern its meaning.

For our monochrome picture, each bit has one job: 0 means a dark pixel; 1 means a lit pixel. One byte can therefore describe eight pixel states:

We’ll choose where those pixels sit on the OLED in Phase 3. For now, let’s work out how much space a picture needs.

Try it: Imagine a picture with 16 columns and 8 rows. Each pixel needs one bit, and each byte holds eight bits. How many bytes do we need to store the whole picture? Work out the number of pixels first, then the bits, then the bytes. Try it before opening the answer.

Read and Construct a Byte

We’ve read a bit pattern as lights. We can also read it as a number.

Binary uses powers of two, just as decimal uses powers of ten. In an eight-bit pattern, count bit positions from 0 at the right. A position’s weight is the value it contributes when its bit is 1.

bit:       7   6   5   4   3   2   1   0
weight:  128  64  32  16   8   4   2   1

For example, 00101101 has bits 5, 3, 2, and 0 on. Add their weights: 32 + 8 + 4 + 1 = 45. A byte ranges from all zeroes, value 0, to all ones, value 128 + 64 + 32 + 16 + 8 + 4 + 2 + 1 = 255. There are 256 possible patterns.

In Python, prefix a binary number with 0b: 0b00101101. Leading zeroes help us see eight positions; they do not change the value. bin(value) gives a binary text representation, usually without those leading zeroes.

173 = 128 + 32 + 8 + 4 + 1
bit:    7 6 5 4 3 2 1 0
state:  1 0 1 0 1 1 0 1

Change Bits: NOT, AND, and OR

Reading a pattern is useful; changing just the parts we choose is even better. Bitwise operators work one position at a time. We’ll follow NOT, AND, and OR with eight-bit patterns so we can see exactly what happens.

NOT: reverse each bit

Bitwise NOT (~) inverts a pattern: every 0 becomes 1, and every 1 becomes 0.

For eight positions, inverting 00001100 gives 11110011. Python’s ~ operator inverts an integer, though, and integers aren’t limited to eight positions:

value = 0b00001100
print(~value)  # -13

That negative result can be surprising. Python hasn’t been told to keep just eight bits. We’ll use AND next to select the eight positions we want; there is no need to work with negative-number representations here.

AND: keep selected bits

AND (&) produces a 1 only when both inputs have 1 in that position.

A mask is a pattern used to select bit positions. For AND, a 1 in the mask lets the existing bit through; a 0 forces it off. This mask keeps only the lowest four positions:

value = 0b10110100
mask = 0b00001111
kept = value & mask
print(bin(kept))  # 0b100: 00000100 in eight positions

The expression calculates a new value. value still holds the original pattern; we stored the filtered result in kept.

Now we can keep just the lowest eight positions of our NOT result. An all-ones byte lets those eight bits through:

value = 0b00001100
inverted_byte = ~value & 0b11111111
print(bin(inverted_byte))  # 0b11110011

To clear a chosen bit, let every other position through. For bit 5, invert its one-bit mask, then keep the result’s lowest eight bits:

mask = 0b00100000             # Select bit 5.
clear_mask = ~mask & 0b11111111
print(bin(clear_mask))        # 0b11011111

AND with clear_mask clears bit 5 and preserves every other bit. To replace the stored value, write value = value & clear_mask, or the shorter value &= clear_mask. For an existing byte, value &= ~mask also works: AND cannot introduce a 1 where value already has a 0.

AND can also inspect a bit without changing it. value & 0b00000100 is zero if bit 2 is off and nonzero if it is on. bool(...) turns zero into False and a nonzero result into True. Inspection doesn’t change value because it doesn’t assign a result back to it.

OR: turn selected bits on

OR (|) produces a 1 when either input has 1 in that position.

For OR, zeroes in the mask preserve existing bits; a 1 turns that position on. Here the mask selects bit 3:

value = 0b10100001
mask = 0b00001000
result = value | mask
print(bin(result))  # 0b10101001

Only bit 3 switches on. To keep that result in value, write value = value | mask, or value |= mask.

The same mask has different jobs with different operators. OR with 00001000 turns bit 3 on; AND with it keeps only bit 3. NOT helps make the mask that clears bit 3 instead.

value = 0b10110100
mask = 0b00100000
value &= ~mask
print(bin(value))                 # 0b10010100
print(bool(value & 0b00000100))    # True

mask = 0b00010000
value = 0
value |= mask
print(bin(value))  # 0b10000
value |= mask
print(bin(value))  # 0b10000

value = 0
value += mask
print(bin(value))  # 0b10000
value += mask
print(bin(value))  # 0b100000

Move Bits with Shifts

So far we’ve written each mask by hand. What if a program needs to select whatever bit number we give it? Shifting moves a pattern into position.

A left shift (<<) moves every bit left and fills the new positions on the right with zeroes. Starting with 1, we can build a one-bit mask:

print(bin(1 << 0))  # 0b1:    00000001
print(bin(1 << 3))  # 0b1000: 00001000
print(bin(1 << 5))  # 0b100000: 00100000

1 << bit selects the numbered position: shifting zero places selects bit 0. We can now write value |= 1 << bit to set a bit whose number is held in a variable, or value &= ~(1 << bit) to clear it.

bit = 6
mask = 0  # TODO: create the mask from bit, using a shift.
value = 0
# TODO: turn the selected bit on using your mask.
print(bin(mask), value)

bit = 6
mask = 1 << bit
value = 0
value |= mask
print(bin(mask), value)  # 0b1000000 64

Move a whole pattern

Shifts move more than one lit bit. For the nonnegative values we use here, a right shift (>>) moves bits right and discards positions that fall off that end:

original:  00001100
left 1:    00011000
right 1:   00000110

These expressions calculate new values. value only changes if you assign a result back to it. Python integers can grow beyond eight bits, so a left shift does not automatically keep its result inside a byte. AND with 0b11111111 keeps just the lowest eight positions when needed.

value = 0b00001100
print(bin(value << 2))  # 0b110000: 00110000, bits 5 and 4
print(bin(value >> 2))  # 0b11:     00000011, bits 1 and 0
print(bin(value))       # 0b1100:   00001100, bits 3 and 2
value = value << 2
print(bin(value))       # 0b110000: now value has changed

Use Hexadecimal as Compact Binary

We can now read and change bit patterns. As those patterns get longer, writing every zero and one gets awkward. Hexadecimal gives us a shorter way to write the same values.

A group of four bits is a nibble. It has sixteen possible patterns, so one base-16, or hexadecimal, digit can describe the whole group. The digits after 9 are A through F, representing 10 through 15.

0  0000    4  0100    8  1000    C  1100
1  0001    5  0101    9  1001    D  1101
2  0010    6  0110    A  1010    E  1110
3  0011    7  0111    B  1011    F  1111

Split our byte into two nibbles: 0010 1101 becomes 2 D. In Python, 0x2D is hexadecimal notation for the same value as 0b00101101 or decimal 45. The prefix chooses how we write the number; it does not change the number. hex(value) gives its hexadecimal text representation.

print(60 == 0x3C == 0b00111100)  # True

Practice: Byte Builder

Build a decimal or hex target by toggling bits, then supply its other representation. Try reading the pattern before checking it. Useful patterns to recognize include 0x00 (all off), 0xFF (all on), 0xAA (10101010), and 0x55 (01010101).

Another Use for Hex: RGB Color

Our OLED picture uses one bit per pixel. For another use of bytes, imagine mixing red, green, and blue light on a color screen. In this RGB format, each color component, or channel, gets one byte: 00 through FF in hex, or 0 through 255. Zero contributes none of that component; 255 is its maximum.

A six-digit web color code, #RRGGBB, gives each channel two hex digits. For example, #204080 contains:

The code combines three bytes, or 24 bits, for one pixel. The left byte is red, the middle byte is green, and the right byte is blue. Those separate groups will let us pack channels together with shifts and OR, then recover them with shifts and AND.

Keep two digits per channel: #0000FF is blue with no red or green. #000000 is black; #FFFFFF is white. The web code uses #; a Python integer uses 0x, as in 0x204080. hex(0x0000FF) prints 0xff, while the web color still needs all six digits to preserve the channel positions.

You’ll try mixing and decoding colors in the last homework exercise. This six-digit notation is the RGB hex form used in CSS.

Homework

Explain yourself

With the explanations closed, explain each term to yourself or someone else. Connect a byte’s bit positions, masks, and written forms. How can bits describe both a monochrome picture and an RGB color? Explain a setting operation without just naming its operator.

Exercises

Write your own solution before looking at the hints. ★ Challenging · ★★ Very challenging.

values = (0xA6, 0b01011010, 0x0F)
for value in values:
    print(value, bin(value), hex(value))

value = 0x2D
print(bin(value << 1), hex(value << 1))
print(bin(value >> 2), hex(value >> 2))
print((value >> 2) << 2)

wide = 0x81 << 1
print(wide, bin(wide), hex(wide))  # 258 0b100000010 0x102
byte = wide & 0xFF
print(byte, bin(byte), hex(byte))  # 2 0b10 0x2

value = 0x81
mask = 0      # TODO: combine the three one-bit masks.
result = value  # TODO: apply your mask while preserving the other bits.
print(bin(mask), hex(mask))
print(bin(result), hex(result))

value = 0x81
mask = (1 << 1) | (1 << 3) | (1 << 6)
result = value | mask
print(bin(mask), hex(mask))      # 0b1001010 0x4a
print(bin(result), hex(result))  # 0b11001011 0xcb

value = 0xD6
mask = (1 << 1) | (1 << 4)  # 0x12
print(hex(value & mask))    # 0x12: keep the selected bits
print(hex(value & ~mask))   # 0xc4: clear the selected bits

value = 0x02
print(bool(value & mask))   # True: bit 1 is on, but bit 4 is off
print((value & mask) == mask)  # False

mono = 128 * 64 // 8
larger = 256 * 128 // 8
rgb = 128 * 64 * 3
print(mono, larger, rgb)  # 1024 4096 24576

def change_bit(value, bit, on):
    # Return the new byte value.
    pass

print(change_bit(0xC3, 3, True))   # Expected: 203 (0xCB)
print(change_bit(0xCB, 3, False))  # Expected: 195 (0xC3)

def change_bit(value, bit, on):
    mask = 1 << bit
    if on:
        return value | mask
    return value & ~mask

print(change_bit(0xC3, 3, True))   # 203
print(change_bit(0xCB, 3, False))  # 195

value = 0
for bit in (0, 2, 3, 5):
    value = change_bit(value, bit, True)
print(hex(value))  # 0x2d

for bit in range(8):
    if value & (1 << bit):
        state = 1
    else:
        state = 0
    print(bit, state)

def pack_rgb(red, green, blue):
    # Leave eight bit positions for each channel.
    pass

def unpack_rgb(color):
    # Return (red, green, blue).
    pass

print(pack_rgb(0x20, 0x40, 0x80) == 0x204080)
print(pack_rgb(0, 0, 255) == 0x0000FF)
print(unpack_rgb(0x12ABF0))

def pack_rgb(red, green, blue):
    return (red << 16) | (green << 8) | blue

def unpack_rgb(color):
    red = (color >> 16) & 0xFF
    green = (color >> 8) & 0xFF
    blue = color & 0xFF
    return red, green, blue

print(pack_rgb(0x20, 0x40, 0x80) == 0x204080)  # True
print(pack_rgb(0, 0, 255) == 0x0000FF)         # True
print(unpack_rgb(0x12ABF0))                  # (18, 171, 240)

What’s next

You can choose bits inside a byte. Our OLED picture contains 1,024 bytes, so the next question is which byte and bit belong to a particular coordinate? Phase 3 connects these patterns to pages of vertical pixels, using a smaller display and a familiar tic-tac-toe board first.

Continue to Phase 3: Memory Organization → · Back to Phase 1 ← · Project roadmap