1. © De Montfort University, 20041 Vector and Bitmapped graphics Howell Istance School of Computing De Montfort University

2. © De Montfort University, 20042 What’s the difference..? Vector Graphics: image represented and stored as a collection of shapes, together with data (parameters) defining how the shapes will be produced and where they will be located Bitmapped Images: image represented and stored as a collection of pixels which displayed make up the image

3. © De Montfort University, 2004 Bitmapped images Pixels make up an image

4. © De Montfort University, 2004 #FF00A3 #255,0,163 #11111111,00000000,01100011 Colour - Depth Each pixel has a colour depth. A certain number of ‘bits’ are used to define a pixels colour e.g. held as an RGB value. For 256 (or less) colours a palette is used as an index describing which 256 actual colours to use in an image. 240,200,171

5. © De Montfort University, 20045 Pixmaps FF 255 red 00 0 green 00 0 blue Pixmap – area of memory In Windows, this is known as a device context (DC) 3 bytes per pixel = 24 bits

6. © De Montfort University, 20046 Location in memory corresponds to display location Send to device (display) driver

7. © De Montfort University, 20047 Vector graphics Model Transform (scale) Clip Render – convert model to array of pixel values

8. © De Montfort University, 20048 Models in Vector graphics Model is a series of mathematical constructs, together with data to define the location, size and attributes of each, such as colour, line style… Constructs include –shapes (rectangle, oval, lines), –curves –polygons (sets of points, coordinate pairs, with lines joining consecutive points), polylines –polygon meshes (set points with instructions to show which points are to be joined by lines) (0,0)x y

9. © De Montfort University, 20049 Rendering Conversion of model into an array of pixel values May include addition of effects such as application of textures, lighting and shading High demands on efficiency, involves very low level code Simple example of rendering a circle, radius r, centre at a,b For n = 0 to 360 { x = r*sin(n) y = r*cos(n) draw_point_at( a+ x, b + y) } r (a,b) y x

10. © De Montfort University, 200410 Transform and clip Transform between world coordinates to view port coordinates (scale up or down) –World coordinates – arbitrary, used to define model layout –View Port coordinates – correspond to display location –May involve several stages, or transformations Clip to the visible area of the window or ‘viewport’ Map pixel value contents at viewport coordinates to pixmap locations

11. © De Montfort University, 200411 Bitmapped Images… Model – array of pixel values Transform (scale) Clip ‘Logical’ pixel values ‘Physical’ pixel values

12. © De Montfort University, 200412 Models for bitmapped images Model consists a 2-D array of pixel values May be of a different size and colour depth from the image which will be finally displayed. A view of the image displayed on screen in an image editor is not the model, the view has been transformed and clipped and displayed You do not see the model

13. © De Montfort University, 200413 Persistance… Transform (scale) Clip File storage requires formats to store each type of model efficiently

14. © De Montfort University, 200414 Storing models….as bitmapped images The image will contain 128 * 128 = 16384 pixels If 3 bytes are used to store each pixel value, then 16384 * 3 bytes = 49152 bytes are required Size is constant regardless of complexity of image within the 128 pixel square 4.5 cm If the rectangles measure 4.5 cm, then on a 72 dpi (dots per inch) monitor, each side will contain 128 pixels

15. © De Montfort University, 200415 Storing models….as vector graphics 78 bytes required! But Postscript renderer required, which slows the display process and has to be available on the host machine Size increases as complexity of image increases, as more instructions are needed to define the image 4.5 cm (Post Script) 0 1 0 setrgbcolour 0 0 128 128 rectfill 1 0 1 setrgbcolour 32 32 64 64 rectfill

16. © De Montfort University, 200416 Representation as vector graphics… Vector graphics enable images to be composed of filled shapes Each object can be manipulated individually Scaling objects is easy (by applying mathematical transforms to the object definition)

17. © De Montfort University, 200417 Distorted poppy… Easy to manipulate individual elements of image here…

18. © De Montfort University, 200418 Vector representation of complex images To approach realistic image, complex definition of gradient meshes is required File size approx. 10 MB Generated in Illustrator Taken from Wiley book site

19. © De Montfort University, 200419 Rendered as a bitmapped image File size of this image is 152K No longer possible to interact with separate components Edits and application of effects are done on the vector version and the end result is saved as a bitmapped image.

20. © De Montfort University, 200420 Scaling bitmapped images… Mapping 1 logical pixel to more than 1 physical pixel requires a decision about what values to assign to the physical pixels Duplicating the values leads to ‘jagged edges’ of contours ‘Anti-aliasing’ assigns computed intermediate values to reduce this effect Logical (model) pixelsphysical pixels Scale factor = 1 Scale factor = 2

21. © De Montfort University, 200421 Effects of Anti-aliasing The bitmapped image of the iris has been scaled up 6 times No anti-aliasing Anti-aliasing applied

22. © De Montfort University, 200422 Vector graphics Model Transform (scale) Clip

23. © De Montfort University, 200423 Vectorising and rasterising Bitmapped image ModelVector graphics Model Rasterising (rendering) vectors to bitmaps is ‘easy’ Vectorising bitmaps to vectors is not – requires tracing contours of edges and features in bitmaps on the basis of differences between adjacent pixel values (‘magic wand’ tool) – Resultant vectors then have to be converted into meaningful objects rasterising vectorising

24. © De Montfort University, 200424 Bitmapped image file formats Many different formats, at least 50 currently in use Examples include: GIF, JPEG, TIFF, BMP, DIB, PCD, PNG ……. Main differences lie in compression technique used and number of bits used to represent pixel values (colour depth) Lossless compression: stored compressed image can be decompressed to be identical to the original (e.g LZW run length encoding) Lossy compression: some information is lost as a result of decompression, intended to be visually insignificant

25. © De Montfort University, 2004 Compression - LZW / RLE Runs of colour can be defined in a simple Run / Colour / Number format. e.g. R0206 for black, R0304 for gray, RF005 for green, R04FE for red, R0203 for black, R0614 for blue - taken from the palette below. 321 654 The palette

26. © De Montfort University, 2004 Compression - LZW / RLE TIF uncompressed = 289k TIF lzw compressed = 248k TIF uncompressed = 90k TIF lzw compressed = 5k

27. © De Montfort University, 200427 GIF Developed by Compuserve to exchange images across platforms Limited to 256 colours – ie one byte per value Lossless compression – uses LZW run length encoding 1 colour can be designated as transparent Good for simple images with limited tonal ranges, poor for photographic images

28. © De Montfort University, 200428 PNG Successor to GIF, developed by W3C Uses different compression technique, but still lossless Not licenced, freely implementable Transparency retained, in more sophisticated form More than 256 colours possible.

29. © De Montfort University, 200429 JPEG Lossy compression technique JPG image format incorporates JPEG compression Uses discrete cosine transformation (DCT) – divides image up into areas and stores a transformation of the values within each area Compression factor can be specified when converting to jpg format (higher compression, more loss, lower quality) Good for images with large tonal ranges such as photographs Use for post production storage only

30. © De Montfort University, 200430 Comparison Image size 840 * 560 pixels Family.bmp 1428K Family.jpg (15%) 130K Family.jpg (50%) 63K Family.jpg (90%) 24K Family.gif 381K