Wednesday, August 11, 2010

Colour Depth

Start at the Beginning
Table of Contents

One other thing to know about computer graphics. On modern computers, each pixel's colour is stored in a 32-bit number. Each colour is stored as a measurement of the intensity of three fundamental colours - red, green, and blue, which are then blended together to form the final colour. Each of these measurements are 8 bits (1 byte). A pixel with 255 for red and 0 for green and blue would be a bright red; a pixel with 255 for red, green, and blue is white; a pixel with 0 for all of the different colour channels is black. The final byte of the colour typically is used to describe how transparent the pixel is (this is called the alpha value of the colour). That way, when drawing two images over top of each other, by performing some computations the computer can modify the colour it draws to make one image appear visible through the other.

Since my computer has a resolution of 1280x1024, that means there are

1280x1024 = 1310720

pixels on my screen. At 32 bits (or 4 bytes) per pixel, that means my screen takes 5242880 bytes to store. A KB (kilobyte) is 1024 bytes, and a MB (megabyte) is 1024KB or 1048576 bytes. My screen alone, then, requires around 5MB to store! Before around 1993, most computers didn't have this much memory for storing *everything* - all the programs and files you had loaded, numbers required for calculations, etc. - much less just to store the screen data. Of course, resolutions were smaller back then, but tricks were still needed to squeeze everything into memory.

One of these tricks is using a 'palette'. Rather than representing each pixel as 32 bits, we'll use only 8. This means we get 256 different colours to choose from per pixel. While we could just store the Red-Green-Blue-Alpha (RGBA) data using only 2 bits per channel, this wouldn't give us a great deal of flexibility regarding the colours we use. Instead, we'll choose 256 colours using 32 bits each and store them in a palette - a list of colours we're using. Because there's only 256 of them, even though we're using 32 bits per colour, it's still significantly smaller than using 32 bits for the thousands of pixels on screen. Suppose our resolution is 320x200. Using 32 bits per pixel, we're using:

320x200x4 bytes per pxiel = 256000 bytes

...around 256KB. Using a palette, we use only:

320x200x1 byte per pixel + 256 colours * 4 bytes per palette entry = 65024 bytes

...around 64KB. We're using only a quarter of the space we were using before; this was a significant saving when memory was expensive as it was. In fact, old computers tended to use only 6 bits per channel, and not store any alpha information whatsoever - meaning each palette entry was only 18 bits. So the size of the palette was smaller still.

Tuesday, August 10, 2010

Number Systems And Memory

Start at the Beginning
Table of Contents

A bit is a digit in the binary number system. We traditionally use the decimal number system, where each digit is a number from 0-9. Consider the number 325. What this actually means is:

300 + 20 + 5
= 3x100 + 2x10 + 5x1
= 3x10^2 + 3x10^1 + 3x10^0

(10^2 is another way of writing 10²)

For each "place" we move to the left, the exponent on 10 increases by one. The use of 10 here means that we're using a "base 10" number system, which is traditionally called the decimal number system. Note that there are 10 digits in the base 10 number system: 0, 1, 2, 3, 4, 5, 6, 7, 8, and 9.

In the binary number system, there are 2 digits: 0, and 1. Consider the 9-bit binary number 101000101b (the b simply signifies that this is a binary number). Using the same logic as above, this equals:

1x2^8 + 0x2^7 + 1x2^6 + 0x2^5 + 0x2^4 + 0x2^3 + 1x2^2 + 0x2^1 + 1x2^0

By computing this, we can convert to base 10:

1x256 + 0x128 + 1x64 + 0x32 + 0x16 + 0x8 + 1x4 + 0x2 + 1x1
= 256 + 0 + 64 + 0 + 0 + 0 + 4 + 0 + 1
= 325

The largest number that can be stored in 8 bits is 255 or 11111111b. The largest number that can be stored in 16 bits or 2 bytes is 65535.

