Apple ][ Text on Mini Micro!

The Apple 2 (usually written Apple ][) computer was one of the first widely popular home computers. At the time, most home computers came as kits and included no keyboard or text display; you got some switches for input and blinky lights for output, and if you really wanted to spend some cash, you got a teletype machine to go with it.

So when Steve Wozniak designed an affordable home computer that actually came with a full keyboard and glowing green screen, people got pretty excited! The first computer in my house was actually a TI-99/4A (on sale for $50 at K-Mart), but we quickly outgrew that, and got an Apple //e, which served us well for years.

Recently I found myself feeling a bit nostalgic for that old green screen, and decided to see if I could recapture some of its look and feel in Mini Micro. Mini Micro itself is a "neo-retro" virtual computer, but its screen has much higher resolution (960x640) compared to the early Apples (280 x 192). This is reflected in the appearance of the text, which on Mini Micro, is normally quite sharp:

Each character on a Mini Micro text display is 24 pixels high, whereas on the Apple ][, characters were only 8 pixels high.

The Apple ][ Text Font

Somewhere on the Internet I found this image containing all the characters the Apple ][ could display:

This image is 16 columns wide, and 8 rows high, for a total of 128 characters — the complete ASCII character set. There's nothing tricky about the arrangement; each character is 8 pixels wide and high, and they're in ASCII order, starting at the top left and proceeding row by row.

In short... this is set up exactly like a tile set you might use with Mini Micro's TileDisplay!

...in a TileDisplay

To display text using characters from this image, I launched Mini Micro, reset to a clean state, and used edit to enter this code:

clear
text.row = 0

display(4).mode = displayMode.tile
td = display(4)
td.tileSet = file.loadImage("AppleIIChars.png")
td.extent = [45,26]  // columns and rows of text
srcW = td.tileSet.width / 16
srcH = td.tileSet.height / 8
td.tileSetTileSize = [srcW, srcH]
td.cellSize = [24, 24]  // size of each character on screen
td.overlap = [3,0]  // 3-pixel horizontal overlap
td.scrollX = -7; td.scrollY = -7
td.clear "@".code

Why not fire up Mini Micro yourself, and follow along?

This code sets display 4 to "tile" mode, loads the AppleIIChars image as the tile set, and tells Mini Micro how big the source tiles are, and how big those should appear on screen. I also apply a small horizontal overlap, since even though the cells are 8x8 in the image, the Apple actually used only 7 pixels (width) per character. Finally, I set scrollX and scrollY to center the tiles on the screen, since there is a bit of extra space around the edges that we can't quite use.

The line td.clear "@".code tells the TileDisplay to clear to the at-sign symbol. (The code method gets the ASCII code for the first character of the string it's called on.) The result looks like this:

Not a bad start!

Making an a2 module

Next, I wanted some code that lets me start manipulating this TileDisplay with Applesoft-like commands. To keep things neat, I put these functions into a map called a2 — that way it's easy to tell the difference between a2.print and regular print.

But the first function we want is something to clear the screen, and in Applesoft, that was called HOME (because it both cleared the screen and returned the cursor to its home position in the top-left corner). So:

a2 = {}
a2.home = function()
    td.clear
    a2.row = td.extent[1] - 1
    a2.col = 0
    xrange = range(0, td.extent[0])
    yrange = range(0, td.extent[1])
    td.setCellTint xrange, yrange, "#22CC22"
end function
a2.home

Notice the other trick this code does: it tints the entire display green (color "#22CC22"), to match the appearance of the original Apple green screens.

If you're following along at home, and run your program at this point, it will appear to be doing not much — the screen just clears, and you're left with a standard Mini Micro prompt. Our tile display is there, but it's invisible. We need a bit more code!

a2.nextLine = function()
    self.col = 0
    self.row = self.row - 1 
end function

a2.putchar = function(c)
    i = c.code
    if i > 127 then i = i - 128
    if c != char(13) then td.setCell self.col, self.row, i
    if c == char(13) or self.col == td.extent[0] then
        self.nextLine
    else
        self.col = self.col + 1
    end if
end function

a2.print = function(s)
    for c in s
        a2.putchar c
    end for
    a2.putchar char(13)
end function

Now we're getting somewhere! After running this code, the screen is still blank, but you can now type something like:

a2.print "Hello!"

and it should appear in nice blocky text at the top of the screen!

Much Printing

I finished my demo program with this code:

a2.print "Hello world!"
a2.print "Welcome to the Apple II ""font"""
a2.print "(really a TileDisplay)."
a2.print
a2.print "Very much like the Apple II display, except"
a2.print "a little bigger (45x26 rather than 40x24)."
a2.print "The quick brown fox jumps over the lazy dog."
a2.print "Neat, huh?"

...and the result looks like this:

Of course you can print whatever text you like!

Regular, or Extra Crispy?

My one complaint with this result was that the text looked too crisp! The displays of those days did not have nice clean square pixels. Instead, each pixel was a glowing little blob of light, and because of how a CRT display works, these blobs ran together much better horizontally than vertically.

Because we're drawing the characters three times bigger than their definition in the tile set, we have an opportunity to recapture some of that extra flavor. But to do so, we need to make the image three times bigger, and modify it a bit.

I first tried to do this in an image editor. Scaling the image up 3X is easy enough, but then I wanted to add a bit of glow horizontally, and darken every third row to give the appearance of scan lines. And I couldn't figure out how to do that in the image app. So, I ended up doing it with MiniScript code instead! I wrote this separate program:

clear
gfx.scale = 3
img = file.loadImage("AppleIIChars.png")
gfx.drawImage img, 0, 0, img.width*3, img.height*3

// Add a bit of horizontal bleed
for x in range(0, img.width*3)
    for y in range(0, img.height*3)
        c = gfx.pixel(x,y)
        if c != "#000000FF" then continue
        if gfx.pixel(x+1, y) == "#FFFFFFFF" or
           gfx.pixel(x-1, y) == "#FFFFFFFF" then
            gfx.setPixel x,y, "#AAAAAAFF"
        end if
    end for
end for

// Then add scan lines
for x in range(0, img.width*3)
    for y in range(0, img.height*3, 3)
        c = gfx.pixel(x,y)
        if c == "#000000FF" then continue
        gfx.setPixel x, y, color.lerp(c, "#000000FF", 0.25)
    end for
end for

img = gfx.getImage(0, 0, img.width*3, img.height*3)
file.saveImage "AppleIICharsBig.png", img

This draws the original image to the gfx display, three times bigger — and that display itself is scaled 3X just to make it easier to see what's going on (so each character now appears 9X bigger than the original image). Then we have a loop that adds some horizontal bleed, by looking for black pixels next to a white pixel, and changing those to gray. And then a second loop which darkens (using color.lerp) every third row. Finally, the result is saved out to a new file, "AppleIICharsBig.png", which comes out like this:

Going back to our first program, to use this new tile set, we only need to change the line that loads the image:

td.tileSet = file.loadImage("AppleIICharsBig.png")

And now when we run it, we get:

Beautiful!

Taking it Farther

• My a2.nextLine method does not handle scrolling the text up when it gets to the bottom of the screen (row 0). Can you make it do that?

• If you really want to drive down nostalgia lane, how about hooking this display up to MiniBASIC?

• We baked our scanlines into the character images, which is fine if we're only displaying text... but what if we draw graphics? Can you think of a way that you could make scanlines appear on all display types, including sprites and pixel graphics?

Have fun, and happy coding!