Vector Graphics

Muchake Brian
Phone: 0701178573
bmuchake@[Link]
Objectives
▪ Introduction to Vector Graphics
▪ Review of Pythagorean theorem
▪ Understand distance among objects
▪ Discuss mid point and line segments
▪ Review of Vector scaling, magnitude, normalisation and dot product
▪ Discuss cross product in vector 3’s
▪ Discuss angles among vectors
Introduction to Vectors
▪ Vectors refers to two pieces of information namely direction and length/magnitude. Thus vectors can
be visualized and measured.
▪ A given vector is always equal to its components for example the x component and y component.

▪ Vectors can be written as a row vector or column vector as represented above.

▪ The x and y components of a vector can help us gain the direction when plotted. The rule of thumb in
finding the length is to formulate a right triangle with the length showing direction of the vector being
used as the hypotenuse and then use the Pythagoras theory.
▪ Vectors have magnitude and direction. The magnitude is the length of the vector.
Introduction to Vectors [Cont’d]
▪ In vector analysis the [x,y] vector is the commonest vector. This is always referred to as a vector
two.
▪ Another vector is a vector three [x,y,z].
▪ And lastly vector four [x,y,z,w]. The reason why there is an x,y,z,w is because in 3D CG we use what
is called UV’s.
▪ UV’s should be a common terminology if you have ever done any 3D modeling or any thing in 3D.
▪ Most 2D geometry is pictured with the first coordinate on the horizontal axis and the second
coordinate on the vertical axis, as in
Introduction to Vectors [Cont’d]

▪ Much of Computer Graphics involves discussion of points in 2D or 3D.

▪ Many graphics concepts need basic math like linear algebra. Point coordinates are vector quantities,
as opposed to a single number e.g. 3 which is a scalar quantity.
▪ Just as we can perform basic operations such as addition, multiplication etc. on scalar values, so we
can generalize such operations to vectors.
Points and Vectors
▪ A point in n-dimensional space is just a collection of n values that can be considered the point’s
coordinates.
▪ A vector in n-dimensional space is also a collection of n values. The difference between a point and a
vector lies not in the coordinates, but rather in the way we interpret these coordinates.
▪ The coordinates of a point give it a position in space. For example, the point (2, 3) might be drawn:
Vector Graphics Review
▪ Vector Graphics refers to software and hardware systems that use geometrical formulas to represent
images. The other method for representing graphical images is through bit maps, in which the image is
composed of a pattern of dots-Raster graphics (RG).
▪ Programs that enable you to create and manipulate vector graphics are called draw programs, whereas
programs that manipulated bit-mapped images are called paint programs.
▪ Vector-oriented images are more flexible than bit maps because they can be resized and stretched.
▪ In addition, images stored as vectors look better on devices (monitors and printers) with higher resolution,
whereas bit-mapped images always appear the same regardless of a device's resolution.
▪ Another advantage of vector graphics is that representations of images often require less memory than
bit-mapped images do.
▪ Almost all sophisticated graphics systems, including CADD systems and animation software, use vector
graphics. In addition, many printers (PostScript printers, for example) use vector graphics.
Vector Graphics Review [Cont’d]
▪ Note that most output devices, including dot-matrix printers, laser printers, and display monitors, are
raster devices (plotters are the notable exception).
▪ This means that all objects, even vector objects, must be translated into bit maps before being output.
Vector Addition and Scalar Multiplication
▪ We can add or subtract two vectors of the same size by summing corresponding coordinates:
▪ <2, 4, -1> + <5, 1, 6> = <7, 5, 5>
▪ We can multiply a vector by a scalar by multiplying each coordinate of the vector by the scalar; the
result is a vector:
▪ <2, 5, 1>*3 = <6, 15, 3>
▪ Both of these operations have a simple geometrical interpretation. Recall that we can think of a vector
as providing a direction and a distance. The sum of two vectors represents moving in the direction of
the first vector for its distance, then in the direction of the second for its distance.
▪ Research on vector addition and Subtraction using the Parallelogram Method
Pythagorean Theorem
▪ Pythagoras: Was Greek philosopher and mathematician who proved the Pythagorean theorem;
considered to be the first true mathematician (circa 580-500 BC).
▪ Pythagorean: A concept that relates to Pythagoras or his geometry.
▪ Its all about right angles with out-side having 900.
▪ The side opposite the right triangle 900 is called the hypotenuse.
▪ In mathematics, the Pythagorean theorem — or Pythagoras' theorem — is a relation in Euclidean
geometry among the three sides of a right triangle (right-angled triangle). In terms of areas, it states:
▪ In any right-angled triangle, the area of the square whose side is the hypotenuse (the side opposite
the right angle) is equal to the sum of the areas of the squares whose sides are the two legs (the two
sides that meet at a right angle).
Pythagorean Formulae
▪ The theorem can be written as an equation relating the lengths of the sides a, b and c, often called
the Pythagorean equation.
▪ A2+B2=C 2 or
▪ Where c represents the length of the hypotenuse, and a and b represent the lengths of the other two
sides.
▪ The theorem has numerous proofs, possibly the most of any mathematical theorem.
▪ These are very diverse, including both geometric proofs and algebraic proofs, with some dating back
thousands of years.
▪ The theorem can be generalized in various ways, including higher-dimensional spaces, to spaces that
are not Euclidean, to objects that are not right triangles, and indeed, to objects that are not triangles
at all, but n-dimensional solids.
Pythagorean Formulae [Cont’d]
▪ The Pythagorean theorem has attracted interest outside mathematics as a symbol of mathematical
abstruseness, mystique, or intellectual power; popular references in literature, plays, musicals, songs,
stamps and cartoons abound.
▪ If the length of both a and b are known, then c can be calculated as follows:

