Phase 3: Memory Organization — Pages, Bytes, and Coordinates

Where This Lesson Fits

In Phase 1: Meet the OLED, we treated the 128 × 64 display as a coordinate grid. x moves across columns; y moves down rows. We used drawing commands and show() without opening the driver.

In Phase 2: Pictures as Data, we learned that a monochrome pixel needs one bit, a byte contains eight bits, and a full screen requires 1,024 bytes. We also practiced masks for changing individual bits.

So we know how much memory the picture needs and how to change a bit. We have not yet connected a screen coordinate to a particular byte.

Today’s goal: build that map, then answer one question: to turn on pixel (37, 29), which byte do we change, and which bit inside it?

Phase 4 will pick up after that. We will look at the frame waiting in the Pico’s RAM and ask why drawing text does not immediately change the physical screen.

Build the Memory Model

Start with the screen coordinates

The OLED is a grid 128 pixels wide and 64 pixels high. We name a pixel with (x, y):

• x is its column: 0 at the left edge, 127 at the right.
• y is its row: 0 at the top, 63 at the bottom.

For example, (37, 29) means column 37, row 29. These coordinates describe where the pixel is on the screen. They do not yet tell us where its information is stored.

What is the buffer?

A buffer is a stretch of memory used to hold data. Here, the data describes the pixels that make up the image. In Python, bytearray(1024) creates 1,024 numbered, changeable byte slots, each starting at zero:

buffer[0], buffer[1], buffer[2], ... buffer[1023]

Each slot stores one byte, a value from 0 through 255. The index tells us which byte slot we mean. It does not mean that one slot stores one screen pixel; the display packs several pixels into a byte.

One byte holds eight vertical pixels

For the standard MicroPython SSD1306 layout used here, the eight bits of a byte control eight vertically stacked pixels in one screen column. The driver calls this arrangement MONO_VLSB: monochrome, vertical, least-significant bit first.

one screen column         one byte
row 0  pixel                 bit 0 (D0)
row 1  pixel                 bit 1 (D1)
row 2  pixel                 bit 2 (D2)
row 3  pixel                 bit 3 (D3)
row 4  pixel                 bit 4 (D4)
row 5  pixel                 bit 5 (D5)
row 6  pixel                 bit 6 (D6)
row 7  pixel                 bit 7 (D7)

Within each group, bit 0 represents the top pixel and bit 7 the bottom. For example, 00000001 turns on the top pixel; 10000000 turns on the bottom one. The binary digits are usually written left-to-right as bit 7 down to bit 0, so the printed order runs opposite to the physical top-to-bottom order.

What is a page?

A page is a horizontal band of eight screen rows. It stretches across the full 128-pixel width. Since one byte represents eight vertical pixels in one column, each column in that band uses one byte:

Page 0: rows  0–7   → 128 bytes, one byte for each x-column
Page 1: rows  8–15  → 128 bytes
Page 2: rows 16–23  → 128 bytes
Page 3: rows 24–31  → 128 bytes
  ...
Page 7: rows 56–63  → 128 bytes

A page is not a separate display or a single row. It is one eight-row-tall strip. The pages are stored consecutively in the buffer:

That also checks our memory count: 8 pages × 128 bytes per page = 1,024 bytes.

From (x, y) to page, byte, and bit

Now each part of the mapping has a meaning:

1. Divide y by 8 to find which page contains that row.
2. The remainder after dividing y by 8 is the bit position inside the byte.
3. Each page uses width bytes, so skip page * width bytes, then move x bytes across that page.
4. Shift a 1 left by the bit number to make a mask for that pixel.

That gives us four expressions:

page = y // 8
bit = y % 8
index = page * width + x
mask = 1 << bit

The standard display in this lesson is 128 pixels wide, so width is 128. Using the name width makes clear what that number means and lets the same formula work for another display width.

Walk through (37, 29) once

The row is y = 29. Page 3 covers rows 24 through 31, so row 29 is in Page 3. It is the sixth row of that page when counting from zero:

page = 29 // 8 = 3
bit  = 29 % 8  = 5

Page 3 starts after three complete pages. Each page has 128 bytes, and column 37 is 37 bytes from the start of the page:

index = 3 * 128 + 37 = 421
mask  = 1 << 5 = 00100000 = 0x20

So the answer to our driving question is: change bit 5 of buffer[421]. We have not changed the display yet; we have only located the pixel’s stored bit. The questions below give you practice deriving and using each part of this model.

Check the Model

Q1: Does the buffer size tell us a pixel’s address?

Problem: We know the display image needs 1,024 bytes. Does that number alone tell us which byte holds pixel (37, 29)? What other parts of the memory model do we need?

One Byte, Eight Vertical Pixels

Q2: What part of the screen does one byte represent?

Problem: A byte has eight bits. Sketch the group of screen pixels represented by one byte in this display layout.

screen column       byte bits
    pixel             D0
    pixel             D1
    pixel             D2
    pixel             D3
    pixel             D4
    pixel             D5
    pixel             D6
    pixel             D7

Q3: What do 00000001 and 10000000 look like?

