Font Fun: A Code Reading Exercise

Overview

In the fontfun directory of the starter code, you'll find a small C++ program that renders text using the classic 8×8 pixel font from the ZX Spectrum computer (a popular British home computer from the 1980s). This exercise will help you practice reading and understanding C++ code that works with binary data, bit manipulation, and file I/O.

Building the Program

Open a new terminal window and, using the cd command, navigate to the fontfun directory.

Once you're in the fontfun directory, compile and link the program:

clang++ -std=c++17 -Wall -pedantic -Wall -c fontfun.cpp
clang++ -o fontfun fontfun.o

Or, if you prefer (because all the code is in one file), you can do all the compilation steps in a single command:

clang++ -std=c++17 -Wall -pedantic -o fontfun fontfun.cpp

Running the Program

The program uses a font file called font.ch8 that is in the same directory. This file contains the raw bitmap data for 96 ASCII characters (space through tilde). You can't look at this file directly (although you can view its contents in the terminal with hexdump -C font.ch8).

Run the program:

./fontfun

You should see

1. A demonstration of the letter 'A' rendered in 8×8 pixels
2. The word “HELLO” displayed horizontally
3. An interactive prompt where you can type your own text
   • Don't type anything super long or it'll wrap and be unreadable (unless you drag the window wide enough.)

Try entering different strings to see how they look in the retro bitmap font. Type quit to exit.

Code Structure to Explore

As a pair, look over the code. You haven't seen a lot of C++ code yet in CS 70, so getting a sense of what good code looks like will help you when it comes to writing your own program. With the exception of the file I/O part for loading the font data (which uses some concepts we haven't talked about yet), the rest of the code should be fairly accessible.

As you read through fontfun.cpp, pay attention to the following key aspects.

1. Memory Layout

• The font data is stored in a one-dimensional array of 768 bytes.
• How does the code map from a 2-D concept (characters with rows) to this 1-D storage?
• Look at the getRowByte() function—can you draw out how character 'A' (ASCII 65) is stored in memory?

2. Bit Manipulation

• Each byte represents 8 pixels (one row of a character).
• The expression (rowData & (1u << bit)) extracts individual pixels.
• Why does the code count bits from 7 down to 0?
• What's the significance of using 1u instead of just 1?

3. Algorithm Design

• Compare printCharacter() with printHorizontalText().
• The horizontal printing uses a clever approach—instead of printing each character completely, it prints all characters row-by-row. Why?

4. Error Handling

• What happens if you enter a character that isn't in the font (e.g., é or ñ)?
• How does the program handle a missing or corrupted font file?

5. User Input

• Where and how does the program read custom text from the user to display?

Questions to Consider

In the fontfun directory, you'll find a file called written.md. As a pair, discuss the questions in that file and write your answers there.

Extension Ideas (Optional)

In the Free Swim section of the homework, you'll have the option of extending this code to do more.

(When logged in, completion status appears here.)