▪ Always remember:
Pythagorean Formulae [Cont’d]
▪ If the length of hypotenuse c and one leg (a or b) are known, then the length of the other leg can be
calculated with the following equations:

▪ The Pythagorean equation relates the sides of a right triangle in a simple way, so that if the lengths of
any two sides are known the length of the third side can be found.
▪ Another corollary of the theorem is that in any right triangle, the hypotenuse is greater than any one of
the legs, but less than the sum of them.
Application of Pythagorean Theorem
▪ Imagine a scenario where you have a right angled triangle as shown below. Figure out the hypotenuse
Application of Pythagorean Theorem [Cont’d]
▪ Imagine another scenario where you have a right angled triangle as shown below. Find out the other
side of the triangle. Note the resultant answer is wrong due to wrong subtraction results.
Application of Pythagorean Theorem [Cont’d]
▪ Imagine another scenario where you have a right angled triangle as shown below. Find out the other
side of the triangle. Note the resultant answer is wrong due to wrong subtraction results.

▪ Research on:
▪ the various proofs associated to the Pythagorean theorem.
▪ the pros and cons of using Pythagorean theorem.
Distance Between Two Objects
▪ Finding the distance between objects is some thing which is pretty frequently done when discussing
the math of computer graphics basically in 2D graphics understanding.
▪ Basically you might need to find the distance between two objects to do cool calculations and so forth.
▪ Consider two points and you must find the distance between the two.
▪ Point M has only a range of 3 and can only shoot a range of 3 and point P has a range of 7 and can
only shoot a range of 7. Predetermine whether two points can hit each other. Imagine points of M have
got coordinates of [3,4] and [6,8].
▪ To solve the above problem consider using the Pythagoras's theory.
▪ Remember this was covered earlier in geometry.
Distance Between Two Objects [Cont’d]
▪ Note that two points given above constitute a right triangle. If you tried to draw some lines.

▪ In order to find a and b sides of the right triangle consider.

Distance Between Two Objects [Cont’d]
▪ Where by the changes in x and y can be got by:

▪ Therefor according to our right angle above a=3 and b=4

▪ Therefore going back to the Pythagoras's theory

▪ And c= 5
Distance Between Two Objects [Cont’d]
▪ Remember point M had a range of 3 and P had a range of 7 and the distance between M and P = 5.
▪ In conclusion therefore:
▪ M can not hit or shoot p while P can shoot M and this is because p has a range of 7 and M has a
range of 3.
▪ Note that this application should help always to find the distance between two objects pretty easy
what some people call magic, miracles and mysteries in CG mathematics.
▪ Therefore the distance formula of two given points (x1, y1) and (x2, y2),
Distance Between Two Objects [Cont’d]

