The main focus of this book is three-dimensional (3D) graphics,where most of the work goes into producing a 3D model of a scene.But ultimately, in almost all cases, the end result of a computergraphics project is a two-dimensional image. And of course,the direct production and manipulation of 2D images is an importanttopic in its own right. Furthermore, a lot of ideas carry overfrom two dimensions to three. So, it makes sense to startwith graphics in 2D.
An image that is presented on the computer screen is made up ofpixels. The screenconsists of a rectangular grid of pixels, arranged in rows and columns. The pixels are small enough thatthey are not easy to see individually. In fact, for many very high-resolution displays, they becomeessentially invisible. At a given time, each pixel canshow only one color. Most screens these days use 24-bit color, wherea color can be specified by three 8-bit numbers, giving the levels of red, green, and blue in the color.Any color that can be shown on the screen is made up of some combination of these three "primary" colors.Other formats are possible, such asgrayscale, where each pixel is some shade of grayand the pixel color is given by one number that specifies the level of gray on a black-to-white scale.Typically, 256 shades of gray are used.Early computer screens usedindexed color, where only a small set of colors, usually16 or 256, could be displayed. For an indexed color display, there is a numbered list of possible colors,and the color of a pixel is specified by an integer giving the position of the color in the list.
In any case, the color values for all the pixels on the screen are stored in a large block of memoryknown as aframe buffer. Changing the image on the screen requires changingcolor values that are stored in the frame buffer. The screen is redrawn many times per second, so that almost immediatelyafter the color values are changed in the frame buffer, the colors of the pixels on the screen willbe changed to match, and the displayed image will change.
A computer screen used in this way is the basic model ofraster graphics. The term "raster" technicallyrefers to the mechanism used on older vacuum tube computer monitors: An electron beam would move alongthe rows of pixels, making them glow. The beam was movedacross 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 ofthe pixels could be controlled by modulating the intensity of the electron beam. The color valuesstored in the frame buffer were used to determine the intensity of the electron beam. (For a colorscreen, each pixel had a red dot, a green dot, and a blue dot, which were separately illuminated bythe beam.)
A modern flat-screen computer monitor is not a raster in the same sense. There is no movingelectron beam. The mechanism that controls the colors of the pixels is different for differenttypes of screen. But the screen is still made up of pixels, and the color values for all thepixels are still stored in a frame buffer. The idea of an image consisting of a grid ofpixels, with numerical color values for each pixel, defines raster graphics.
Although images on the computer screen are represented using pixels, specifying individualpixel colors is not always the best way to create an image. Another wayis to specify the basic geometric objects that it contains, shapes such as lines, circles,triangles, and rectangles. This is the idea that definesvector graphics: Represent animage as a list of the geometric shapes that it contains. To make things more interesting,the shapes can haveattributes, such as the thickness of a line or thecolor that fills a rectangle. Of course, not every image can be composed from simplegeometric 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 ofimages, such as architectural blueprints and scientific illustrations.
In fact, early in the history of computing, vector graphics was even used directly oncomputer screens. When the first graphical computer displays were developed,raster displays were too slow and expensive to be practical. Fortunately, it waspossible to use vacuum tube technology in another way: The electron beam could be madeto directly draw a line on the screen, simply by sweeping the beam along that line.A vector graphics display would store adisplay list of linesthat should appear on the screen. Since a point on the screen would glow only very brieflyafter being illuminated by the electron beam, the graphics display would go throughthe 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 flickerbecause 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 smallnumber of geometric shapes, the amount of information needed to represent the imageis much smaller using a vector representation than using a raster representation.Consider an image made up of one thousand line segments. For a vector representationof the image, you only need to store the coordinates of two thousand points, theendpoints of the lines. This would take up only a few kilobytes of memory. To storethe image in a frame buffer for a raster display would require much more memory. Similarly, a vector display coulddraw the lines on the screen more quickly than a raster display could copy the same image fromthe frame buffer to the screen. (As soon as raster displays became fast and inexpensive, however, they quickly displaced vector displays because of theirability to display all types of images reasonably well.)
The divide between raster graphics and vector graphics persists in several areasof computer graphics. For example, it can be seen in a division between twocategories of programs that can be used to create images:painting programsanddrawing programs. In a painting program, the image is representedas 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 in apainting program 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, thendraw a tree in front of the house. If you then erase the tree, you'll only reveal a blankbackground, not a house. In fact, the image never really contained a "house" at all—onlyindividually 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 theimage is represented as a list of those shapes. If you place a house shape (or collection of shapesmaking up a house) in the image, and you then place a tree shape ontop of the house, the house is still there, since itis stored in the list of shapes that the image contains. If you delete the tree, the house willstill be in the image, just as it was before you added the tree. Furthermore, you should be ableto select one of the shapes in the image and move it or change its size, so drawing programsoffer 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 anddrawing, although one or the other is usually dominant. For example, a drawing program mightallow the user to include a raster-type image, treating it as one shape. A painting programmight let the user create "layers," which are separate images that can be layered one on topof another to create the final image. The layers can then be manipulated much like the shapesin a drawing program (so that you could keep both your house and your tree in separate layers,even if in the image of the house is in back of the tree).
Two well-known graphics programs areAdobe Photoshop andAdobe Illustrator.Photoshop is in the category of painting programs, whileIllustrator is more of a drawing program.In the world of free software, the GNU image-processing program,Gimp, is a good alternativetoPhotoshop, whileInkscape is a reasonably capable free drawing program.Short introductions to Gimp and Inkscape can be found inAppendix C.
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 imageis to be recovered from the bits stored in the file, the representation must follow some exact, knownspecification. Such a specification is called a graphics file format. Some popular graphics fileformats include GIF, PNG, JPEG, WebP, and SVG. Most images used on the Web are GIF, PNG, or JPEG,but most browsers also have support for SVG images and for the newer WebP format.
GIF, PNG, JPEG, and WebP are basically raster graphics formats; an image is specified by storing a color value for each pixel. GIF is an older file format,which has largely been superseded by PNG, but you can still find GIF images on the web. (The GIFformat supports animated images, so GIFs are often used for simple animations on Web pages.) GIF usesan indexed color model with a maximum of 256 colors. PNG can use either indexed or full 24-bit color,while JPEG is meant for full color images.
The amount of data necessary to represent a raster image can be quitelarge. However, the data usually contains a lot of redundancy, and the data can be "compressed"to reduce its size. GIF and PNG uselossless data compression, which means that theoriginal image can be recovered perfectly from the compressed data.JPEG uses alossy data compression algorithm,which means that the image that is recovered froma JPEG file 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, andusing 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 edgesbetween different colors. It is especially bad for line drawings and images that contain text; PNG is the preferred format for such images. WebP can use both lossless and lossy compression.
SVG, on the other hand, is fundamentally a vector graphics format (although SVG images can includeraster images). SVG is actually an XML-based language for describing two-dimensional vector graphicsimages. "SVG" stands for "Scalable Vector Graphics," and the term "scalable" indicates one of theadvantages of vector graphics: There is no loss of quality when the size of the image is increased.A line between two points can be represented 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'thave enough color values for all the pixels in the new image; each pixel from the original imagewill be expanded to cover a rectangle of pixels in the scaled image, and you will get multi-pixel blocks ofuniform color. The scalable nature of SVG images make them a good choice for web browsers and forgraphical elements on your computer's desktop. And indeed, some desktop environments are now usingSVG images for their desktop icons.
A digital image, no matter what its format, is specified using acoordinate system.A coordinate system sets up a correspondence between numbers and geometric points. In two dimensions,each point is assigned a pair of numbers, which are called the coordinates of the point. The two coordinatesof a point are often called itsx-coordinate andy-coordinate, although the names"x" and "y" are arbitrary.
A raster image is a two-dimensional grid of pixels arranged intorows and columns. As such, it has a natural coordinate system in which each pixel corresponds to a pair of integers giving the number of the row and the number of the column that contain thepixel. (Even in this simple case, there is some disagreement as to whether the rows should be numbered from top-to-bottomor from bottom-to-top.)
For a vector image, it is natural to use real-number coordinates. The coordinate system for animage is arbitrary to some degree; that is, the same image can be specified using different coordinatesystems. I do not want to say a lot about coordinate systems here, but they will be a majorfocus of a large part of the book, and they are even more important in three-dimensional graphicsthan in two dimensions.