Problem: For each byte, identify which of its eight vertical pixels is on.

00000001       10000000
D0  ●          D0  ○
D1  ○          D1  ○
D2  ○          D2  ○
D3  ○          D3  ○
D4  ○          D4  ○
D5  ○          D5  ○
D6  ○          D6  ○
D7  ○          D7  ●

Q4: Decode 0x2D as a vertical pattern.

Problem: Convert 0x2D to binary, then list which of the eight pixels are on from top to bottom.

D0  1  ●
D1  0  ○
D2  1  ●
D3  1  ●
D4  0  ○
D5  1  ●
D6  0  ○
D7  0  ○

Divide the Screen into Pages

Q5: How many pages fit on a 64-pixel-high display?

Problem: Each byte represents eight vertical pixels. How many eight-pixel groups fit in a display that is 64 pixels tall?

Q6: How many bytes are in one page?

Problem: A page is 128 pixels wide and eight pixels tall. If one byte controls eight vertical pixels in one column, how many bytes does a page need? Check that all pages account for the whole buffer.

8 pages × 128 bytes = 1,024 bytes

Find a Page and Bit from y

Q7: Which page contains row y?

Problem: Page 0 contains rows 0–7, Page 1 contains rows 8–15, and so on. Find a rule that maps y to a page, then test y = 3, 8, 19, 29, 63.

page = y // 8

Q8: Which bit within that page represents row y?

Problem: Row 29 is in Page 3. Find an operation that gives its position, from 0 through 7, inside that page.

bit = y % 8

Q9: Calculate the page and bit for several rows.

Problem: Without code, find page = y // 8 and bit = y % 8 for y = 0, 7, 8, 15, 16, 37, 63.

Find the Byte from Page and x

Q10: Where does Page 3 begin in the buffer?

Problem: Each page contains 128 bytes. What is the index of the first byte in Page 3?

Q11: Which byte in Page 3 represents column 37?

Problem: Page 3 begins at byte 384. Each column uses one byte. Find the buffer index for column x = 37 on that page.

Q12: Solve the original coordinate problem.

Problem: Find the page, bit, buffer index, and bit mask for pixel (37, 29).

page  = 29 // 8 = 3
bit   = 29 % 8  = 5
index = 3 × 128 + 37 = 421
mask  = 1 << 5 = 00100000 = 0x20

Change Pixels in Raw Memory

Q13: How do you turn this pixel on without changing its neighbors?

Problem: The target is bit 5 of buffer[421]. Write the operation that sets it while preserving the other seven bits.

buffer[421] |= 1 << 5

Q14: Can you derive the general set-pixel operation?

Problem: Replace 37 and 29 with arbitrary coordinates x and y. Write the expressions for page, bit, index, and mask, then turn the pixel on.

page = y // 8
bit = y % 8
index = page * 128 + x
mask = 1 << bit

buffer[index] |= mask

Q15: How can the code support a different display width?

Problem: The expression index = page * 128 + x assumes the display is always 128 pixels wide. Rewrite it so the mapping can use a width supplied by the program.

index = page * width + x

def set_pixel(buffer, x, y, width):
    page = y // 8
    bit = y % 8
    index = page * width + x
    buffer[index] |= 1 << bit

Q16: How do you turn a pixel off?

Problem: Write an operation that clears only the selected pixel and preserves the other seven bits in its byte.

buffer[index] &= ~(1 << bit)

def set_pixel(buffer, x, y, width, on):
    page = y // 8
    bit = y % 8
    index = page * width + x
    mask = 1 << bit

    if on:
        buffer[index] |= mask
    else:
        buffer[index] &= ~mask

Q17: Do the four corners fit in the buffer?

Problem: For a 128 × 64 screen, find the byte index and bit for (0, 0), (127, 0), (0, 63), and (127, 63).

Q18: Can you recover a coordinate from a byte and bit?

Problem: A pixel is stored at buffer[421], bit 5. Recover its (x, y) coordinate on a 128-pixel-wide display.

page = 421 // 128 = 3
x = 421 % 128 = 37
y = page * 8 + bit = 3 * 8 + 5 = 29

Put the Mapping Together

Q19: What changes inside the bytearray?

Problem: Start with buffer = bytearray(1024). Set pixel (37, 29), then clear pixel (37, 30). What is the final value of buffer[421]?

buffer[421] |= 1 << 5
buffer[421] &= ~(1 << 6)

Q20: How does (x, y) become one changed pixel?

Problem: Explain how a screen coordinate leads to a byte and a bit, then give the operation that turns that pixel on.

page = y // 8
bit = y % 8
index = page * width + x
mask = 1 << bit
buffer[index] |= mask

Next: The Frame Buffer

We can now translate coordinates into bytes and bits, then change that data in a bytearray. But the bytes we changed live in the Pico’s RAM. Why doesn’t a call such as text() immediately change the physical screen? What does show() do with the frame waiting in memory?

That is Phase 4: The Frame Buffer. We will follow a drawing operation from the Pico’s RAM to the display and learn why drawing and displaying are separate steps.

Back to Phase 2: Pictures as Data ←

Glossary