In computing, we tend to call clusters of 8 bits a 'byte'. This is the smallest chunk of data that most modern computers can easily work with. Memory in a computer is basically a collection of numbered, byte-sized cells. You can put any byte-sized number into a memory cell and recall it later when needed. Each cell is labelled with a number called an 'address'. In the C programming language, we have 'variables', which are names for a memory cell or a group of memory cells holding a piece of data. The computer automatically decides on which cell(s) it aliases, usually, so we don't ever need to worry about that. We can just say:

int x, y;

...to declare a pair of variables called x and y that will hold integers (n.b. ints in C on a 386 are 4 bytes) . The C compiler will choose memory cells for x and y for us. To use the variables, we might write something like:

x = 5;
y
= 7;
x
= x + y;


This puts 5 into x's memory cells and 7 into y's. Then it pulls those numbers out of x and y's memory cells, adds them up, and puts their sum back into x's memory cell. The old value of x is gone.

Comfort with the binary number system is fairly important for programming. The hexadecimal number system (base 16) is also important - here, we use the standard base 10 digits, plus A-F inclusive to represent the decimal numbers 10-15 inclusive. Why is this important for programmers? Convenience of representation. What's the largest number you can store with two hexadecimal digits?

Monday, August 9, 2010

The Size of Pixels

Start at the Beginning
Table of Contents

The screen I'm typing this on is a grid of 1280 pixels across and 1024 pixels. We say that my screen has a 'resolution' of 1280x1024. My screen has a diagonal of 19" and it is 3/4 times tall as it is wide - that is, it has a ratio of 4:3.

(A computer monitor is a grid of very tiny pixels)

We're going to use the Pythagorian theorem to determine the width and height of my monitor in inches. The Pythagorian theorem states that the square of the diagonal of a right triangle (one with a 90° angle) is equal to the sum of the squares of its other two sides. It's one of the single most important mathematical formulas ever discovered, and there exist dozens of proofs of it - look some up if you get a chance!

(the Pythagorean theorem in action)
a² + b² = c²

Let the width of my monitor be a.
Let the height of my monitor be b.

As the ratio of my monitor is 4:3, b = 3a/4
The diagonal of my monitor is 19"

Consider the following diagram:


(half of a rectangle - like a computer screen - is a right triangle)

By the Pythagorean theorem:

a² + (3a/4)² = 19²

Using basic algebra, we can solve for a.

a² + 9a²/16 = 361 (compute the squares)
16a² + 9a² = 5776 (multiply both sides by 16 to eliminate the fraction)
25a² = 5776 (simplify the left side)
a² = 231.04 (divide both sides by 25)
a = ±15.2 (take the square root of both sides)

As a is a length, a cannot be negative. Therefore a = 15.2. Thus, my monitor is 15.2 inches wide. And as b = 3a/4

b = 3(15.2)/4 (substitute a)
b = 45.6/4 (multiply numerator)
b = 11.4 (divide)

Therefore my monitor is 11.4 inches tall. If we check 15.2/11.4 on a calculator, we get 1.333..., which is 4/3. Thus, the ratio between these two measurements is, as it should be, 4:3.

Knowing this, we can compute the size of each pixel on my screen. As there are 1280 pixels distributed across 15.2 inches, each pixel is

15.2/1280 = 0.011875"

...or around 0.3mm across! That's smaller than a grain of sand.

Older computers tended to have lower resolution screens. That's because the more pixels you have on the screen, the more memory is required to keep track of them all, and the more work it takes to set all of them. But reducing the resolution has a drawback, too. Imagine my screen had a resolution of 320x200. Then each pixel would be:

15.2/320 = 0.0475"

...across - far larger than it is on my high-resolution screen. Although 0.0475" still sounds very small, the difference is extremely noticeable. Fewer pixels on screen means images are less detailed and look "chunkier". Consider the following screenshots of Quake:

(Left - Quake running at 320x240. Right - Quake running at 640x480. Click for detail)

And modern computers run at more than twice the resolution of the right screenshot. The point is this - as resolution increases, the amount of work required to render increases - but so do visual sharpness and detail. It's a trade-off.

Sunday, August 8, 2010