▪ Note: The distance formula of two given points (x1, y1) and (x2, y2),

▪ Don't let the subscripts scare you. They only indicate that there is a "first" point and a "second" point;
that is, that you have two points. Whichever one you call "first" or "second" is up to you. The distance
will be the same, regardless.
▪ Find the distance between the points (–2, –3) and (–4, 4).

▪ Then the distance is sqrt(53), or about 7.28, rounded to two decimal places.
Distance Between Two Objects [Cont’d]
▪ Very often you will encounter the Distance Formula in veiled forms. That is, the exercise will not
explicitly state that you need to use the Distance Formula; instead, you have to notice that you need to
find the distance, and then remember (and apply) the Formula. For instance:
▪ Find the radius of a circle, given that the center is at (2, –3) and the point (–1, –2) lies on the circle.
▪ The radius is the distance between the center and any point on the circle, so you need to find the
distance:

▪ Then the radius is sqrt(10), or about 3.16, rounded to two decimal places.
Distance Between Two Objects [Cont’d]
▪ Find all points (4, y) that are 10 units from the point (–2, –1).
▪ You plug the two points and the distance into the Distance Formula:
▪ (4—2)+(y—1)
▪ (Y+1)(y+1)
▪ Y(y+1) 1(y+1)
36+Y2+2y+1
Y2+2y+37
Distance Between Two Objects [Cont’d]
▪ This means y = –9 or y = 7, so the two points are (4, –9) and (4, 7).
▪ If you're not sure why there are two points that solve this exercise, try drawing the (–2, –1) and then
drawing a circle with radius 10 around this.
▪ Then draw the vertical line through x = 4. You'll see that the vertical line crosses the circle in two spots:
(4, –9) and (4, 7).
Distance Between Two Objects [Cont’d] for Vector 3’s
▪ The distance between two points is the length of the path connecting them. The shortest path
distance is a straight line. In a 3 dimensional plane, the distance between points (X1, Y1, Z1) and
(X2, Y2, Z2) is given by:

▪ Square the difference for each axis, then sum them up and take the square root:
▪ The distance between the two points (9,2,7) and (4,8,10) is:
Distance Between Two Objects [Cont’d] for Vector 3’s
▪ To calculate the distance between 2 points, (X1, Y1, Z1) and (X2, Y2, Z2),
for example, (5,6,2) and (-7,11,-13), we plug our values into the distance formula:

▪ Combining terms inside parentheses we get:

Midpoint of Line Segment

▪ The point halfway between the endpoints of a line segment is called the midpoint. A midpoint
divides a line segment into two equal segments.

▪ A midpoint of a line segment is the point on that line segment that divides the segment two
congruent segments.
▪ In Coordinate Geometry, there are several ways to determine the midpoint of a line
segment. This class will use the formula.
Midpoint of Line Segment [Cont’d]

▪ The mid point theorem states that the coordinates of the midpoint of a line segment are the average of
the coordinates of its endpoints.
▪ A line segment on the coordinate plane is defined by two endpoints whose coordinates are known.
▪ The midpoint of this line is exactly halfway between these endpoints and its location can be found
using the Midpoint Theorem, which states:
▪ The x-coordinate of the midpoint is the average of the x-coordinates of the two endpoints.
▪ Likewise, the y-coordinate is the average of the y-coordinates of the endpoints.
Midpoint of Line Segment [Cont’d]
▪ If the line segments are diagonally positioned, more thought must be paid to the solution. When you
are finding the coordinates of the midpoint of a segment, you are actually finding the average (mean) of
the x-coordinates and the average (mean) of the y-coordinates.
▪ The Midpoint Formula works for all line segments: vertical, horizontal or diagonal.
▪ Find the midpoint of line segment A(-3,4) B(2,1).The midpoint will have coordinates.
▪ Never get surprised if your answer contains a fraction. Answers may be left in fractional form or written
as decimals.
▪ M is the midpoint of vector CD. The coordinates M(-1,1) and C(1,-3) are given.
Find the coordinates of point D.
Midpoint of Line Segment [Cont’d]
▪ First, visualize the situation. This will give you an idea of approximately where point D will be
located. When you find your answer, be sure it matches with your visualization of where the point
should be located.
▪ M(-1,1), C(1,-3) and D(x,y)
▪ Substitute into the Midpoint Formula:
▪ The coordinates of point D are (-3,5).
Midpoint of Line Segment [Cont’d]
▪ Given the points ( 1, -2 ) and ( -3, 5 ), find the midpoint of the line segment joining them.
▪ Using the midpoint formula, label the points as x1 = -1,
y1 = -2, x2 = -3, and y2 = 5.
▪ To find the midpoint M of the line segment joining the points, use the midpoint formula :

