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
