Elementary Computer Graphics: Drawing with Pixels

Editor's Note -- If you have a promising young programmer in the family, you might want to take advantage of the extra time together during the holidays to teach a little programming. Michael Norton wrote this tutorial for his fourth grade son, and offers it to Mac DevCenter readers and their children. In just seven easy lessons your child can program a fun drawing program ... and I'm sure that will be just the beginning.

Greetings future game developers, and welcome to Elementary Computer Graphics. The elementary I am referring to is elementary school. My son Matt, who is in fourth grade, asked me one evening to teach him how to program video games. I was excited to take on the task but at the same time I realized I had to discuss what I knew on an elementary school level. After several months of thinking and dragging Word documents to the trash, I arrived at some simple explanations. So here goes.

To truly understand computer graphics requires years of studying mathematics. Does this mean that you can't begin to tackle the concepts of computer graphics? I believe the answer to that is No. We will, however, need to cover some simple math principles that will be useful in learning about computer graphics. But just enough to get the job done.

Some Supplies for the First Day of Class

My first choice for teaching computer graphics was Real Basic. However, the price of Real Basic exceeded Matt's allowance and my monthly lunch budget. So fasting for a month wouldn't get him a development system. I decided to fall back on the old, tried-and-true (and FREE) Tcl interpreter. Tcl is available for every operating system under the sun (including, but no pun intended). You or your parents can download Tcl from this web site Macintosh OS X Aqua Tcl. If you are using an Intel platform or other please download from http://www.tcl.tk.

The discussions of Elementary Computer Graphics are broken down into seven lesson modules. The lesson modules include the introductory discussion, a figure <picture> showing the runtime execution and a section at the end, titled, The Script:. This portion of the lesson is most beneficial if you have the Tcl Wish Shell open. Cut and paste the scripts into the console. You should master each script module and then move on. So this may take a few evenings. Let's get started.

Lesson 1: Graphics Coordinates

Since I will be doing my best to avoid all the ugly math involved, we'll need to meet on some common ground. Everybody has played the game Tic-Tac-Toe, right? Where you're the X player and your opponent is O. The object is to get your Xs three in a row, up or down or diagonally (see Figure 1).

What has Tic-Tac-Toe got to do with computer graphics? Ah, I am so glad you asked. The game Tic-Tac-Toe is played on a simple grid. Graphics on a computer are drawn on a similar grid.

The game of Tic-Tac-Toe is played on a grid that is 3 squares wide and 3 squares high. If we were to explain the Tic-Tac-Toe grid in computer graphics terms, we would say the Tic-Tac-Toe grid has a width of 3 and a height of 3. The number of grids available are calculated using your third grade multiplication skills. Multiply the width of 3 times the height of 3. The multiplication of 3 x 3 gives us the value of 9. This value in computer graphics has a special meaning. It is called the resolution. Our resolution of the game grid is 3 x 3. Speaking like a computer programmer you would say the resolution is 3 by 3 instead of 3 times 3.

Now let's take this one step further and pretend we are teaching the computer to play Tic-Tac-Toe. The computer can't eyeball the grid and draw its O move as we can. We must break up the grid into terms the computer can understand. A computer only understands numbers. For starters, remember the number line from second grade math? Let's look at it in slightly different way for this purpose (see Figure 2).

Taking the top 3 blocks of the Tic-Tac-Toe grid, I have created a number line. The smallest number is on the left and the numbers get larger as we move to the right. The values in the blocks are called coordinates. Moving from left to right in the grid, use the coordinates of 0, 1, and 2. Since we use these coordinates to move left to right, we call these x coordinates, which has a special meaning for the computer. The x coordinates tell the computer how to move across the screen. This is good enough for the computer if the Tic-Tac-Toe grid only has 3 blocks.

Tic-Tac-Toe has a 3 x 3 (say 3 by 3) grid, so we also need to tell the computer how to move up and down. Figure 3 shows how this is done.

We take the left column of blocks and create a grid, as shown. The top left block is the first block with a value of 0. As you move down the block the numbers get bigger. When we go up and down in this grid we use y coordinates. The y coordinates tell us how we go up and down. The farther you move down from the top the bigger the number. In this case, the Tic-Tac-Toe grid is only 3 blocks high, where the y coordinate of 0 is the top and the y coordinate of 2 is the bottom of the grid.

This x-y (pronounced xy) coordinate system allows us to map out the Tic-Tac-Toe grid so we can make a map for the computer to use. The map is shown in Figure 4.

Now let's tell the computer how to use our Tic-Tac-Toe grid. The very top left block has an x-coordinate of 0 (red) and a y-coordinate of 0 (blue). This is a very special block because we will always start our grid walks from this block. This block is called the origin. A computer graphics display also has an origin in the top left corner of its display.

We are explaining the Tic-Tac-Toe game in terms the computer can understand. You are player one and you want to place your X in the center grid. To place your X in the center you need to speak to the computer in its language. You tell the computer to walk left from the origin block by one step. The value of our x-coordinate is 1. Place a finger from your right hand on the red number 1 on the top of the block. This is your x-coordinate. Place a finger from your left hand on the blue number 1 on the side grid. This is your y-coordinate. Now draw both fingers in to the center of the grid. There is a red 1 for the x-coordinate in this box and a blue 1 for the y-coordinate.

The computer says, "AH! You want to draw an X at coordinates, x=1, y=1. I'll draw the X in for you."

Now the computer takes its turn and places an O in the top right corner of the grid. Do you know what coordinates the computer used? Put a finger from your right hand on the red 2 above the grid. This is right above the upper right block. Now place a finger from your left hand on the blue 0 on the left hand side of the grid. Trace with your left finger to the top right block. The computer put its O at location x=2, y=0, as shown in Figure 5.