Upload
lynne-johns
View
219
Download
3
Embed Size (px)
Citation preview
© De Montfort University, 2004 1
Vector and Bitmapped graphics
Howell Istance
School of Computing
De Montfort University
© De Montfort University, 2004 2
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#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
© De Montfort University, 2004 5
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, 2004 6
Location in memory corresponds to display location
Send to device (display) driver
© De Montfort University, 2004 7
Vector graphics
Model
Transform (scale)
Clip
Render – convert model to array of pixel values
© De Montfort University, 2004 8
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, 2004 9
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, 2004 10
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, 2004 11
Bitmapped Images…
Model – array of pixel values
Transform (scale)
Clip
‘Logical’ pixel values
‘Physical’ pixel values
© De Montfort University, 2004 12
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, 2004 13
Persistance…
Transform (scale)
Clip
File storage requires formats to store each type of model efficiently
© De Montfort University, 2004 14
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 a72 dpi (dots per inch) monitor, each side willcontain 128 pixels
© De Montfort University, 2004 15
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 setrgbcolour0 0 128 128 rectfill1 0 1 setrgbcolour32 32 64 64 rectfill
© De Montfort University, 2004 16
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, 2004 17
Distorted poppy…
Easy to manipulate individual elements of image here…
© De Montfort University, 2004 18
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, 2004 19
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, 2004 20
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) pixels physical pixels
Scale factor = 1
Scale factor = 2
© De Montfort University, 2004 21
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, 2004 22
Vector graphics
Model
Transform (scale)
Clip
© De Montfort University, 2004 23
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, 2004 24
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.
321
654
The palette
© De Montfort University, 2004
Compression - LZW / RLE
TIF uncompressed = 289kTIF lzw compressed = 248k
TIF uncompressed = 90kTIF lzw compressed = 5k
© De Montfort University, 2004 27
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, 2004 28
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, 2004 29
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, 2004 30
Comparison
Image size 840 * 560 pixels
• Family.bmp 1428K
• Family.jpg (15%) 130K
• Family.jpg (50%) 63K
• Family.jpg (90%) 24K
• Family.gif 381K