This document provides an introduction to vector graphics, contrasting them with raster/bitmap graphics. It discusses how vector graphics use mathematical relationships between points and paths rather than a grid of pixels. Key aspects covered include how vectors describe coordinates and displacements between points, how basic shapes can be defined through vector equations rather than every pixel coordinate, and how vector drawings can be scaled smoothly versus the "staircase effect" in bitmaps. Examples of simple vector code in SVG format are also provided. The document concludes by outlining some more complex vector techniques to be covered next week, such as Bezier curves.

1. 4014COMP Fundamentals of Multimedia
Fundamentals of Vector Graphics
Lecturer : Andy Laws
Room 604a
School of Computing &
Mathematical Sciences
Tel: +44(0)151 231 2270
E-mail A.Laws@ljmu.ac.uk

2. 2

3. Pointillism
3

4. Zoomed detail
4

5. Further zoomed
5

6. 6
Introduction
 In previous sessions we’ve been looking at
bitmapped images in some detail
 Now, I want to move on to look at vector
graphics as an alternative way of producing
graphics
 Vector graphics have very different
characteristics to bitmapped graphics
 I’ve mentioned before that vector graphics
describe mathematical representations of
“objects” in the graphics, without saying how
that occurs
 Vector graphics “scale” much more effectively
than bitmapped graphics
 We’ll look at why this is so this week, so there
are some “mathematical” bits, but don’t panic,
the computer takes care of the maths, you just
have to be aware that it happens and how this
is different to bitmapped graphics

7. Raster versus Vector Graphics
 There are two kinds of computer
graphics - raster (composed of pixels)
and vector (composed of paths)
 Raster images are more commonly
called bitmap images
 A bitmap image uses a grid of individual
pixels where each pixel can be a
different colour or shade
 Bitmaps are composed of pixels
 Vector graphics use mathematical
relationships between points and the
paths connecting them to describe an
image
 Vector graphics are composed of
paths
7

8. Coordinates & Vectors
8
 In vector graphics, images are built using
shapes that can easily be described
mathematically
 If an image is stored in a rectangular array of
pixels, then any pixel can be identified by
giving its column and row number
 Columns are numbered from Left to Right
 Rows are numbered from Top to Bottom
 Any pixel can now be uniquely identified by
a pair of numbers (x, y) i.e. it’s coordinates
 So here, pixel A is at (3, 7)
 B is at (7, 3)
 And the pixel labelled O at the origin (0, 0)
 Clearly, for this to work, coordinates are
integers between 0 and the maximum size
of the image

9. Coordinate Displacements or
Movements
 Pairs of coordinates can define
points, but can also define
“displacements” or “movement”
 So, to get from A to B, we move 4
units right and 4 units up
 Or actually, -4 units down (as the
units increase downwards)
 So, the displacement from A to B can
be specified by (4, -4)
 In general:
 A = (3, 7) = Point 1 (P1) = (x1, y1)
 B = (7, 3) = Point 2 (P2) = (x2, y2)
 The displacement from P1 to P2
(x2 – x1, y2 – y1) = (4, -4)
 Or, (P2 – P1)
 Displacement specified like this is a
two-dimensional vector
10
4
Units
4 Units

10. Vector Coordinates & Geometry
11
 A vector has direction and
magnitude (length)
 The vector P2 – P1 is different
from P1 – P2
 P2 – P1 = (7, 3) – (3, 7) =(4, -4)
 P1 – P2 = (3, 7) – (7, 3) = (-4, 4)
 They have the same length, but
opposite directions
P2 – P1
P1 – P2

11. Coordinate Geometry to Shapes
12
 Coordinates let us identify points in
space
 But we don’t always need to specify
every coordinate to describe a “shape”
 Sometimes, the relationship between
coordinates is enough
 For example, if (x, y) is any point on a
straight line that passes through the
origin at 45o from north-west to south-
east
 Then, rather than have to specify every
coordinate value on the line we know
that X must equal Y
 Remember Y extends down from the
origin here – and X = Y specifies an
infinite line i.e. the trajectory
X = Y
(-7, -7)
(-4, -4)
(7, 7)
(4, 4)

12. Line Trajectory & Segments
 The trajectory of a line is
usually written as y = mx+c
 Where m and c are
constants representing slope
and intercept i.e. where the
line crosses the y axis
 However, typically in vector
graphics, we use finite line
segments
 So, in practice, all we need to
store are two end points for a
line – and the shape e.g. line
 If we do that, then m and c
can be derived from those
coordinates
13
y = 2x + 1
x = -2, y = -3
2 * -2 = -4 + 1 = -3
x = 0, y = 1
x = 2, y = 5

