The Digital Palette: Fundamentals of Computer Graphics

by Selby Bateman, Assistant Editor, Features

Your computer screen is a colorful gateway to the world of digitized graphics. But to appreciate all the video magic that's available, you first have to understand the basics. Here's a look at the pixel power behind your computer's video display.

"I remember standing back with everyone else, saying 'There's no way; I'm never going to touch this thing. It's not creative enough,' " says Kari Beims with a laugh. "I took a computer graphics class; it was full of people like me who are in the graphic arts field. And they were petrified."

The "thing" that petrified Beims and her classmates was, of course, a computer; a machine which, when used as a graphics tool, can appear so novel, so daunting, and ultimately so seductive that artists at first exposure may be simultaneously attracted and repelled.

Beims and many others have changed their views about the computer as a graphics machine. An artist at Maximus, Inc., of McLean, Virginia, Beims now uses and helps promote her company's new Visualizer, one of a new breed of graphics software packages for home computers that is as easy to use as it is useful.

"It's a lot of fun," Beims says. "I can do it, and I have no programming experience. I mean, I walked into here knowing nothing about computers."

An Undeniable Attraction

Graphic artists like Beims may be among the most perceptive analysts of how well a computer functions as a graphics tool. And although the polls haven't yet closed, Beims and a growing number of other artists are predicting a landslide in favor of the computer.

"It's getting—I hate to use this term because everybody says it—but it's getting user friendly; it truly is," Beims says. "People are starting to ask graphic artists what they need, and the results are beginning to show up in the computer software and the peripherals. And we need that."

The glow of a computer screen is the first thing that attracts many people to computing. You don't have to know anything about pixels, raster scans, character sets, and RGB monitors to appreciate that something special, something new and powerful is possible when you can decide what appears on a TV screen.

If you want to create colorful, high-resolution graphics for games, business, or art, today's microcomputers have the capabilities to produce almost any image you wish. Peripherals such as light pens, graphics tablets, and touch screens will free you from the restrictions of the keyboard. And graphics software packages are becoming surprisingly easy and powerful tools for designing anything from pie charts to paintings.

You Don't Have To Be A Genius

A 20-year fascination with computer graphics led Joseph Deken to write the text last year for Computer Images: State of the Art, a full-color collection of computer artworks. Deken, an assistant professor of computer sciences and general business at the University of Texas at Austin, uses an Atari 800 and one of the IBM-compatibles at home. He believes you don't have to be a genius to understand and appreciate computer graphics.

"I use graphics to teach about computers in introductory courses at the university," he says. "I'm always concerned with the stereotype that computers just have to do with mathematics. And I'm concerned with how to get students who aren't mathematically inclined interested in computers. Graphics winds up being a good vehicle for that."

An important first step in anyone's computer graphics education is the knowledge that capabilities costing thousands of dollars on mainframes just a few years ago are now available on inexpensive microcomputers. Learning the basics of computer graphics can now be inexpensive, simple, and often fascinating. Once you've picked up a few of the fundamentals, you'll probably appreciate your computer's graphics abilities even more.

Have Gun, Will Travel

Faster than the eye can follow— anywhere from 25 to 60 times a second—an electronic "gun" in your television or video monitor discharges a beam of electrons toward the screen. As the electrons hit a phosphor coating on the inside of the video display, the individual picture elements which make up your screen— called pixels—are lighted. This is a cathode-ray tube, the most common television and microcomputer screen display system.

Rapid-fire painting and repainting of the image on the TV screen is accomplished by the electron gun's repeated drawing of a set number of parallel lines (usually 525) from left to right and from top to bottom. This technique, known as a raster scan, occurs continuously and so rapidly that images appear to move smoothly across the screen.

The creation of characters and shapes on your computer screen is similar to the effects produced when thousands of college football fans use flip cards to spell messages of team support from the stands. The densely packed pixels flip either on or off, and from color to color, in response to directions from the computer. The more pixels, the higher the quality, or resolution, of the screen image.

A monochrome, or single-color, video display uses one electron gun. Red-green-blue (RGB) monitors use three electron guns, resulting in a higher resolution than the composite video you're used to seeing on a color television set.

Characters, Grids, And Turtles

There are several ways to create graphic images on a computer screen. First, you can make use of the alphanumeric characters— letters and numbers—built into the ROM (Read Only Memory) of your system. Many microcomputers, such as the Commodore 64 and VIC-20, have a parallel set of graphics characters— various lines, curves, and boxes—built into permanent memory. Using them as building blocks, you can combine characters into a variety of figures. A more time-consuming, but flexible method for creating graphics is to manipulate the individual pixels. You tell the computer which pixels you want lighted and in what colors by communicating with it in a language, such as BASIC. In a personal computer which has a high resolution of, say, 320 x 200 pixels, there are 64,000 graphic points which you can potentially control. Locations in your computer's memory literally form a video map of what you can address on the screen.

