Transcript Document

Vector and Bitmapped graphics
Howell Istance
School of Computing
De Montfort University
© De Montfort University, 2004
1
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
2
Bitmapped images
Pixels make up an image
© De Montfort University, 2004
Colour - Depth
#FF00A3
#255,0,163
#11111111,00000000,01100011
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
Pixmaps
Pixmap – area of memory
FF 255 red
00 0 green
3 bytes per pixel = 24 bits
00 0 blue
In Windows, this is known as a device context
(DC)
© De Montfort University, 2004
5
Location in memory corresponds to
display location
Send to device (display) driver
© De Montfort University, 2004
6
Vector graphics
Model
Transform (scale)
Clip
Render – convert model to
array of pixel values
© De Montfort University, 2004
7
Models in Vector graphics
y
(0,0)
x
• 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)
© De Montfort University, 2004
8
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
x
(a,b)
For n = 0 to 360 {
y
r
x = r*sin(n)
y = r*cos(n)
draw_point_at( a+ x, b + y) }
© De Montfort University, 2004
9
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
10
Bitmapped Images…
Transform (scale)
Clip
‘Physical’ pixel values
Model – array of
pixel values
‘Logical’ pixel values
© De Montfort University, 2004
11
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
12
Persistance…
Transform (scale)
Clip
File storage requires formats to store each type of model efficiently
© De Montfort University, 2004
13
Storing models….as bitmapped images
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
• 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
© De Montfort University, 2004
14
Storing models….as vector graphics
4.5 cm
(Post Script)
0 1 0 setrgbcolour
0 0 128 128 rectfill
1 0 1 setrgbcolour
32 32 64 64 rectfill
• 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
© De Montfort University, 2004
15
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
16
Distorted poppy…
Easy to manipulate individual elements of image here…
© De Montfort University, 2004
17
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
18
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
19
Scaling bitmapped images…
Logical (model) pixels
physical pixels
Scale factor = 1
Scale factor = 2
• 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
© De Montfort University, 2004
20
Effects of Anti-aliasing
No anti-aliasing
Anti-aliasing applied
• The bitmapped image of the iris has been scaled up 6 times
© De Montfort University, 2004
21
Vector graphics
Transform (scale)
Clip
Model
© De Montfort University, 2004
22
Vectorising and rasterising
rasterising
vectorising
Vector graphics Model
Bitmapped image 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
© De Montfort University, 2004
23
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
24
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.
1
2
3
4
5
6
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, 2004
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
27
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
28
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
29
Comparison
Image size
840 * 560 pixels
• Family.bmp
1428K
• Family.jpg (15%)
• Family.jpg (50%)
• Family.jpg (90%)
130K
63K
24K
• Family.gif
381K
© De Montfort University, 2004
30