13. Rendering a Vector Drawing
 To render a vector drawing, the stored values, e.g. line end
points coupled with the general form i.e. line to set values
to form the image
 So, a line with end points (0, 31) and (12, 1), y coordinates
would be computed for each x value from 0 to 12
 The equation for this line is y = 31 – 5x/2, which will
possibly give a fractional result e.g. y = 3.25534
 But pixel coordinates are always whole integers, we can’t
set the value of part pixels
 So, for the line (0, 31) to (12, 1), some of the y co-ordinates
have to be rounded down to the nearest integer
 So, to draw a line, blocks of pixels are drawn that alternate
between two and three pixels in height
 The displayed line is an “approximation” of the ideal line
 And you get an uneven “staircase” effect
 Depending on the resolution i.e. pixel size of the output
device, this can result in “jaggies”
14
( 0, 31)
( 1, 28)
( 2, 26)
( 3, 23)
( 4, 21)
( 5, 18)
( 6, 16)
( 7, 13)
( 8, 11)
( 9, 8)
(10, 6)
(11, 3)
(12, 1)
3
2
3
2
3
2
2
3
2
3
2
3

14. Anti-aliasing – More apparent in
Bitmapped Graphics
 The staircase effect is produced by the need
to round real values to integer pixel values
 Plus the pronounced contrast between black
and white pixels
 We can’t just tone down the black pixels as
we’d just produce a grey line instead of a
black one
 Instead, a range of greys is used to convey a
smoothness to the line that can’t actually be
produced with finite pixels
 It’s something of an optical illusion
 This one pixel wide line, is in fact composed
of a variety of greys of varying intensity
 How it works:
 The colour value of a pixel is determined by its
position relative to the ideal line of path of the
line
 A pixel directly on that path will be 100% black
 A pixel that falls 50% on the path and 50% off
will be 50% black
 A pixel 25% on the path will be 25% black
 etc
15
Photoshop
Illustrator
Path

15. Example Scalable Vector Graphics
Code (SVG)
 While using vectors looks horrifically
complex, it actually is simple in operation
<!DOCTYPE html>
<html>
<body>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1">
<line x1="0" y1="0"
x2="200" y2="200"
style="stroke:rgb(255,0,0);
stroke-width:2" />
</svg>
</body>
</html>
16

16. Vector Objects
 The same concept of vectors can be
extended to encompass a number of
shapes
 Each with a simple mathematical
representation that can be compactly
stored and rendered efficiently
 Typical shapes are
 Rectangles and squares
 Ellipses and circles
 Straight lines, polygons, stars etc.
 Plus, a class of smooth curves called
Bezier curves
 Because software tools work with a
description of the shape rather than a
map of its pixels, it’s easy to move,
scale, rotate and skew shapes
17

17. Vector Drawing
 Almost all vector drawing programs
provide the same types of tools used in
much the same way
 A rectangle can be drawn by selecting the
rectangle tool, holding down the mouse
button where you want the top-left corner
and dragging to the opposite corner
 Clearly, the rectangle can be completely
described by the coordinates of its
opposite corners re-sizing the rectangle
then simply re-calculates
 Ellipses can be drawn in a similar fashion
from one point on the perimeter to a point
on the opposite side (although Adobe
Illustrator draws centre out)
18

18. Vector Drawing
 Scalable Vector Graphics record the
ellipse centre coordinates cx, cy and the
two radii rx, ry
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1">
<ellipse cx="300" cy="80" rx="100"
ry="50"
style="fill:yellow;stroke:purple;stroke-
width:2"/>
< /svg>
 Squares and circles are special cases of
rectangles and ellipses i.e. square =equal
sides, circle x and y radii equal, so most
drawing packages allow these to be
easily drawn by restricting rectangles and
ellipses to squares and circles
 In Illustrator, hold down the Shift key
when drawing a rectangle or ellipse
19

19. 20
More Complex Vectors – Next Week
 Mathematical objects vectors can be used
to draw very efficient and scalable graphics
 The vectors described are simply “paths”
i.e. lines between points
 Fine when used to draw regular shapes
like rectangles and circles, but clearly we
want more than that
 Bézier curves are a powerful tool used to
draw smooth, continuous curves
 Bézier curves are important, not only in
drawing graphics but also used to describe
 Fonts e.g. Adobe Postscript
 Text effects along a curved path
 Smooth motion paths for objects in animation
 More on Bezier Curves next week

20. Today's Laboratory
 We have the seventh
floor until 2:00 pm
 Lab exercises on
Blackboard
21