COMPSCI 111 S1C - Lecture 14 1 of 8 Computer Science COMPSCI 111 S1C - Lecture 14 March 2004 Bitmap and Vector Graphics (Introduction to Painting and Drawing applications) Vector Graphics After computers had graduated from punch cards to computer screens, people tried to use computers to represent information graphically. Unfortunately, the screens which computers used were text-only, and did not have the capacity for computer graphics. However, it was possible to write a program which sent instructions to a peripheral device (such as a plotter) which would draw the output in a graphical manner. These devices controlled a pen which it could move up, down, left, right, forwards and backwards. Because each part of the drawing was a line segment, the information about the lines was stored as mathematical vectors. Devices which used this technique became known as Vector Graphics Devices. The vector graphics screen became commonplace for displaying early computer graphics of this type. This screen was a cathode ray tube, which shot an electron beam onto a phosphorus surface. The electron gun would trace each line (or vector) in the object about 60 times per second. This technique produced excellent results for Computer Aided Design (technical drawings), and is still in use today, albeit uncommonly. Object: Name: Circle Attributes: Radius: 5 X Position: 120 Y Position: 231 Pen Width: 3 Pen Colour: Black Fill Colour: Green Figure 1: Information about objects is stored as independent attributes. Some graphics applications use the vector graphics paradigm to represent the objects to be drawn. Using this representation, each object is stored independently. A list of objects is created, with each object specifying its location, line width, colour, orientation, and other attributes. The primary limitation with this method is that only shapes that can be easily described in mathematical terms (such as square, rectangle, circle, ellipse, polygon, line) can be represented. There are many advantages to storing graphics information in this manner: Since each object records attributes describing the way it looks, it is possible to alter any of these attributes in order to alter the appearance of the object. This can be done even after the object is created. Each object is able to be manipulated independently of the others. Given the information stored in this way, it is possible to scale the image and retain the desired look just change the size attribute of each object. It is possible to describe the shape of letters (characters) using lines and curves, so entire fonts can be created which use vector-based descriptions of the characters. Note that TrueType fonts are stored in this way to enable them to be scaled effectively. Most printers today are compatible with the Postscript language developed in Xerox PARC. This language operates via a vector graphics paradigm, using mathematical formulae to describe smooth curves. A graphics program (like a drawing package) which stores information using vector graphics is able to convert the information to Postscript, and so the printed lines will look smooth and professional.
COMPSCI 111 S1C - Lecture 14 2 of 8 Drawn Font Drawn Font Figure 2: Objects Stored using the Vector Graphics Paradigm scale smoothly, and can be printed by postscript using the original attributes of the object. Raster Graphics Raster Graphics devices developed with the idea that a picture could be formed from a very small grid of dots. The first common technology to use this idea was the television. A cathode ray tube is used, but the electron gun does not scan each object like a vector graphics device, but rather scans horizontally across each row on the screen, regardless of what is actually being drawn. The rate of refresh (i.e. how many times the screen is redrawn) needs to be about 50 times a second (50Hz) to avoid flickering. Modern computer screens use this Raster Graphics technology. A picture stored using the raster paradigm is known as a Bitmap. Historically, pictures consisted of black and white dots only. This meant that each dot of a picture (pixel) could be stored using a single bit. The contents of the bits in memory mapped onto the screen image, and were hence known as a bitmap. Today, most bitmaps use many colours which means the mapping between memory and screen is no longer 1 to 1, but often 8 or 16 to 1 (i.e. sixteen bits are used to represent each pixel). 0 0 0 0 0 0 0 0 0 0 1 1 1 1 0 0 0 0 1 0 0 1 0 0 0 0 1 1 1 1 0 0 0 0 0 0 0 0 0 0 Figure 3: Bits in memory map onto the screen representation in a 1 to 1 relation. Early printers that used the raster graphics paradigm were known as dot-matrix printers, and were available in a number of different varieties. The more dots that you were able to fit into a small area, the smoother, and more realistic the images would appear when printed. Newspapers and many magazines still use this approach to printing pictures. If you look closely, you are able to see each individual dot which makes up the picture. Representing graphics information using a bitmap has its disadvantages: Because the original picture information is stored in a discrete grid, the only way to increase the size of the image is to increase the size of each dot. The image will then begin to appear to be of poor quality as jagged edges become more apparent. Figure 4: Objects stored using a Bitmap do not scale well. Laser quality printers use Postscript, which is a vector based language. Each dot in the bitmap image is converted into a small square (or circle), and printed out as a dot by the printer. An average laser printer is capable of printing with a resolution of about 600 dots per inch, whereas a screen is typically 72 dots per inch. The capacity of the printer is usually wasted when printing bitmap images. In order to use it to get am image as crisp and clear as possible, the bitmap on the screen needs to be 10 times as large as the final printing will appear, that way a 1 to 1 mapping can occur between the printer resolution and the screen resolution.
COMPSCI 111 S1C - Lecture 14 3 of 8 A diagonal line drawn on a screen. Each square is one pixel. The bitmap converted for printing. Note the resolution of the printer is wasted. The way the diagonal line should look. Figure 5: Printer Resolution exceeds screen resolution, causing difficulty for graphics stored as bitmaps. Why would you want to use bitmaps at all? Consider how a photographic image would be stored. Vector graphics is only capable of representing a small number of mathematical shapes, so it is simply incapable of representing the complexity involved in a photograph. The closest it would be capable of would be to divide the object up into a large number of regular shapes, where each shape contained a uniform colour. But that is exactly what a bitmap is so it would be more efficient to store the image as a bitmap! Vector graphics is more efficient when the image to be represented consists of regular shapes. Bitmaps should be used when the image is more complex, with irregular shapes. Using Painting and Drawing Applications You create drawings from objects. Drawing is like making a collage. You arrange and layer separate pieces. Painting is like creating a watercolour. You create paintings from images made up of single dots on the screen called pixels. You add and blend colours and textures into a single canvas. Use Drawing in order to Create independent lines and shapes Quickly select objects and groups of objects. Alter pen and fill attributes after objects are drawn Overlap objects and move them to the front or back of the drawing Use Painting in order to Creating images of custom shapes and textures Edit precisely by working with one pixel at a time Add special effects such as perspective and distortion to images Blend, combine and tint images of different colours and patterns. Drawing Applications Use a draw document to draw and combine objects, such as lines or circles that you can select, move, modify, and delete independently of each other. For example, you can use a drawing application to create: illustrations, designs, and logos brochures newsletters organisation charts slide presentations diagrams and maps Drawing Tools The tools for drawing objects are usually found in a toolbar, or tool panel. Use the drawing tools to create and edit objects. The drawing tools are usually pre-set to draw solid black lines. Objects drawn usually have a white fill colour (i.e. white is the default). To draw an object: Click a tool and drag the crosshair pointer in the drawing area. Release the mouse button when the object is the size you want.
COMPSCI 111 S1C - Lecture 14 4 of 8 Selecting Objects Before you can move, modify, or delete any object you must select it. A selected object displays handles (small black boxes). An object remains selected until you deselect it or select another object. You select objects with the arrow pointer. If the pointer is not an arrow, click the arrow pointer in the tool panel. To select a single object, simply click on it. To select multiple objects use one of the following methods: I. Starting outside the object, drag the pointer across the objects to enclose them in a selection rectangle. Only those objects entirely enclosed are selected. II. Hold down the Shift key and click each object you wish to be selected. Attributes of objects Every object has many attributes which describe what it looks like. The attributes which are used to describe the objects depend upon the application. Most applications use at least the following: Location of the object on the page (co-ordinates) Object Size Width of the outline (pen width) Colour of the outline (pen colour) Pattern of the outline (pen pattern) Colour used inside the object (fill colour) Pattern used inside the object (fill pattern) Painting Applications Use a painting application (or bitmap editor) when you want to create a variety of artwork and illustrations. The images are created by blending colours directly upon the canvas. There is no notion of objects, merely the colour of each point (pixel) in the picture. For example, you can use a bitmap editor to: create logos for stationery draw illustrations for reports or newsletters paint abstract images create school artwork Painting Tools You can use various painting tools to create and edit images. (e.g. MS Paint) When you're working in application that allows you to edit the bitmap, remember that you are directly making changes to individual dots on a page. If you want to select a piece of the canvas (for moving or modification) then you need to define the boundaries of the selection before it can be altered. You should use one of the image selection tools to select areas in a painting document. Most painting tools are similar to those used in drawing applications. Similar attributes can be set for each painting tool before it is used to paint onto the canvas. However, because of the way the information is stored, the attributes of an object may not be altered once it has been painted (since the computer does not distinguish between different objects in a painting canvas). Layers More advance graphical packages, such as Adobe Photoshop and Paint Shop Pro use layers to work around the problem of not being able to edit objects once they have been drawn. Layers can be thought of as transparent plates that are placed on top of one another to produce a picture. You can draw on these layers or place them in any particular order. Obviously thing on the lowest layer can be obscured by things drawn on a layer above. By splitting the various components of a picture up, we can now edit them independently of each other.
COMPSCI 111 S1C - Lecture 14 5 of 8 Colours: The number of colours available on a computer depends upon the screen and the graphics capacity of the computer (specifically the power of the video card). The greater the range of colours required, the higher quality the screen is required to be (and therefore the greater the cost). If the computer can display more colours, then it will use much more of the processing power just dealing with the colours. Note that the amount of memory used increases significantly with a larger number of colours (A full size scr een of 1024 x 1024 in black and white requires 128KB, but in photographic quality colour will use 3 MB). No. of bits needed 1 bit No. of colours 2 colours (Black and White) 2 bits 4 colours 3 bits 4 bits 8 colours 16 colours 8 bits 256 colours 16 bits 65536 colours 24 bits 16, 777, 216 colours (True Colour) Figure 1: Table showing how the number of colours depends upon number of bits used. Image Processing Computer Graphics can be broadly divided into two categories (although there is some overlap): the analysis of images, and the synthesis (or creation) of images. Image processing is concerned with the analysis and alteration of existing images. Typically, an image is cleaned up to remove distortion, or enhanced to show desired objects more effectively. There are many examples of image processing in the technical and scientific community. Some of these include: Hospitals using computer enhanced images from x-rays, CAT scans, ultra-sound etc. W eather reports which show computer enhanced satellite images; etc. Police enhancing photographs to recognise people or license plate numbers It is also possible to alter aspects of an image (eg. morphing an image, changing its colour, proportions etc). Some examples include: Photo developers who alter the colours/ contrast of your photos; Hair salons which take a photo of your hair and recolour it; Removal of parts of an image (legs of Lieutenant Dan in Forrest Gump) Combining two images (Forrest Gump meeting JFK, people falling off the Titanic) Morphing which occurs in Terminator II Figure 2: Combining two images to form a third image.
COMPSCI 111 S1C - Lecture 14 6 of 8 Graphics Rendering Generating (or creating) computer images is perhaps the most easily recognised aspect of computer graphics. In order to generate computer graphics, a model of the object must be created within the computer, and then a representation of the object is displayed on the screen. The process of converting the computer model to a visible image is known as rendering. These rendered images are used primarily as artwork (eg; company logos, pretty pictures, special effects, etc. ), although they are also used to help visualise technical information (such as the flow of air around an object in fluid dynamics, a house drawn from plans, chemical interactions, educational recreations, etc.) Ray Casting Ray-casting is a rendering technique that calculates an image of a scene by shooting rays into the scene. The scene is built from shapes, ma terials, light sources, a camera, and other special features such as fog and atmospheric effects. Once the three dimensional objects have been placed, and a camera and light sources positioned, th e internal representation is complete. In order to draw the image, a viewing window must be positioned in the scene. The image which is rendered is the image that the camera would see when looking through the viewing window. The re ndering software divides up the viewing window into a grid, where the number of cells in the grid is equal to the number of pixels in the final image. It is then possible to work out the colour of each cell in the viewing window, and set the corresponding pixel in the final picture to display that colour. To work out the colour of each cell, a viewing ray is shot from the camera through each cell and into the scene. This ray is tested for intersection with any of the objects in the scene. Every time an object is hit, the colour of the surface at that point is calculated. This calculation is based upon the angle between the camera and the light source at that point. The surface material of the object is also taken into consideration in the calculation (a hard shiny surface reflects more light than a soft dull surface). Figure 3: The process of ray casting
COMPSCI 111 S1C - Lecture 14 7 of 8 Ray Tracing Ray Tracing produces photo-realistic images by using the same approach as ray casting, but involving more complex methods of calculating the colour of the surface. If the surface is reflective or translucent, then the ray tracing technique generates secondary rays from the point of intersect ion between the object and the viewing ray. These secondary rays are known as reflection rays, and are generated in order to work out the contribution to the colour of the surface which comes from light reflected from other objects. The colour of this reflected light alters the colour at the point of intersection on the original object. This complex process allows ray tracing to produce im ages which have reflections, transparent surfaces and complex lighting models involving such effects as halos. Figure 4: The technique of ray tracing works out the colour of a surface by calculations involving angle between light source and camera, surface of object, and colour or reflected light Computer Animation Animation was traditionally achieved by an artist hand-drawing each frame in the animated sequence. Computers have been used for some time to speed up this time consuming process. It is easy to scan the outline of the hand-drawn images into the computer, and then simply use a painting program to fill the interior with colours. A more sophisticated approach is to draw key frames by hand, and then allow a computer program to automatically draw the intermediate frames. Key Frame Computer Generated Figure 5: Computers are used to automatically draw flat 2d animation cells. Key Frame Three Dimensional Animation Today, some animations (such as Toy Story) are generated by a computer, based upon a description of the scene which is required. In addition to specifying the physical look of the object, it is possible to describe movement through three dimensional space using a computer model. The computer can generate multiple frames of an animation given a simple description of the scene. In order to make the movement of physical objects look realistic, the computer model needs to take account of physical laws such as gravity and friction. The more realistic the scene is required to be, the more realistic the computer model has to be.
COMPSCI 111 S1C - Lecture 14 8 of 8 Modelling and Simulation A recent trend in computer graphics research is to attempt to make the model as close to reality as possible. The distinction between simulation and computer graphics is blurred in this area. Computer graphics are far more realistic if they appear like the real world, and to achieve this, they need to accurately model the real world. This requires the computer model to account for the laws of physics, in order for the objects to behave more realistically. This simulation of reality has been closely linked to research in other fields of study, such as weather prediction, stresses of objects in engineering, chaos theory and quantum physics models. The partnership formed with these alternate disciplines is a symbiotic one, with both sides working towards a closer understanding of the physical universe. Limits of Computer Graphics The traditional problems associated with the production of computer are the physical limits imposed by the quality of the screen, and the speed of computation. Advances are being made in both of these areas, and many of the classical limitations have been defeated. The limits of computer graphics today are due to the difficulty in programming a computer to represent reality in a realistic way. Hardware is no longer such a major concern, but software techniques are a popular topic for research. Traditionally, computer graphics has been poor at modelling small particles such as those which make up clouds and fire. Recent developments (shown in movies such as Lord of the Rings) have proven that both of these effects are achievable. It is also difficult to model anything that is irregular, or uneven. This is because computers use mathematical models to create the objects which are represented. The natural result of this approach is for everything to appear regular, or to follow a pattern. Anything which is not regular is more difficult. This is because the computer must model everything that you see. Every minor blemish or imperfection must be deliberately placed. This makes scratches, dirt, and other imperfections difficult, and can often seem out of place. The creation of realistic living creatures is still the most difficult task for computer graphics. Biological entities tend to be very complex, and highly irregular. Because people are so good at recognising small details about body language and emotion, the discrepancies between the computer representation of a human and reality are noticed easily.