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

© De Montfort University, 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

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

© De Montfort University, 2004 #FF00A3 #255,0,163 # , , 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

© De Montfort University, 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

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

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

© De Montfort University, 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

© De Montfort University, 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

© De Montfort University, 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

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

© De Montfort University, 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

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

© De Montfort University, Storing models….as bitmapped images The image will contain 128 * 128 = pixels If 3 bytes are used to store each pixel value, then * 3 bytes = 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

© De Montfort University, 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) setrgbcolour rectfill setrgbcolour rectfill

© De Montfort University, 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)

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

© De Montfort University, 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

© De Montfort University, 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.

© De Montfort University, 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

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

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

© De Montfort University, 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

© De Montfort University, 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

© 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 The palette

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

© De Montfort University, 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

© De Montfort University, 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.

© De Montfort University, 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

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