▪ Find the value of p so that (–2, 2.5) is the midpoint between (p, 2) and (–1, 3).
▪ This reduces to needing to figure out what p is, in order to
make the x-values work:
Midpoint of Line Segment [Cont’d]

▪ The formula for finding the midpoint M of a segment, with endpoints A(xA,yA) and B(xB,yB), is:

▪ Find midpoint of a segment with endpoints A(3,−4) and B(−1,3).

Ray in Coordinate Geometry
▪ In coordinate geometry a ray is a line which starts at a point with a given point and goes off for ever in
the same direction to infinity possibly through a second point.
▪ A ray is a line that starts at a given point and goes off for ever in some direction. It may pass through
another point as it does so.
Vector Scaling
▪ In Euclidean geometry, uniform scaling (or isotropic scaling) is a linear transformation that enlarges
(increases) or shrinks (diminishes) objects by a scale factor that is the same in all directions.
▪ The result of uniform scaling is similar (in the geometric sense) to the original. A scale factor of 1 is
normally allowed, so that congruent shapes are also classed as similar.
▪ Uniform scaling happens, for example, when enlarging or reducing a photograph, or when creating a
scale model of a building, car, airplane, etc.
▪ More general is scaling with a separate scale factor for each axis direction. Non-uniform scaling
(anisotropic scaling) is obtained when at least one of the scaling factors is different from the others; a
special case is directional scaling or stretching (in one direction).
Vector Scaling [Cont’d]
▪ Non-uniform scaling changes the shape of the object; e.g. a square may change into a rectangle, or into
a parallelogram if the sides of the square are not parallel to the scaling axes (the angles between lines
parallel to the axes are preserved, but not all angles). It occurs, for example, when a faraway billboard
is viewed from an oblique angle, or when the shadow of a flat object falls on a surface that is not parallel
to it.
▪ When the scale factor is larger than 1, (uniform or non-uniform) scaling is sometimes also called dilation
or enlargement. When the scale factor is a positive number smaller than 1, scaling is sometimes also
called contraction.
▪ In the most general sense, a scaling includes the case that the directions of scaling are not
perpendicular. It includes also the case that one or more scale factors are equal to zero (projection),
and the case of one or more negative scale factors (a directional scaling by -1 is equivalent to a
reflection).
▪ Scaling is a linear transformation, and a special case of homothetic transformation. In most cases, the
homothetic transformations are non-linear transformations.
Vector Scaling [Cont’d]
▪ Scaling a geometrical vector means keeping its orientation the same but changing its length by a
scale factor. It is like changing the scale of a picture; the objects expand or shrink, but the directions
remain the same.
▪ If we wish to increase or reduce a vector quantity by a scale factor λ then we multiply each element in
the vector by λ.

▪ A vector can be "scaled" off the unit vector. Unit vector is a vector with a magnitude of 1. Here vector a
is shown to be 2.5 times a unit vector.
▪ You can use unit vectors to help you work with vectors in
2 dimensions:
▪ Vector a is made up of 2 "x" unit vectors
and 1.3 "y" unit vectors
Vector Scaling [Cont’d]
▪ Likewise we can use unit vectors in three (or more!) dimensions:

▪ When using vectors we call an ordinary number a "scalar".