What Graphics Are Made Of

Start at the Beginning
Table of Contents

CHAPTER II - Mode 13h

Graphics on your computer are made of tiny dots called 'pixels' (short for picture elements). Each pixel has a colour. In our modern age they're so close together and so tiny that they're effectively invisible on their own - grouped together, they seem to form shapes, images, and text. Animation is produced by changing the images these pixels form very quickly. Each image is called a 'frame'; films are projected at 24 frames per second (fps), TV at 30fps, and modern computer screens at around 60fps.


(A screen shot of Super Mario Bros. on the left with an enlarged view on the right, so you can see how the image is formed from pixels)

Saturday, August 7, 2010

Chapter I Review

Start at the Beginning
Table of Contents

This review will be on DOS and RHIDE.

When a DOS computer boots up, it places you at the command prompt. From here you'll navigate your disks, manage files and directories, and start programs.

Every disk in your computer is assigned a letter. On the virtual machine we're using, we're only going to have one primary disk: C, our hard drive. Occasionally I'll have you load a file from the A drive, a floppy disk drive.

At all times DOS keeps track of the current disk drive you're working with. To change drives, type the drive letter you want to change to, followed by a colon, followed by Enter. For example, to change to a hypothetical H drive, you would type H: and press Enter.

If DOS can't change to a disk drive (for example, if you try to change to the A drive if no disk is in the drive) it will display an error messaging asking whether to Abort, Ignore, Retry, or Fail. If you can fix the problem (e.g. by inserting a disk), you can use Retry (press R) to complete the operation. Abort, Ignore, and Fail all do basically the same thing - cancel the operation and leave you with no current disk (the prompt will just say >). Switch back to the C drive by typing C:

Your disk in DOS is a hierarchy of directories. Each directory can contain other directories as well as files. All directories on a disk are contained inside the root directory, \.

When working in the command prompt, you have a "current directory". This indicates where you are in the directory heiarchy. The command prompt shows you your current directory and your current drive. For example, when you first start your virtual machine up, the current drive will be C and the current directory will be \. The prompt, therefore, will read:

C:\>

If you were in the "myfiles" directory on drive A, the prompt would read:

A:\myfiles>