(For more information on actually creating color graphics on your computer, see COMPUTE!'s First Book of Atari Graphics, COMPUTEl's First Book of Commodore 64 Sound and Graphics, and other COMPUTE! books.)

Turtle graphics is a third way of producing images on your screen. Based on the Logo programming language, turtle graphics helps to teach programming and geometric principles. A small triangle on the screen— the imaginary turtle—can be directed to move about the screen, leaving an image in its wake. Intricate patterns can be achieved through this simple, but subtly powerful graphics language system.

To Mimic More Closely

As microcomputers become more sophisticated graphics machines, a similar process is occurring with the devices used to draw and paint images on the computer screen. The graphics software now available relies more and more on such peripheral devices as joysticks, light pens, graphics tablets, touch screens, and mice (defined below).

These peripherals fall into three basic price ranges, according to research conducted by Koala Technologies, producer of the KoalaPad Touch Tablet and the Gibson Light Pen. You can find game paddles and most joysticks from $15 to $30; trackballs, mice, graphics tablets, and better light pens from $30 to $400; and precision tablets, called digitizers, from $400 on up. (See "Light Pens And Graphics Tablets" and "A Graphics Glossary," both in this issue.)

All of these devices attempt to mimic more closely the actual procedure of drawing or painting on a flat surface, as opposed to the more indirect, less satisfactory process of typing in graphics commands on a keyboard. Often, a joystick, light pen, or graphics tablet may be used in conjunction with keyboard commands to produce lines, boxes, circles, rays, points, and various fill patterns.

Other commands allow you to transpose and merge images, lock onto and move parts of a picture, magnify sections of an image for more detailed work, save pictures for later use, and select or change colors.

For Atari And Commodore

Kari Beims says that a mouse—a hand-controlled device which rolls on a flat surface to move the screen cursor—is the most successful device for creating graphics. "It's closer to the kind of tools you're used to working with. With a joystick or a light pen, it's a little different. The mouse lets you work flat-on; you've got more control. And it's closer to the actual production work you've done before," she says.

Software companies are exploring all types of input devices in order to give users the right mix of creative flexibility and control. The newer packages offer more options, and a greater number of practical applications as well. One such product is the Visualizer graphics animation package introduced by Maximus, Inc., atSoftcon, the international conference and trade fair of the software industry, held recently in New Orleans. Available now for the Atari computer with at least 48K and disk drive, the $49.95 package should be ready for the Commodore 64 in May.

"The goal with Visualizer was to create a graphics program completely for the nonprogrammer, which would be useful besides just being a creative outlet," says Beims. "The Visualizer gives you the option, in addition to creating slides, of adding animation effects and putting together a slide show using up to 26 screens.

Synchronizing Slides And Sound

"You can synchronize them with an audio track so that you've got a customized audiovisual presentation. You can move the slides ahead manually, or use a timer through the computer," she says. "In addition to being a graphics program, it's useful. You can use it for teaching, training, business and sales presentations, retail advertising, and instructional lessons for the kids at home."

The package uses automatic drawing functions for circles, ovals, boxes, borders, and diagonals, and has 18 different text style options that can be used with graphics. The slides you create can be printed in black and white with an Epson MX (with Graftrax), FX, or RX series printer, or with a C. Itoh (NEC, Prowriter, or other) printer. A joystick is used for drawing, with a variety of colors and brush sizes available.

Two more recent graphics software products which combine usefulness with ease of use are The Graphics Magician (on disk for Apple, Atari, and Commodore at $59.95 and for IBM by the end of 1984) and The Complete Graphics System (on disk for Apple at $79.95), both from Penguin Software.

"With The Complete Graphics System, I basically wanted to set up an all-in-one tool for people to use to create computer graphics," says Mark Pelczarski, founder and president of Penguin Software.

Hundreds Of Colors And 3-D Too

The package is compatible with most input devices, and allows three-dimensional line drawings to be reproduced on a variety of plotters. There are over 100 available colors and 96 brushes. Portions of any individual screen may be magnified from two to eight times for easier manipulation of pixels. And text may be added with graphics in a variety of ways.

Penguin also sells several programs which can be used in conjunction with The Complete Graphics System. Additional Type Sets ($19.95) provides 50 extra typefaces and character sets. Map Pack ($19.95) includes outline maps of all 50 states, the continents, the U.S., and Canadian provinces. Transitions ($49.95) is a presentation system which will let you organize picture disks and turn them into slide shows. More than 35 different screen wipes are available. That is, you may clear the screen from top, bottom, left, or right sides; use geometric-pattern clearing techniques and windshield wiper effects, among others. Finally. Paper Graphics ($49.95) is a utility that will let you print any high-resolution graphics screen to your printer.

