Computer Graphics

ICTP 401 Lecture Notes Kofi Asiedu Presbyterian University College Okwahu Campus Abetifi

1

education. consumer information bulletins. business. we find computer graphics used routinely in such diverse areas as science. managerial reports. Wireframe displays also allow designers to quickly see the effects of interactive adjustments to design shapes  Animations are often used in CAD applications 2. statistical. mathematical. scientific. advertising. art. medicine.Chapter 1 Computer Graphics   There is virtually no area in which graphical displays cannot be used to some advantage. and training Application Areas 1. used to produce illustrations for reports or to generate 35-mm slides or transparencies for use with projectors. Presentation graphics is commonly used to summarize financial. Computer Art 2 . engineering. industry. particularly for engineering and architectural systems. entertainment. and economic data for research reports. 3. government. and so it is not surprising to find the use of computer graphics so widespread Today. and other types of reports  Two-dimensional bar chart and three-dimensional bar chart. Presentation Graphics  Another major application area is presentation graphics. but almost all products are now computer designed  Objects are first displayed in a wireframe outline form that shows the overall sham and internal features of objects. CAD  A major use of computer graphics is in design processes.

other paint packages (such as Pixelpaint and Superpaint). and sometimes graphics objects are combined with the actors and live scenes. where each frame of the motion is rendered and saved as an image file. the frames are transferred to film or stored in a video buffer for playback. Sometimes the graphics scenes are displayed by themselves. Entertainment  Computer graphics methods are now commonly used in making motion pictures. and air traffic control personnel 6.  Satellite cameras and other sources are amassing large data files faster than they can be interpreted. medical personnel. 5. artist's paintbrush (such as Lumens). Scanning these large sets of numbers to determine trends and relationships is a tedious and ineffective process. music videos. EDUCATION AND TRAINING  Computer-generated models of physical. A common graphics method employed in many commercials is morphing. Examples of such specialized systems are the simulators for practice sessions or training of ship captains. This method has been used in commercials to turn an oil can into an automobile engine. When all frames in the animation sequence have been rendered. and one person's face into another face 4. heavy-equipment operators. and television shows. 30 frames per second are required. Animations are also frequently in advertising. the trends and patterns are often immediately apparent  Producing graphical representations for scientific. engineering. and economic systems are often used as educational aids  For some training applications. desktop publishing software Cartoons For many applications of commercial art (and in motion pictures and other applications). Film animations require 24 frames for each second in the animation sequence. But if the data are converted to a visual form. And 3 . and others often need to analyze large amounts of information or to study the behavior of certain processes. and television commercials are produced frame by frame. specially developed software. symbolic mathematics packages (such as Mathematics). an automobile into a tiger. including special-purpose hardware.      Computer graphics methods are widely used in both fine art and commercial art applications Artists use a variety of computer methods. special systems are designed. financial. CAD packages. If the animation is to be played back on a video monitor. VISUALIZATION  Scientists. business analysts. In each successive frame. aircraft pilots. and medical data sets and processes is generally referred to as scientific visualization. the motion is simulated by moving one position slightly from their positions in the previous fra me. photorealistic techniques are used to render images of a product. where one object is transformed (metamorphosed) into another. engineers.

and to plan and practice surgery.the tern business visualization is used in connection with data sets related to commerce. GRAPHICAL USER INTERFACES  It is common now for software packages to provide a graphical interface  A major component of a graphical interface is a window manager that allows a user to display multiple-window areas. for example.  Interfaces also display menus and icons for fast selection of processing options or parameter values 4 . Medicine. and other nonscientific areas 7. to enhance color separations. Then digital methods can be applied to rearrange picture parts. industry. on the other hand applies techniques to modify or interpret existing pictures. such as photographs and TV scans Two principal applications of image processing are (1) improving picture quality and (2) machine perception of visual information. to design artificial limbs. The last application is generally referred to as computer-aided surgery. Image processing     In computer graphics. we simply click in that window using an interactive pointing device. uses these techniques to model and study physical functions. as used in robotics. To make a particular window active. Each window can contain a different process that can contain graphical or non-graphical displays. we first digitize a photograph or other picture into an image file.  8. To apply image processing methods. or to improve the quality of shading Image processing and computer graphics are typically combined in many applications. a computer is used to create a picture Image processing.

