CS 70

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.

  • Goat speaking

    Meh. Why are we doing stuff from some computer from like, 40+ years ago?

  • LHS Cow speaking

    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.

  • RHS Cow speaking

    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 Open in Integrated Terminal. 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

  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?

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.

To Complete This Part of the Assignment…

You'll know you're done with this part of the assignment when you've done all of the following:

(When logged in, completion status appears here.)