Section 1.1
Vector Graphics and Raster Graphics
Computer graphics can be divided broadly into two kinds: vector graphics and raster graphics. In both cases, the idea is to represent an image. The difference is in how the image is represented.
An image that is presented on the computer screen is made up of pixels. The screen consists of a rectangular grid of pixels, arranged in rows and columns. The pixels are small enough that they are not easy to see individually, unless you look rather closely. At a given time, each pixel can show only one color. Most screens these days use 24-bit color, where a color can be specified by three 8-bit numbers, giving the levels of red, green, and blue in the color. Other formats are possible, such as grayscale, where a color is given by one number that specifies the level of gray on a black-to-white scale, or even monochrome, where there is a single bit per pixel that tells whether the pixel is on or off. In any case, the color values for all the pixels on the screen are stored in a large block of memory known as a frame buffer. Changing the image on the screen requires changing all the color values in the frame buffer. The screen is redrawn many times per second, so almost immediately after the color values are changed in the frame buffer, the colors of the pixels on the screen will be changed to match, and the displayed image will change.
A computer screen used in this way is the basic model of raster graphics. The term "raster" technically refers to the mechanism used on older vacuum tube computer monitors: An electron beam would move along the rows of pixels, making them glow. The beam could be moved across the screen by powerful magnets that would deflect the path of the electrons. The stronger the beam, the brighter the glow of the pixel, so the brightness of the pixels could be controlled by modulating the intensity of the electron beam. The color values stored in the frame buffer were used to determine the intensity of the electron beam. (For a color screen, each pixel had a red dot, a green dot, and a blue dot, which were separately illuminated by the beam.)
A modern flat-screen computer monitor is not a raster in the same sense. There is no moving electron beam. The mechanism that controls the colors of the pixels is different for different types of screen. But the screen is still made up of pixels, and the color values for all the pixels are still stored in a frame buffer. The idea of an image consisting of a grid of pixels, with numerical color values for each pixel, defines raster graphics.
Although images on the computer screen are represented using pixels, specifying individual pixel colors is not always the best way to create an image. Another way to create an image is to specify the basic geometric shapes that it contains, shapes such as lines, circles, triangles, and rectangles. This is the idea that defines vector graphics: represent an image as a list of the geometric shapes that it contains. To make things more interesting, the shapes can have attributes, such as the thickness of a line or the color that fills a rectangle. Of course, not every image can be composed from simple geometric shapes. This approach certainly wouldn't work for a picture of a beautiful sunset (or for most any other photographic image). However, it works well for many types of images, such as architectural blueprints and scientific illustrations.
In fact, early in the history of computing, vector graphics were even used directly on computer screens. When the first graphical computer displays were developed, raster displays were too slow and expensive to be practical. Fortunately, it was possible to use vacuum tube technology in another way: The electron beam could be made to directly draw a line on the screen, simply by sweeping the beam along that line. A vector graphics display would store a display list of lines that should appear on the screen. Since a point on the screen would glow only very briefly after being illuminated by the electron beam, the graphics display would go through the display list over and over, continually redrawing all the lines on the list. To change the image, it would only be necessary to change the contents of the display list. Of course, if the display list became too long, the image would start to flicker because a line would have a chance to visibly fade before its next turn to be redrawn.
But here is the point: For an image that can be specified as a reasonably small number of geometric shapes, the amount of information needed to represent the image is much smaller using a vector representation than using a raster representation. Consider an image made up of one thousand line segments. For a vector representation of the image, you only need to store the coordinates of two thousand points, the endpoints of the lines. This would take up only a few kilobytes of memory. To store the image in a frame buffer for a raster display would require much more memory, even for a monochrome display. Similarly, a vector display could draw the lines on the screen more quickly than a raster display could copy the the same image from the frame buffer to the screen. (As soon as raster displays became fast and inexpensive, however, they quickly displaced vector displays because of their ability to display all types of images reasonably well.)
The divide between raster graphics and vector graphics persists in several areas of computer graphics. For example, it can be seen in a division between two categories of programs that can be used to create images: painting programs and drawing programs. In a painting program, the image is represented as a grid of pixels, and the user creates an image by assigning colors to pixels. This might be done by using a "drawing tool" that acts like a painter's brush, or even by tools that draw geometric shapes such as lines or rectangles, but the point is to color the individual pixels, and it is only the pixel colors that are saved. To make this clearer, suppose that you use a painting program to draw a house, then draw a tree in front of the house. If you then erase the tree, you'll only reveal a blank canvas, not a house. In fact, the image never really contained a "house" at all -- only individually colored pixels that the viewer might perceive as making up a picture of a house.
In a drawing program, the user creates an image by adding geometric shapes, and the image is represented as a list of those shapes. If you place a house shape (or collection of shapes making up a house) in the image, and you then place a tree shape on top of the house, the house is still there, since it is stored in the list of shapes that the image contains. If you delete the tree, the house will still be in the image, just as it was before you added the tree. Furthermore, you should be able to select any of the shapes in the image and move it or change its size, so drawing programs offer a rich set of editing operations that are not possible in painting programs. (The reverse, however, is also true.)
A practical program for image creation and editing might combine elements of painting and drawing, although one or the other is usually dominant. For example, a drawing program might allow the user to include a raster-type image, treating it as one shape. A painting program might let the user create "layers," which are separate images that can be layered one on top of another to create the final image. The layers can then be manipulated much like the shapes in a drawing program (so that you could keep both your house and your tree, even if in the image the house is in back of the tree).
Two well-known graphics programs are Adobe Photoshop and Adobe Illustrator. Photoshop is in the category of painting programs, while Illustrator is more of a drawing program. In the world of free software, the GNU image-processing program, Gimp is a good alternative to Photoshop, while Inkscape is a reasonably capable free drawing program.
The divide between raster and vector graphics also appears in the field of graphics file formats. There are many ways to represent an image as data stored in a file. If the original image is to be recovered from the bits stored in the file, the representation must follow some exact, known specification. Such a specification is called a graphics file format. Some popular graphics file formats include GIF, PNG, JPEG, and SVG. Most images used on the Web are GIF, PNG, or JPEG, and some web browsers also have support for SVG images.
GIF, PNG, and JPEG are basically raster graphics formats; an image is specified by storing a color value for each pixel. The amount of data necessary to represent an image in this way can be quite large. However, the data usually contains a lot of redundancy, and the data can be compressed to reduce its size. GIF and PNG use lossless data compression, which means that the original image can be recovered perfectly from the compressed data. (GIF is an older file format, which has largely been superseded by PNG, but you can still find GIF images on the web.)
JPEG uses a lossy data compression algorithm, which means that the image that is recovered from a JPEG image is not exactly the same as the original image -- some information has been lost. This might not sound like a good idea, but in fact the difference is often not very noticeable, and using lossy compression usually permits a greater reduction in the size of the compressed data. JPEG generally works well for photographic images, but not as well for images that have sharp edges between different colors. It is especially bad for line drawings and images that contain text; PNG is the preferred format for such images.
SVG is fundamentally a vector graphics format (although SVG images can contain raster images). SVG is actually an XML-based language for describing two-dimensional vector graphics images. "SVG" stands for "Scalable Vector Graphics," and the term "scalable" indicates one of the advantages of vector graphics: There is no loss of quality when the size of the image is increased. A line between two points can be drawn at any scale, and it is still the same perfect geometric line. If you try to greatly increase the size of a raster image, on the other hand, you will find that you don't have enough color values for all the pixels in the new image; each pixel in the original image will cover a rectangle of images in the scaled image, and you will get large visible blocks of uniform color. The scalable nature of SVG images make them a good choice for web browsers and for graphical elements on your computer's desktop. And indeed, some desktop environments are now using SVG images for their desktop icons.
When we turn to 3D graphics, the most common techniques are more similar to vector graphics than to raster graphics. That is, images are fundamentally composed out of geometric shapes. Or, rather, a "model" of a three-dimensional scene is built from geometric shapes, and the image is obtained by "projecting" the model onto a two-dimensional viewing surface. The three-dimensional analog of raster graphics is used occasionally: A region in space is divided into small cubes called voxels, and color values are stored for each voxel. However, the amount of data can be immense and is wasted to a great extent, since we generally only see the surfaces of objects, and not their interiors, in any case. Much more common is to combine two-dimensional raster graphics with three-dimensional geometry: A two-dimensional image can be projected onto the surface of a three-dimensional object. An image used in this way is referred as a texture.
Both Java and OpenGL have support for both vector-type graphics and raster-type graphics in two dimensions. In this course, we will generally be working with geometry rather than pixels, but you will need to know something about both. In the rest of this chapter, we will be looking at Java's built-in support for two-dimensional graphics.