▪ Scalar: just a number (like 7 or −0.32) ... definitely not a vector.
Vector Magnitude
▪ Magnitude is basically the distance of a vector.
▪ As noted vector 3 [x,y,z] is most common in CG.
▪ In order to get the magnitude of a vector we use the formula below.
▪ Remember the Pythagorean theorem.

▪ If we took a vector three with some numbers [2,4,8].

▪ We write the length of magnitude of a vector s as |s|.
▪ To get the distance/magnitude of the above vector will be calculated using the formula below.
Vector Magnitude [Cont’d]

▪ Consider another vector [10,1,3].

Vector Normalization
▪ In normalization, focus should be put on getting a number between 0 and 1.
▪ To calculate vector normalization one should first get magnitude of a vector because magnitude is
part of the formula of calculating vector normalization.
▪ We use the superscript ’hat’ notation to indicate that a vector is normalised e.g.
▪ Consider a vector of [2,4,8] where by its magnitude will be:
▪ Normalization is basically taking the x,y,z values of the vector and divide each of them by the
magnitude.
▪ So for the previous example the normalization for the vector will entail.
Vector Normalization [Cont’d]
▪ Take note that the new normalized vector will include:
[0.218, 0.436, 0.872] respectively.

▪ Vector Normalization is basically important for getting direction and in graphics programming.
▪ Important facts to calculate vector normalization are:
▪ Getting to know the formula for magnitude calculation:
Vector Normalization [Cont’d]
▪ And always to remember that after magnitude calculation values of the x, y, z of the un normalized
vector should be divided the magnitude product derived from magnitude calculation.
Vector Dot Product
▪ Dot product just like the magnitude will return a number instead of a vector 3.
▪ Consider an example of two vectors:

▪ Consider two vector a and b [1,3,8] and [2,1,0] respectively calculate the dot product.
Vector Dot Product [Cont’d]
▪ Consider another example of vectors [10,3,7] and [4,8,1]
Cross Product
▪ Taking the cross product (or “vector product”) of two vectors returns us a vector or-thogonal to those
two vectors.
▪ Given two vectors

▪ The cross product is defined as:

▪ This is often remembered using the mnemonic ‘xyzzy’.