To view the contents of the current drive and directory, type 'dir' followed by Enter (from now on, when explaining a DOS command, I won't tell you that you have to explicitly press Enter. You always do though - the Enter key is what tells DOS to actually perform the command).

The dir command can also take switches. Type dir /w to get a columnar view, dir /p to get a paginated view, or dir /w /p (or dir /p /w - the order of switches doesn't matter) to combine the two.

Everything DOS does is relative to the current directory. For example, suppose the root directory on a floppy in drive A contains a directory (a subdirectory) called 'files', containing a file called 'a_file'. If the current directory is the root and the current drive is A, we can display the contents of 'a_file' with the command

type files\a_file

But if the current directory is 'files', then we only have to type

type a_file

And if we're on another drive entirely, we'll need to type

type A:\files\a_file

To change the current directory, type cd, followed by a space and the directory you wish to change to. For example, to change to the directory 'gameprg', you would type cd gameprg - assuming 'gameprg' is a subdirectory of the current directory. To jump back up to the parent directory of a subdirectory, type

cd ..

Typing this while in the root directory has no effect.

DOS has several built-in commands like 'cd' and 'dir' that can be typed anywhere. If DOS doesn't recognize the first "word" of your input as a built-in command, it tries to find a program with that name appended with one of the "extensions" .EXE or .COM in the current directory (i.e. if you type in rhide, it will look for 'rhide.exe' or 'rhide.com'). EXE and COM stand for EXEcutable and COMmand, respectively. If it can't find anything in the current directory, it'll check for a special "environment variable" (basically a DOS setting you can change) called PATH. PATH should contain a list of directories that contain programs that can be run from anywhere. If the program you ask for isn't in the current directory, it'll check each of the directories in the PATH for it. If it can't find it in there, DOS displays an error.

The program we'll be using most often is called RHIDE. The EXE for RHIDE is stored in the C:\DJGPP\BIN directory, and is called rhide.exe. Because C:\DJGPP\BIN is in the PATH variable (you can see this by typing set at the DOS prompt), you can run RHIDE from anywhere - just type rhide. DOS will find rhide.exe in C:\DJGPP\BIN, load it into memory, and give it control of the computer. When you quit RHIDE, it hands control back to DOS.

Optionally, you can ask RHIDE to load a specific file automatically by typing rhide followed by the name of the file you want to load. For instance, if you want to load the file 'main.c' into RHIDE, you'd type

rhide main.c

Here, 'main.c' is what we call a "command-line argument".

The two most helpful keys in RHIDE are F2 to save and Alt+X to quit. Other useful commands are displayed on a banner running across the bottom of the screen.

You can navigate around a file with the usual combination of arrow keys and Home/End/PageUp/PageDown. As you'd expect, typing letters inserts them into the file. Delete and backspace removes characters from a file. F10 opens the main menu bar. Alt+(a menu hot key) opens a specific menu. Arrow keys move around menus. The Enter key activates a menu option. TAB navigates through the various widgets in a window box. Cut, copy, and paste are Shift+Del, Ctrl+Ins, and Shift+Ins, respectively.

Try exploring RHIDE and the various options it presents to you. Look up short cuts in the menu. Navigate different menus and windows. Create a new file, type something up, play around with RHIDE's commands. Experiment. Even if you accidentally screw something up terribly - and that's fairly unlikely - just exit Bochs and replace your virtual hard disk image with a fresh copy (remember to change the FILES and BUFFERS settings again).

Now's the time to get comfy with your editor. We're going to be seeing a lot of it.

Friday, August 6, 2010

Working With RHIDE

Start at the Beginning
Table of Contents

RHIDE is a type of program called an IDE - an Integrated Development Environment. It was written by a fellow named Robert Hoehne - RHIDE stands for Robert Hoehne's IDE, of course.

An IDE is a type of program designed for editing, managing, building, and debugging the source code of large programs. We won't be learning most of RHIDE's features - they're pretty outdated and fairly clumsy, so it's mostly useless knowledge. We'll just use it to edit our files.

To start, we need to change a pair of DOS configuration options. By default, only a very small number of files can be open at any one time in DOS. This can be a problem, particularly when compiling - the compiler ends up opening a lot of files behind the scenes without you knowing. So many files, in fact, that the default DOS limit of 20 isn't enough to compile anything but the simplest program. We'll have to fix it sooner or later, and we might as well do it now and get comfy with RHIDE.

(Of course, I could have done it myself, but I thought this would be a good exercise.)

I'm going to assume you're sitting in the root directory of the C drive. Your DOS prompt should say C:\>, in other words.

You have two options now. You could type rhide fdconfig.sys to start RHIDE and open the fdconfig.sys file automatically - but I'd like to show you a bit more of RHIDE's interface. So just type rhide and press Enter.

An "About" window will pop up. Press Enter to clear it. You should now be looking at an empty RHIDE workspace. There'll be a red dot in the middle of the screen - this is the mouse cursor. Bochs instructs you in the bottom left that holding CTRL and pressing down the third mouse button will enable the mouse - but frankly, I've never gotten the mouse to work right in Bochs. So just ignore it - I'm going to teach you to navigate RHIDE using the keyboard.


At the bottom of the screen is a list of shortcuts, there to remind you of the program's most essential keys. Some of the shortcuts are greyed out because we don't have a file open.

Press F3 to open a file.

You could now directly type in fdconfig.sys - white text on green is "highlighted" in RHIDE, and like in Windows, typing with text highlighted (as it is in the Name box) will replace it. Instead, however, press the TAB key once. Now command.com should be highlighted. You're inside a selection box - press up and down to scroll through it. Select fdconfig.sys and press TAB again. You'll see that the text on the Open button will turn white, meaning it's now highlighted. Press Enter and the file will open.

Navigating and typing in RHIDE should be somewhat intuitive - use the arrow keys, page up and page down, home and end to move around. Type to insert text, Delete and Backspace to get rid of it. You can't copy and paste the way you can in Windows, though - in RHIDE, the keys for cut, copy, and paste are:

CutShift+Del (hold down Shift, then with Shift still pressed, press Delete)
CopyCtrl+Ins
PasteShift+Ins

Next, we'll learn how to use the menu system. There's two ways to open the menus in RHIDE with the keyboard - you can either press Alt, like you can in Windows, or F10. If you press F10, you can navigate the main menu bar with the arrow keys, and press the down arrow or Enter to expand one of the main menus. If you press Alt, you need to press Alt+the red letter of the menu you want to open. For example, if you want to open the Search menu - which we do - you'll notice the S in search is red. So press Alt+S.

The Search menu should open. Press up and down a bit to move through the menu. To perform the highlighted action, press Enter. You'll notice that some menu options have a key combination next to them - this is a shortcut you can type if you want to perform that command without navigating through the menu. The red letters of the menu options let you perform a command without navigating to it using the arrow keys. For instance, pressing F activates the 'Find...' command, even if Find isn't highlighted.

Press 'F' now. We want to find something.

Type FILES into the 'Text To Find' box. Press TAB three times and the 'Origin' radio buttons should light up. Radio buttons let you choose one option from many. Press down to make 'Entire Scope' the selected option, then press Enter. Even though the 'OK' button is not selected, look at how it's coloured differently than the other buttons. This means it's the default button - when you press Enter, even if 'OK' is not selected, RHIDE behaves as though it was. The exception, of course, is when another command button is selected (as opposed to a text box or radio button) - then whatever command is mapped to that button will be executed.

You should now be at the line

!FILES=50

Change this to read

!FILES=200

You can either delete the 50 using the Backspace and Delete keys, or you can highlight it by holding down Shift and moving the cursor over it using the arrow keys. Then press Delete, and all at once it will be deleted.

You'll also need to change the BUFFERS setting to 200. Do this using the same method as we used before.

Hit F2 to save, then Alt+x to exit. You'll need to restart your virtual machine for these changes to take effect - but for now, I recommend just shutting it off. Press Power and take a break. Save the Review for tomorrow.

Wednesday, August 4, 2010

Working With DOS

Start at the Beginning
Table of Contents

DOS (short for Disk Operating System) is the distant ancestor of the modern Windows operating system. When your virtual machine starts up, it'll present you with a prompt that reads C:\>. This means that the current drive is the C drive (the virtual hard drive) and you're currently in the \ or root directory. In general, you'll always work on the C drive, except when I have you load data from a virtual floppy, which will be the A drive - you can switch to it by typing A: and pressing Enter, and back to the C drive by typing C: and pressing Enter. Of course, since you don't have a virtual floppy disk inside your virtual floppy drive, this won't work yet! I'll remind you of how to do this when the time comes.

Like on a modern computer, each disk drive is organized into directories (usually called "folders" these days) which contain files. In order to view the contents of the current directory, type dir and press Enter. If the directory listing is too long to fit on the screen, you can type dir /w (the /w switch is short for 'Wide'), which outputs the listing in three columns. If it's still too long, you can type dir /p (/p for 'Pages', or perhaps 'Paginate'), which will pause outputting the listing when it fills the screen, waiting for you to press a key before it continues. You can also combine the switches (à la dir /w /p) if you're so inclined.

The first thing we're going to do is make a directory to store all our code in. Type in mkdir gameprg and press Enter. This will create a new directory inside the current directory called 'gameprg'. View the directory listing using dir, and observe your new directory.

To change the current directory, you use the cd command. Enter the command cd gameprg and the prompt will change to C:\gameprg>. To go "upwards" into a parent directory, type

cd ..

If you do this inside C:\gameprg, for instance, it'll take you back to C:\.

Whenever you want to stop running Bochs, just hit the power button - in Bochs, not on your real computer! There was no need for a shutdown mechanism back then.