the pixels themselves may be round dots or small squares Because the dots are close together. or to any gray range in between.Chapter 2 VIDEO DISPLAY DEVICES  The primary output device in a graphics system is a video monitor  The operation of most video monitors is based on the standard cathode-ray tube (CRT) design. to white (a maximum number of electrons hitting the phosphor). but several other technologies exist and solid-state monitors may eventually predominate Refresh Cathode-Ray Tubes              An electron gun that emits a beam of electrons (cathode rays) A deflection and focusing system that directs a focused beam of electrons towards specified positions on a phosphorus-coated screen A phosphor-coated screen that emits a small spot of light proportional to the intensity of the beam that hits it The light emitted from the screen is what you see on your monitor. The point that can be lit up by the electron beam is called a pixel. and blue-colored phosphors arranged in a triangular group. Because the light emitted by the phosphor fades very rapidly. and blue dots of varying brightness into a single doted square that appears to be the color combination of the three colors. each of which generates an electron beam to excite one of the phosphor dots Depending on the monitor manufacturer. green. some method is needed for maintaining the screen picture. the human eye sees the three red. A higher number of electrons hitting the screen will result in a brighter color at the specified pixel. One way to keep the phosphor glowing is to redraw the picture repeatedly by quickly directing the electron beam back over the same points. The intensity of light emitted at each pixel can be changed by varying the number of electrons hitting the screen. green. Each pixel has red. A higher number of electrons hitting the phosphor results in a whiter-colored pixel. There are three electron guns. This type of display is called a refresh CRT Persistence is defined as the time it takes the emitted light from the screen to decay to one-tenth of its original intensity. A grayscale monitor has just one phosphor for every pixel. A color CRT monitor has three different colored phosphors for each pixel. The color of the pixel can be set to black (no electrons hitting the phosphor). (For those of us who missed art 5 .

Higher-end workstations can achieve even higher resolutions. The word dot is really referring to a pixel. The higher the number of dots per inch of the screen image. the electron beam is swept across the screen. On a display device with a resolution of 1024 x 768. The maximum number of points that can be displayed without overlap on a CRT is referred to as the resolution.) Conceptually. At lower resolutions. Stored intensity values are then retrieved from the refresh buffer and "painted" on the screen one row (scan line) at a time 6 . as shown in The number of rows and columns of pixels that can be shown on t he screen is called the screen resolution.432 pixels! That is a lot of pixels packed together on your 14-inch monitor. This number gives the ratio of vertical points to horizontal points necessary to produce equal-length lines in both directions on the screen. where pixels are packed close together. and in each scan line there are 1024 pixels.  Raster-Scan Displays • The most common type of graphics monitor employing a CRT is the rasterscan display. • Picture definition is stored in a memory area called the refresh buffer or frame buffer. (Sometimes aspect ratio is stated in terms of the ratio of horizontal to vertical points. the beam intensity is turned on and off to create a pattern of illuminated spots. based on television technology • In a raster-scan system.      class in school. your eye perceives a smooth image. This is why the resolution of the display (and correspondingly that of the image) is such a big deal. green. That means the display has 768 x 1024=786. and blue color. there are 768 rows (scan lines).) An aspect ratio of 3/4 means that a vertical line plotted with three points has the same length as a horizontal line plotted with four points. Another property of video monitors is aspect ratio. which stands for dots per inch. we can think of the screen as a discrete two-dimensional array (a matrix) of pixels representing the actual layout of the screen. one row at a time from top to bottom. • As the electron beam moves across each row. where pixels are big and not so closely packed. the higher the resolution and hence the crisper the image. all colors perceived by humans can be formed by the right brightness combination of red. • This memory area holds the set of intensity values for all the screen points. you can start to notice the "pixelated" quality of the image. At higher resolutions. You may have heard the term dpi.