▪ In this course we only consider the definition of the cross product in 3D.
Cross Product [Cont’d]
▪ When a and b start at the origin point (0,0,0), the Cross Product will end at:
▪ c x = a yb z - a zb y
▪ c y = a zb x - a xb z
▪ c z = a xb y – a yb x
❑ Example:
▪ a = (2,3,4) and b = (5,6,7)
▪ cx = aybz - azby = 3×7 - 4×6 = -3
▪ cy = azbx - axbz = 4×5 - 2×7 = 6
▪ cz = axby - aybx = 2×6 - 3×5 = -3
▪ a × b = (-3,6,-3)
Reference Frames
▪ A frame of reference (or reference frame) may refer to a coordinate system used to represent and
measure properties of objects, such as their position and orientation, at different moments of time.
▪ A reference frame does not specify coordinates, but only defines the same 3-dimensional space for all
moments of time such that the frame can distinguish objects at rest from those that are moving.
▪ In Einsteinian relativity, reference frames are used to specify the relationship between a moving
observer and the phenomenon or phenomena under observation.
▪ In this context, the phrase often becomes "observational frame of reference" (or "observational
reference frame"), which implies that the observer is at rest in the frame, although not necessarily
located at its origin.
▪ When we write down a point in Cartesian coordinates, for example
Reference Frames [Cont’d]
▪ We interpret that notation as “the point is 3 units from the origin travelling in the positive direction of the x
axis, and 2 units from the origin travelling in the positive direction of the y axis”.
▪ We can write this more generally and succinctly as:

▪ This basis set is referred to as the root reference frame because we define the basis vectors of non standard
reference frames with respect to it.
▪ E.g. a point [2,3] defined in reference frame
the root reference frame.
▪ Some times the term reference frame is used to refer to the coordinate space.
Reference Frames [Cont’d]
▪ However other choices of basis vector are equally valid, so long as the basis vectors are neither parallel
not anti-parallel (do not point in the same direction).
▪ Cartesian coordinate systems describe vectors in terms of distance along each of the principal axes
e.g.( x,y) of the space.
▪ This Cartesian form is by far the most common way to represent vector quantities, like the location of
points in space.
▪ Sometimes it is preferable to define vectors in terms of length, and their orientation. This is called
radial-polar form.
▪ In the case of 2D point locations, we describe the point in terms of:
▪ Its distance from the origin (r),
▪ The angle (θ) between a vertical line (pointing in the positive direction of the y axis),
▪ And the line subtended from the point to the origin.
Reference Frames [Cont’d]
▪ To convert from Cartesian form to polar form (r, θ) we consider a right-angled triangle of
side x and y.
▪ We can use Pythagoras’ theorem to determine the length of hypotenuse r, and some basic
trigonometry to reveal that θ = tan(y/x) and so:

▪ To convert from polar form to Cartesian form we again apply some trigonometry.
Angles between Two Vectors
▪ In finding the angle between two vectors we consider
being equal to the dot product of the two vectors Divided by the magnitude of the two vectors.
▪ This can be represented like:

▪ Consider a scenario of two vectors a and b [2,7,2] and [1,3,9].

Angles between Two Vectors [Cont’d]
▪ Therefore the angle between two vectors is 55.30 degrees which is approximately 55 degrees.
▪ If the angle between the two vectors is 90 degrees and which means they are perpendicular.
▪ This is termed as orthogonal.
 Types of Angles [Cont’d]
▪ There are many different types of angles on top of the orthogonal angles discussed above. Angles
can be classified determined by the measure of the angle.
▪ The corner point of an angle is called the vertex. And the two straight sides are called arms. The
angle is the amount of turn between each arm.

Angle "a" is "BAC", and angle "θ" is "BCD"

▪ There are two main ways to label angles:
✔ Give the angle a name, usually a lower-case letter like a or b, or sometimes a Greek letter like α
(alpha) or θ (theta).
✔ or by the three letters on the shape that define the angle, with the middle letter being where the
angle actually is (its vertex).
Types of Angles [Cont’d]
▪ Acute angle: An angle whose measure is less than 90 degrees. The following is an acute angle.
These angles appear "sharp," like the blade on a knife. Example: The angle ABC measures 40
degrees. Angle ABC is acute.

▪ Right - any angle which measures exactly 90 degrees. These are like the edges of a wooden block. A
right angle is thus n angle that is 90 degrees exactly.
Types of Angles [Cont’d]
▪ Obtuse angle: An angle whose measure is bigger than 90 degrees but less than 180 degrees. Thus, it
is between 90 degrees and 180 degrees. The following are obtuse angles.

▪ Straight: Any angle which measures exactly 180 degrees. This isn't even really an angle... it's just a
straight line! An angle whose measure is 180 degrees. Thus, a straight angle look like a straight line.
The following is a straight angle.

▪ Vertical Angles - Two angles formed by intersecting lines. They can not be adjacent but are always
equal in measure. They are across from one another in the corners of the "X" formed by the lines.
▪ Angles that have a common vertex and whose sides are formed by the same lines.
Types of Angles [Cont’d]

▪ Complementary Angles: Two angles whose measures add up to 90 degrees. Angle A = 30 degrees
and angle B = 60 degrees. Then angle A + angle B = 90 degrees. We can say angles A and B are
complementary.

▪ Supplementary Angles - Two angles whose measures add up to 180 degrees. Supplementary
angles can be placed so that they form a straight line. Angle A = 80 degrees and angle B = 100
degrees. Then angle A + angle B = 180 degrees. We can say that angles A and B are
supplementary.
Types of Angles [Cont’d]
▪ Reflex angle: An angle whose measure is bigger than 180 degrees but less than 360 degrees. The
following is a reflex angle.

▪ Adjacent angles: Angle with a common vertex and one common side. <1 and <2, are adjacent
angles
Summary
▪ Introduction to Vector Graphics
▪ Review of Pythagorean theorem
▪ Understand distance among objects
▪ Discuss mid point and line segments
▪ Review of Vector scaling, magnitude, normalisation and dot product
▪ Cross product in vector 3’s
▪ Angles among vectors