"The Graphics Magician software is actually two different sets of programs. One is a drawing program geared toward people who are going to use it in [creating] other software—like educational software," says Pelczarski. "There's a huge amount of educational software out there that's been done using The Graphics Magician."

The Graphics Magician uses machine language animation routines with the same techniques that are used on arcade games. Up to 32 independent objects can be assembled in the animating process. The package also includes a high-resolution picture/object builder, which lets you store hundreds of color pictures on a single disk. More than 100 colors are available for use as well.

Screens A La Mode

Almost all of the top-selling microcomputers have extensive graphics capabilities, but you'll want to spend some time learning your own machine's features. The Apple IIe, for example, has a high-resolution mode with six colors and 280 pixels horizontally by 192 pixels vertically. There is also a 40 x 48-pixel low-resolution mode with 16 colors. Apple's new Macintosh, which uses a monochrome display, has a whopping 512 x 342-pixel resolution. Obviously, very fine graphic detail is possible with this many pixels.

The Commodore 64 has 16 colors, several modes—including a 320 x 200 graphics mode— and eight independently programmable sprites (24 x 21-pixel movable screen objects), which allow you more opportunities to create animation. The VIC-20 also has 16 colors and a graphics resolution of 176 x 184.

The Atari 600XL and 800XL each have 320 x 192 graphics resolutions, as well as 256 colors (16 colors with 16 luminance levels for each color). But the Ataris also have 11 different graphics modes, or varying combinations of colors and pixel densities, which extend its graphics capabilities.

PC Pixels

IBM's PC and PCjr each have the same 320 x 200-pixel, four-color, high-resolution graphics mode, as well as the same 640 x 200, two-color mode. But the PCjr also has three other graphics modes that the PC doesn't: a 160 x 200, 16-color, medium-resolution mode; a 320 x 200,16-color, high-resolution mode; and a 640 x 200, four-color, high-resolution mode.

Professional quality computer graphics systems may start at about a 600 x 500-pixel resolution and go up from there. Color choices and luminance levels can go into the millions. Three-dimensional perspectives and complex simulations of actual processes, such as flying an airplane, are among the complex —and costly— features of some mainframe and mini computers.

A Child's Garden Of Graphics

Two programs by Scarborough Systems, Inc., make use of the computer's ability to create dynamic graphic images in a manner easy enough for a child to accomplish.

Picturewriter, by Dr. George Brackett, is an educational drawing program for children from 4 to 14 years of age, which Scarborough markets for the Apple computers at $39.95 suggested retail price. Its origins, says Brackett, are in work he did teaching children about the Logo programming language. When he asked a little girl one day what she wanted to draw, she suggested a rainbow—not the easiest of images to produce via Logo.

"So I began to think about what kind of program I would like to have that would make it easy for children to draw a rainbow," he says. "And it was pretty clear that it had to have a pointing device, like a joystick, rather than a keyboard. I also felt it had to have fairly extensive editing capabilities."

As children use Picture-writer, they can learn about spatial and color relationships, the development of geometric patterns, and the basics of computer programming at the same time that they're creating colorful pictures. A selection of preprogrammed works allow the child to alter the designs and colors as well.

Patterns For Apple, Commodore, And IBM

Another program, which Scarborough demonstrated at the recent Softcon show, is Patternmaker, a drawing and pattern-creating program for children six years and older and for adults. The package is scheduled to be available in May for Apple computers and by August for Commodore 64 and IBM machines, at a suggested price of $39.95.

"Its educational value is that it gets children comfortable with symmetry, rotations, transformations, inversions, and so on," says Scarborough President Francis Pandolfi. "It makes it easy for them to use those concepts to make beautiful patterns. Symmetry is a very important concept in many areas of science, not to mention art. And the program's manual brings the child through all areas of art in which symmetry has been important."

As you'll quickly find out when studying what's available for microcomputer graphics, the products are coming fast and furious. Softron, Inc., for example, makes a Home Decorator program ($34.95 for Commodore 64; other versions planned soon) that teaches about colors, furniture layout, and decorating theory for your home and office. The package even lets you select carpeting, paint walls, and move furniture.

The Age Of Discovery

Other programs, like Access Software's Spritemaster ($34.95 for Commodore 64) and Avant-Garde's StarSprite series (for Apple computers), show you how to produce sprites for use in multicolor animation.

There are literally hundreds of other graphics programs currently available. And there are numerous books and magazines which will teach you how to create your own colorful graphics.

