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

© De Montfort University, 2004 1

Vector and Bitmapped graphics

Howell Istance

School of Computing

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


#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


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


Location in memory corresponds to display location

Send to device (display) driver


Vector graphics

Model

Transform (scale)

Clip

Render – convert model to array of pixel values


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


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


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


Bitmapped Images…

Model – array of pixel values

Transform (scale)

Clip

‘Logical’ pixel values

‘Physical’ pixel values


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


Persistance…

Transform (scale)

Clip

File storage requires formats to store each type of model efficiently


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


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


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)


Distorted poppy…

Easy to manipulate individual elements of image here…


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


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.


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


Effects of Anti-aliasing

• The bitmapped image of the iris has been scaled up 6 times

No anti-aliasing Anti-aliasing applied


Vector graphics

Model

Transform (scale)

Clip


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


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


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


Compression - LZW / RLE

TIF uncompressed = 289kTIF lzw compressed = 248k

TIF uncompressed = 90kTIF lzw compressed = 5k


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


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.


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


Comparison

Image size 840 * 560 pixels

• Family.bmp 1428K

• Family.jpg (15%) 130K



• Family.gif 381K

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

Documents

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