First. • Additional bits are needed when color and intensity variations can be displayed. although some systems are designed for higher refresh rates. • EXAMPLE: A system with 24 bits per pixel and a screen resolution of 1024 x 1024 requires 3 megabytes of storage for the frame buffer. But we still use them. For systems with multiple bits per pixel. had problems with the same image being displayed for a long time. would glow at a constant rate for such a long period of time that they would actually discolor the glass surface of the CRT. and then all points along the oddnumbered lines are displayed.• Home television sets and printers are examples of other systems using rasterscan methods • In a simple black-and-white system. Advances in display technology and the advent of energy-saver monitors have virtually eliminated the need for screensavers. is called the horizontal retrace of the electron beam. and 2560 by 2048. which can require several megabytes of storage for the frame buffer. 7 • • • • • • • . On some raster-scan systems (and in TV sets). What size frame buffer (in bytes is needed for each of these systems to store 12 bits per pixel? How. 1280 by 1024. so only one bit per pixel is needed to control the intensity of screen positions. The return to the left of the screen. Up to 24 bits per pixel are included in high-quality systems. At the end of each scan line. Observe that interlaced displays require two vertical retraces per frame per time DID YOU KNOW THAT: Screensavers were originally designed to protect computer monitors from phosphor burn-in. after refreshing each scan line. the frame buffer is referred to as a pixmap. The phosphors. Early CRT monitors. each frame is displayed in two passes using an interlaced refresh procedure. depending on the resolution of the system. Refreshing on raster-scan displays is carried out at the rate of 60 to 80 frames per second. much storage: is required for each system if 24 bits per pixel are to be stored? • • • • On a black-and-white system with one bit per pixel. Interlacing is primarily used with slower refreshing rates. we would describe a refresh rate of 60 frames per second as simply 60 Hz. the electron beam returns (vertical retrace) to the top left comer of the screen to begin the next frame. all points on the evennumbered scan lines are displayed. the electron beam returns to the left side of the screen to begin displaying the next scan line. where a cycle corresponds to one frame. refresh rates are described in units of cycles per second. particularly monochrome ones. Sometimes. Interlacing of the scan lines in this way allows us to see the entire screen displayed in one-half the time it would have taken to sweep across all the lines at once from top to bottom. Using the se units. the frame buffer is commonly called a bitmap. used to make the pixels in the display. [(1024 X 1024) X 24 /8] bytes = 3megabytes Try Consider three different raster systems with resolutions of 640 by 400. each screen point is either on or off. And at the end of each frame (displayed in 1/80th to 1/60th of a second). or Hertz (Hz). This discoloration would then be visible as a faint image overlaying whatever else was displayed on the monitor.

usually red and green. a CRT has the electron beam directed only to the parts of the screen where a picture is to be drawn. one for each color dot. combinations of red and green light are emitted to show two additional colors. which appears as a small color spot on the screen.Random-Scan Displays • When operated as a random-scan display unit. hard-copy device. and the quality of pictures is not as good as with other methods. or simply the refresh buffer Color CRT Monitors • A CRT monitor displays color pictures by using a combination of phosphors that emit different-colored light. are coated onto the inside of the CRT screen. • The two basic techniques for producing color displays with a CRT are the beam-penetration method and the shadow-mask method • The beam-penetration method for displaying color pictures has been used with random-scan monitors. • Picture definition is now stored as a set of line drawing commands in an area of memory referred to as the refresh display file. • Shadow-mask methods are commonly used in raster-scan systems (including color TV) because they produce a much wider range of colors than the beam-penetration method. which contains a series of holes aligned with the phosphor-dot patterns. another emits a green light. and hence the screen color at any point. Beam penetration has been an inexpensive way to produce color in random-scan monitors. • A pen plotter operates in a similar way and is an example of a random-scan. display program. A beam of slow electrons excites only the outer red layer. • Sometimes the refresh display file is called the display list. and the third emits a blue light. This type of CRT has three electron guns. • By combining the emitted light from the different phosphors. they activate a dot triangle. orange and yellow. and the displayed color depends on how far the electron beam penetrates into the phosphor layers. The speed of the electrons. When the three beams pass through a hole in the shadow mask. Two layers of phosphor. a range of colors can be generated. The three electron beams are deflected and focused as a group onto the shadow mask. At intermediate beam speeds. One phosphor dot emits a red light. A shadow-mask CRT has three phosphor color dots at each pixel position. is controlled by the beam acceleration voltage. and a shadow-mask grid just behind the phosphor-coated screen. A beam of very fast electrons penetrates through the red layer and excites the inner green layer. The phosphor dots in the triangles are arranged so that each electron beam can activate only its corresponding color dot when it passes through the shadow mask 8 . but only four colors are possible. • The component lines of a picture can be drawn and refreshed by a random scan system in any specified order. • Random scan monitors draw a picture one line at a time and for this reason are also referred to as vector displays (or stroke-writing or calligraphic displays).

and power requirements compared to a CRT • A significant feature of flat-panel displays is that they are thinner than CRTs. and as graphics displays in applications requiring rugged. in which electron beams arts accelerated parallel to the screen. weight. Plasma panels. armrest viewing of movies on airlines. • Flat CRTs have also been devised. calculators. To eliminate a picture section. very complex pictures can be displayed at very high resolutions without flicker (flicker means unsteady movement). the entire screen must be erased and the modified picture redrawn Flat-Panel Displays • Although most graphics monitors are still constructed with CRTs. the primary gun. Two electron guns are used in a DVST. • Because no refreshing is needed. other technologies are emerging that may soon replace CRT monitors. • Current uses for flat-panel displays include small TV monitors. then deflected 90' to the screen. laptop computers. maintains the picture display. thin-film electroluminescent displays. 9 . as advertisement boards in elevators. But flat CRTs have not proved to be as successful as other emissive devices. • The emissive displays (or emitters) are devices that convert electrical energy into light. pocket video games. • A DVST monitor has both disadvantages and advantages compared to the refresh CRT. the second. portable monitors. One. • Disadvantages of DVST systems are that they ordinarily do not display color and that selected parts of a picture cannot he erased. is used to store the picture pattern. the flood gun. and Light-emitting diodes are examples of emissive displays. • The term flat-panel display refers to a class of video devices that have reduced volume. • We can separate flat-panel displays into two categories: emissive displays and non-emissive displays.Direct-View Storage Tubes • An alternative method for maintaining a screen image is to store the picture information inside the CRT instead of refreshing the screen • A direct-view storage tube (DVST) stores the picture information as a charge distribution just behind the phosphor-coated screen.

a special-purpose processor. called the video controller or display controller. or CPU. and the video controller accesses the frame buffer to refresh the screen. In addition to the central processing unit. In addition to the video controller. RASTER-SCAN SYSTEMS • • • • Interactive raster graphics systems typically employ several processing units. is used to control the operation of the display device.• Non-emissive displays (or non-emitters) use optical effects to convert sunlight or light from some other source into graphics patterns. The most important example of a non-emissive flat-panel display is a liquid-crystal device. The frame buffer can be a fixed of memory or anywhere in the system memory. more sophisticated raster systems employ other processors as co-processors and accelerators to implement various graphics operations. 10 .

and the video controller is given direct access to the frame-buffer memory.I/O Devices System Bus Display Processor Frame Buffer System Memory CPU Video Controller Monitor Architecture of a raster graphics system with a display processor Video Controller • A fixed area of the system memory is reserved for the frame buffer. 11 .

screen pixel positions are labeled from 0 to Xmax Example: Consider a raster system with resolution of 640 by 480. low level objects into their corresponding pixel map representations.432. are referenced in Cartesian coordinates. How many pixels could be accessed per second by a display controller that refreshes the screen at a rate of 60 frames per second? What is the access time per pixel? Soln No of pixels = (640*480)*60 = 18.  In addition to the system memory. 12 . a separate display processor memory area can also be provided. and the corresponding screen positions.• • Video Controller reads the contents of the frame-buffer and converts the digital representation of the string of pixel values into analog voltage signals that are sent serially to the video display screen. Frame-buffer locations. the coordinate origin is defined at the lower left screen corner y x • Scan lines are then labeled from Ymax at the top of the screen to 0 at the bottom.000 pixels • Access time = 1/18432000 = 0.054usec Raster-Scan Display Processor  Display processor sometimes referred to as a graphics controller or a display co-processor.  Scan conversion may also be defined as the process of converting basic. For many graphics monitors. This digitization process is called scan conversion.  The purpose of the display processor is to free the CPU from the graphics chores. Along each scan line.  A major task of the display processor is digitizing a picture definition given in an application program into a set of pixel-intensity values for storage in the frame buffer.

13 . These include a mouse. Graphics commands in the application program are translated by the graphics package into a display file stored in the system memory. Most systems have a keyboard and one or more additional devices specially designed for interactive input. joystick. An application program is input and stored in the system memory along with a graphics package. dials. digitizers. This display file is then accessed by the display processor to refresh the screen. Sometimes the display processor in a random-scan system is referred to as a display processing unit or a graphics controller. INPUT DEVICES     Various devices are available for data input on graphics workstations. and button boxes. space ball. The display processor cycles through each command in the display file program once during every refresh cycle. trackball. Some other input devices used in particular applications are data gloves.RANDOM-SCAN SYSTEMS       The organization of a simple random-scan (vector) system is shown below. touch panels. image scanners. and voice systems.

Basic functions in a general package include those for generating picture components (straight lines. Electrostatic plotters GRAPHICS SOFTWARE       There are two general classifications for graphics software: general programming packages and special-purpose applications packages. xerographic processes (as used in photocopying machines). dot-matrix printers b. setting color and intensity values. polygons. selecting views. ink-jet sprays. and applying transformations. For presentations or archiving. The quality of the pictures obtained from a device depends on dot size and the number of dots per inch. and CAD systems. An example of a general graphics programming package is the GL (Graphics Library) system on Silicon Graphics equipment. The interface to the graphics routines in such packages allows users to communicate with the programs in their own terms. To put images on film. And we can put our pictures on paper by directing graphics output to a printer or plotter. 14 . drums. we can simply photograph a scene displayed on a video monitor. Read on the following: a. so that users can generate displays without worrying about how graphics operations work. and other figures). A line printer is an example of an impact device. Printers produce output by either impact or nonimpact methods. electrostatic methods. circles. or Lines per inch. such as C or FORTRAN. medical. Impact printers press formed character faces against an inked ribbon onto the paper. with the typefaces mounted on bands. A general graphics programming package provides an extensive set of graphics functions that can be used in a high-level programming language. application graphics packages are designed for non programmers. we can send image files to devices or service bureaus that will produce 35-mm slides or overhead transparencies. or wheels. Examples of such applications packages are the artist's painting programs and various business.HARD-COPY DEVICES          We can obtain hard-copy output for our images in several formats. and electrothermal methods to get images onto Paper. that can be displayed. By contrast. Ink-jet printers c. Point plotters d. chains. Nonimpact printers and plotters use laser techniques.

Points and straight line segments are the simplest geometric components of pictures. Computer generated images are produced using basic geometric structures.  To perform this we must write scan conversion point-plotting algorithm.  To draw a point on the screen. Y1) and (X2.  None of the x and y coordinates values should be beyond the boundaries of the display device. Y2). y) or setpix el(x. We begin our discussion of picture-generation procedures by examining device-level algorithms for displaying two-dimensional output primitives.  Each pixel is accessed by a non-negative integer (x. Additional output primitives that can be used to construct a picture include circles and other conic sections.  Both the frame and the display screen are given a two-dimensional coordinate system with the origin at the lower-left corner. We can determine values for the slope m and y intercept b with the following calculations:  15 . a picture is completely specified by the set of intensities for the pixel positions in the display. y) LINE-DRAWING ALGORITHMS  The Cartesian slope-intercept equation for a straight line is with m representing the slope of the line and b as the y intercept. referred to as output primitives.Chapter 3      A picture can be described in several ways. a point-plotting procedure is required. with particular emphasis on scan-conversion methods for raster graphics systems Plotting Points  In order to draw on a raster display. Given that the two endpoints of a line segment are specified at positions (X1. we must determine the corresponding points in the frame buffer that make up the picture. y) coordinate pair.  Let us assume the availability of the command plotpoint(x. Assuming we have a raster display.

 We sample the line at unit intervals in one coordinate and determine corresponding integer values nearest the five sampling positions along line path for the other coordinate. 3-5. Algorithms for displaying straight lines are based on the line equation 3-1 and the calculations given in Eqs. using Eq. 3-2 and 3-3. from one endpoint position to the other  In practise: only integer coordinate positions are available => rounding to nearest integer position in each step  Choose the increments x and y ≤ 1 16 . Note that gradient of a line m = ∆y/∆x  The scan conversion process for straight lines is illustrated in Fig. 3-4 or Eq. 3-4. respectively  For an ideal display: increment x and y by x and y.  Increment x and y by small steps proportional to the first derivatives of x and y.  ’small’. for a near horizontal line with discrete sample positions along the x axis DDA Algorithm  The digital differential analyzer (DDA) is a scan-conversion line algorithm based on calculating either ∆y or ∆x.

we reverse the roles of x and y. For lines with a positive slope greater than 1.0) and (12. 3-3.10) m=y/x m=10/12 m=5/6 hence m< 1 so we use equation 3. Consider first a line with positive slope. we sample at unit y intervals (∆y = 1) and calculate each succeeding x value as By substituting Yk+1= Y k + ∆y into m = (Y k+1-Y k)/(Xk+1-Xk) and knowing that (e∆y = 1) Example Simple DDA Endpoints (0.6 and (∆x = 1) (rounding to nearest integer) and start in endpoint (0. as shown in Fig. That is. If the slope is less than or equal to 1.0) results in 13 different points out of 13 generated in total X integer 0 1 2 3 4 5 6 7 8 9 10 11 12  Y integer 0 1 2 3 3 4 5 6 7 8 8 9 10 Fraction 0 5/6 5/3 5/2 10/3 25/6 5 35/6 20/3 15/2 25/3 55/6 10 The DDA algorithm is a faster method for calculating pixel positions 17 . we sample at unit x intervals (∆x = 1) and compute each successive y value as By substituting Xk+1= Xk + ∆x into m = (Y k+1-Y k)/(Xk+1-Xk) and knowing that (e∆x = 1)   Since m can be any real number between 0 and 1. the calculated y values must be rounded to the nearest integer.

can cause the calculated pixel positions to drift away from the true line path for long line segments We can improve the performance of the DDA algorithm by separating the increments m and l / m into integer and fractional parts so that all calculations are reduced to integer operations. Read on Integer DDA Bresenham's Line Algorithm  An accurate and efficient raster line-generating algorithm.   The accumulation of round-off error in successive additions of the floating point increment. developed by Bresenham. scan converts lines using only incrementa1 integer calculations that can be adapted to display circles and other curves 18 . however.

19 .

Sign up to vote on this title
UsefulNot useful