"I think more and more people are discovering the graphics capabilities of computers," says Mark Pelczarski. "In the last couple of years, we've learned how to make software more easily understood. And with computers like the Commodore and the Atari really hitting the mass market, a lot of people who never would have dreamed of having a computer five years ago are learning about all the capabilities."

A Graphics Glossary

ASCII: (Pronounced askey) American Standard Code for Information Interchange. A standard code used in microcomputers to represent alphanumeric information (letters, numbers, and symbols). The capital letter A, for example, is represented in ASCII code by the number 65.

bitmap graphics: A high-resolution graphics plotting technique by which pixels (picture elements) on a computer screen are turned on and off.

CAD: Computer-aided design. The use of computer graphics to help in design development and modification, often eliminating the need to create costly or dangerous prototypes. CAD is usually associated with CAM, or computer-aided manufacturing.

character graphics: The text characters that appear on your computer screen when it is turned on, including letters, numbers, symbols, and punctuation marks.

CRT: Cathode-ray tube. A video display terminal, such as a television or video monitor, which uses a beam of electron particles to draw images on a screen's phosphor coating. The electron beam can write on the screen with a single beam or, more commonly, in a series of parallel lines to form an image. (See raster scan and vector scan.)

electron gun: The mechanism within a CRT which shoots a narrow beam of electrons at the screen, creating images. The beam is constantly redrawing the screen at speeds usually ranging from 25 to 60 times a second. Monochrome (single-color) displays use one electron gun. Red-green-blue (RGB) displays use three-separate guns (one for each color), and have a higher resolution than the composite color displays found on television sets.

fractals: Geometric patterns which, when repeated, can create new patterns seemingly unrelated to the original forms. Especially useful in computer generation of detailed maps and duplication of the intricacies of many natural objects.

graphics set: The complete set of graphics characters that a computer can display.

graphics tablet: A pad, usually square or rectangular, on which the X and Y coordinates of the computer screen can be plotted by the use of a stylus, or, on some models, your finger, allowing you to create graphic images.

icons: Graphic symbols, most often used as visual representations of computer software options and procedures. For example, a paintbrush icon would represent the painting option in a graphics software package. Similarly, a trash can icon might indicate a delete option.

image processing: Computer enhancement and alteration of photographs and other graphic images by digitizing a picture into pixels, each of which is then measured for light and color intensity. The pixels can subsequently be manipulated to change the image.

light pen: A stylus which emits low-level electrical pulses and, when pulled across a computer screen, creates an image. Most often used in creating graphics and in interacting with software menu options.

Logo: An easy-to-use, graphics-oriented programming language originally developed to help children learn programming and the concepts of geometry.

mouse: A small hand-controlled device which rolls on a flat surface, allowing you to control the screen cursor, draw graphic images, and select from menu options.

phosphor coating: The coating inside a CRT that glows when struck by a beam of electrons. A computer activates an electron gun to draw and redraw graphic images at high speed on the coating, thus producing graphics that appear to move smoothly across the screen.

pixel: Picture element. The smallest graphic point addressable by a computer. Pixels are turned on or off to form the characters and graphic images on a computer screen.

raster scan: A video picture drawn by an electron gun which sweeps horizontally across the screen in a series of parallel lines at a high rate of speed. The most common method by which a microcomputer system displays a screen image.

resolution: The clarity of a video image based on the number of pixels available on the display screen. The more pixels there are, the higher the resolution and the more detailed the screen image.

RGB monitor: Red-green-blue monitor. A high-resolution color monitor which uses three electron guns to produce very clear and crisp images. By comparison, a color television would normally have a composite color video system in which the three primary colors would be blended, producing a lower quality video display.

simulation: Computer graphics created to model reality in appearance and usually in performance. Numerous airline companies, for example, use computer-generated flight simulations to help train their personnel.

sprite graphics: Sometimes called movable object blocks (MOBs), sprites are programmable graphics characters that can move around the screen independent of the primary screen image, the background.

touch screen: A video screen or plastic screen overlay which allows you to draw, write, and make menu selections from the screen at the touch of a finger or stylus.

turtle graphics: Closely associated with the Logo programming language, the turtle graphics system is most often used in an educational context, especially in teaching children about computer programming and geometric shapes. A triangular screen cursor (the turtle) moves across the face of a display monitor in response to directions entered into a computer, allowing the user to program a wide variety of geometric graphic images.

vector scan: A video picture drawn by the focused beam of an electron gun, much like a pencil's movement across a piece of paper. This produces a slower, but higher quality, video image than the parallel-line technique of a raster scan.

video chip: A tiny microprocessor on a silicon chip which handles the video data within a computer, assisting the central processing unit (CPU) by managing the screen image.