Font Fun: A Code Reading Exercise
For this part, you'll need to be logged into the server via Visual Studio Code and clone your GitHub repository on the server.
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.
Meh. Why are we doing stuff from some computer from like, 40+ years ago?
The nice thing about using these old fonts is that the font data is much simpler. It allows us to have a nice, simple, yet fun, example.
Modern font formats are much, much more complex.
Building the Program
Open the VS Code terminal in the fontfun
directory. You can do so by right-clicking the fontfun
directory in the File Explorer and clicking . Or, if you already have a terminal window open to Homework-01
, you can type cd fontfun
to 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
- A demonstration of the letter 'A' rendered in 8×8 pixels
- The word “HELLO” displayed horizontally
- 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 just1
?
3. Algorithm Design
- Compare
printCharacter()
withprintHorizontalText()
. - 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?
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.)