Font Design, ASCII and drawing text on the screen

The most recent video I posted to YouTube in my programming in BASIC series was showing the fruits of my labor creating “fonts” which are alphabetical characters that I can display graphically using the Extended Color BASIC “DRAW” command.

Draw is a very powerful and flexible command that allows you to create complex vector based images that can be scaled, rotated, colored, and more.

I started by designing what I thought my fonts should look like on “graph paper” which was an excel spread sheet;

I chose an 8×8 grid, and decided that 7×7 pixels for each character would look nice, and allow a small buffer between characters.  Once the characters were designed “on paper” I had to then start to use the DRAW statements to get the Color Computer to plot out my characters.

This was an interesting education in relative space and time, because I had an idea in my mind where the computers pixel was currently located, but where the computer decided it was, wasn’t always the same, so there was an adjustment process for me to start to think exactly like the CoCo and that made font drawing a little easier over time.

I would only do one letter at a time, and only pieces of that later at a time, as well, to test my logic, and positioning to make sure the CoCo was delivering on my vision.

This was slow and painstaking, but it proved successful in the end, as I was able to generate the entire alphabet as follows:

So now I had good looking fonts, even though they didn’t come out exactly like I saw them in my head or on my graph paper spread sheet.  I also discovered, that due to the color computers “artifacting” that these fonts looks very blurry and indistinguishable using the VCC emulator, I had to change the color set to turn off artifact mode to see the fonts as they were meant to be seen.

I also had in my grand vision, the idea that these vector based fonts should scale very easily so I could make them bigger if needed using the “S” command for scale.  I found out the fonts only look good if they are draw in the high resolution PMODE 4 screen, without artifacts, and when the scale is a base 2 number such as 1x 2x 4x 8x any “odd” scale that wasn’t a factor of 2 produced undesirable results, as did trying to create these fonts in lower resolution.

An exercise in futility? Possibly, but I’m going through the struggle of creating my own code and my own assets the good old fashioned way.

I ultimately ended up also generating the numerical digits 0-9 and my initial program to generate these fonts displays them on the screen in alpha and numeric order.

I can consider them “done” for now, I can use them, I can tweak them, and I can even go back, and start from scratch, and make different fonts that should play nicer with all the various graphics modes, but, that, as they say will happen another day.

Based on the fonts I have now, I want to convert the string value for each graphical character to match the ASCII code for the characters as they are presented in BASIC. What’s ASCII, what am I talking about? How about a picture, first:

This is a quick demo I drew up on the Coco to display all of the ASCII codes and their corresponding characters.  ASCII is an 8-bit coding system where every character on the display is represented by a decimal number from 0-255, and depending on what number you pick, you will see a certain character on the screen.  ASCII code 32 represents the “space” or blank character, ASCII code 65 is the capital letter “A”, 66 is B, and so on.  In this demo you can see all the main ASCII codes and the corresponding characters they represent.  The codes are wrapped in [DARK BRACKETS] and the character for the code is just to the right of the right bracket.

By reading in my graphical data in a way that matches ASCII codes, I can write a routine to take any string of text I pass to it, convert each character to it’s ASCII code, store that as a variable, then pull up the corresponding graphical data for that code and draw it on the screen.

What does that mean? If I can number the string variables to properly match ASCII codes, it’s easier and more logical to convert text to graphics without doing much fancy math.

So, the next video you’ll see from me, will have me tweak the code to change the number values for each string variable to match the proper ASCII code, so instead of reading in the value for the letter “A” as T$(1), it will read it in as T$(65) to match ASCII, etc., for the entire alphabet and character set.

A minor tweak to the code that will make things majorly easier for me down the road.

Stay tuned for a new video in the near future, and if you have any questions about any of this, hit me up on the email,

The final step, using these current sets of character fonts, is to take the routine, renumber it to high line numbers and save it out in an ASCII format to disk using the ,A command after the save command.  Saving a BASIC program in ASCII mode rather than in normal mode keeps every character unmodified, and not converted into binary “tokens” as is what happens with normal BASIC programs.

This saved chunk of code can then be “merged” into other exiting programs on disk.  The coco doesn’t support copy and paste, and I’m trying to do everything using just the tools and methods available to me on the actual machine from the 1980’s.

Once have this mini program ready to merge, the first program I’ll add it to will be my existing graphical demo that I’ve been slowly adding to. I’d love to have routines to draw specific text phrases (graphically, of course) as well as random letters and numbers on the screen to continue to “mix things up”.

Happy coding!


Leave a Reply