8.1 Computer Graphics

Computer graphics programming is a specialty within computer science, and it has its own journals and conferences and laboratories. It encompasses just about everything you can see on a computer, from the fonts with which letters are drawn (both on the screen, and when computer typeset and printed like this book), to elaborate images, animation, and the special effects in movies.

Computer graphics images are represented as data in the computer; they're usually organized in files, one per image, although they can also be stored in a computer program's memory, as I did when storing the graphics for the Restrictionmap.pm module in a scalar variable. Some kinds of animation store several images in one file, but I won't cover those kinds of image files here.

For the purposes of this chapter, we won't be digging into the details of how graphics files are designed; that level of detail isn't possible in a single chapter. Here, I'll just discuss the very basic information you need to get started generating and displaying images for your web site. I'm going to show you some easy (and inexpensive) ways to generate graphics, enough to set your feet on the right path . The modules I use have methods that handle the details of reading and writing the different file formats, so you can simply use the methods and ignore the details of the formats themselves .

8.1.1 Basic Graphics Concepts

There are two things you need for computer graphics: a program to create a graphics file and the correct software and hardware to display the image. These days, digital photography may be the source of digital images, or a printed image may be entered into digital format by a scanning device. As computer technology has developed, many graphics display devices and file formats have seen some use and then virtually disappeared as they are supplanted by other systems. ^[1] However, even though there are many file formats that are currently in use, a few standard formats are widely known and can be displayed by most graphics display programs. The PNG and JPEG files I use here are very commonly known.

^[1] One of my first programming jobs was to write vector graphics for a Tektronix oscilloscope display. Vector graphics are specified by endpoints of lines. Although such graphic programs are still in use, they are almost always converted to raster graphics for display these days. The same year, I wrote a large graphics program to write and play computer music on a Blit terminal ”a raster graphics display that was the first to have modern-style simultaneously updated windows . Both systems have faded away, but the software they were written in was ported to other display devices.

Although I won't go into any detail about graphics file formats, there are a few basic facts you need to understand because you'll be asked to specify some of these parameters when you use a graphics library (such as GD.pm ). For instance, in the Perl code that follows , you'll see a method colorAllocate that specifies and enters a color into a color table. The few short comments that follow in this section are meant to introduce these, and other common terms, and to give brief definitions.

These days the standard graphics formats are mostly some variation of a raster image , in which a rectangular image is described by a two-dimensional matrix of pixel values. A pixel (short for "picture element") is one glowing dot on your computer screen. These values can be represented in different ways, from a simple 1 or 0 representing black or white (called a bitmap ), to a number representing various shades of grey, to various color image schemes. A computer display may have different numbers of pixels overall; for instance, the one I'm working on now has 1024 horizontal and 768 vertical rows. Displays (or printers) are also rated by how closely packed the pixels are, usually by saying they have so many DPI or dots per inch.

Colors are typically represented in one of three ways:

RGB

Colors might be represented in the RGB fashion by three numbers indicating the values for the primary colors red, green, and blue. All colors can be formed by mixing these values in different quantities . A typical standard is 24-bit color , also called truecolor , in which each of the three primary colors is represented by an 8-bit value (256 possible values per primary color) for a total of over 16 million colors. This is well in excess of the 7 million colors most humans can distinguish, and as a result, a 24-bit color scheme is very popular, although many computer displays can handle only a smaller number of colors.

Color table

Colors are also sometimes represented by a color table (also known as a palette), which uses 8 bits per color at each pixel, and uses the values as an index into a 256-slot table for a total of 256 colors. In this way, the image itself only needs to have 8 bits per color, instead of 24 bits, so the image can be much smaller as data. The drawback, of course, is that there are only 256 possible colors instead of 16 million; also, an image needs a color table in addition to the pixel values. Still, this scheme works quite well and is frequently used. Many computers give you the option of displaying using a color table or using truecolor.

CMYK

The third popular way to represent colors is the CMYK color space, a subtractive color scheme used mainly in high-quality printing. The name CMYK comes from the colors cyan, magenta , yellow, and black, which can be combined to represent the range of colors, similar to the way that RGB does. I won't discuss this scheme further here.

8.1.2 Graphics and File Formats

I'm going to generate two kinds of graphics files in this chapter, PNG and JPEG. There are also many different file formats for computer graphics. Some of these different formats amount to little more than trivial variations in the header section of the files; others represent quite different ways of storing and displaying images on a computer screen.

PNG

Portable Network Graphic is a raster format that has become especially popular since the late 1990s when legal problems arose with the use of the very widely used GIF format. PNG can be used to create indexed color images (via the color table mentioned before) or to create 24-bit truecolor images. Because it does not perform compression on the image data, PNG is good for saving large images such as photographs because none of the photographic data is lost saving it in PNG format. But because images like photographs tend to be fairly large, and hence slow to display over the Web, PNG is best used for generating and displaying simpler graphics.

JPEG

Joint Photographic Experts Group is a popular format for displaying images, especially such large images as photographs. JPEG performs data compression, and although some of the picture quality is lost, the result is usually a good quality photographic image that is much smaller than the uncompressed original image. This has led to JPEG being widely adopted on the Web, where smaller picture sizes can dramatically improve the time it takes to download and display an image. (Displaying a JPEG image also requires decoding the compression, but that is a fairly fast operation on modern computers compared with the time it often takes to download a file.) However, the drawback to JPEG is exactly the same as its advantage: the compression. If you have a JPEG image, and want to do some editing of the digital image, you have to decode the image to perform the edits and then recompress it. But once an image is compressed, some of the original image data is lost. This compression/ decompression will cause the loss of image data to become more apparent; several cycles of it can result in a noticeably poorer quality image. So it's best to save the original image in a noncompressed format, which can undergo editing without major loss of quality, and then create JPEG images directly from an uncompressed version.

GIF

An older file format which was standard on the Web and is still widespread, GIF (Graphic Interchange Format), has fallen afoul of some proprietary licensing issues; most Perl programmers have shifted to the similar PNG format which is in the public domain.