Drawing the Grid

The array holds data. Now draw it on screen. Each cell gets a fixed position using PRINT AT, so the grid stays neat regardless of what values it contains.

The Program

10 CLS
20 DIM m(8, 8)
30 REM fill with test pattern
40 FOR r = 1 TO 8
50 FOR c = 1 TO 8
60 LET m(r, c) = INT (RND * 4)
70 NEXT c
80 NEXT r
90 REM draw grid
100 PRINT AT 0, 8; "Grid Display"
110 FOR r = 1 TO 8
120 FOR c = 1 TO 8
130 PRINT AT r + 2, c * 3; m(r, c)
140 NEXT c
150 NEXT r
160 REM draw borders
170 FOR c = 1 TO 8
180 PRINT AT 2, c * 3; "-"
190 PRINT AT 11, c * 3; "-"
200 NEXT c

How It Works

Lines 20-80 create an 8x8 array and fill it with random values (0-3) to test the display.

Lines 100-150 draw the grid. The key is the position formula:

130 PRINT AT r + 2, c * 3; m(r, c)

r + 2 offsets the grid downward, leaving room for a header. c * 3 spaces columns evenly — multiplying by 3 gives each cell three characters of width.

Lines 170-200 draw dashes above and below the grid as borders.

Mapping Array Positions to Screen Positions

This is the core skill. The array uses positions 1-8 for both rows and columns. The screen uses positions 0-21 for rows and 0-31 for columns. You need a formula to convert.

The formula AT r + 2, c * 3 maps every array position to a unique screen position. Change the formula and the grid moves — but the data stays the same.

Try This

Tighter grid. Change c * 3 to c * 2 — the columns get closer together. With single-digit numbers, this still works and leaves more room on screen.

Headers. Print column numbers above the grid (1-8) and row numbers down the left side. Use separate FOR loops before drawing the main grid.

What You’ve Learnt

• Position formulas — AT r + offset, c * spacing maps data to screen
• Separating data from display — the array doesn’t care where it’s drawn
• Border drawing — simple loops to frame the grid