geometric concepts computer graphics points, lines and planesnatacha/teachfall_2009/csc706/... ·...

13
1 1 Computer Graphics Computer Graphics Vectors and Operations Vectors and Operations 2 This Week This Week Vector Arithmetic Vector Arithmetic Geometric Concepts Geometric Concepts Points, Lines and Planes Points, Lines and Planes Exploiting Dot Products Exploiting Dot Products 3 Introduction Introduction Why do we need to learn about vectors? Why do we need to learn about vectors? we need to know where objects are positioned we need to know where objects are positioned in the world in the world the size and orientation of the objects the size and orientation of the objects how far the objects are from one another how far the objects are from one another how reflections work how reflections work how physics works how physics works how light falls on the objects how light falls on the objects 4 Introduction Introduction Coordinates Coordinates 2D 2D 3D left 3D left- handed handed 3D right 3D right-handed handed y x y x z y x z We will be using this one. 5 Graphics Graphics Maths Maths by Example by Example Let’s write a program where a cat chases a rat around the screen. cat rat 6 Graphics Graphics Maths Maths by Example by Example How do we move the cat? typedef struct { GLfloat x, y; GLfloat speed; } animObject; animObject cat = {100,100,0.05}; and before drawing the cat each loop: cat.x+=cat.speed; cat.y+=cat.speed; -mouseChase1.exe

Upload: others

Post on 08-Sep-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Geometric Concepts Computer Graphics Points, Lines and Planesnatacha/TeachFall_2009/CSC706/... · 2009. 10. 28. · 1 1 Computer Graphics Vectors and Operations 2 This Week Vector

1

11

Computer GraphicsComputer GraphicsVectors and Operations Vectors and Operations

2

This WeekThis Week

►►Vector ArithmeticVector Arithmetic►►Geometric ConceptsGeometric Concepts►►Points, Lines and PlanesPoints, Lines and Planes►►Exploiting Dot ProductsExploiting Dot Products

3

IntroductionIntroduction

►►Why do we need to learn about vectors?Why do we need to learn about vectors?we need to know where objects are positioned we need to know where objects are positioned in the worldin the worldthe size and orientation of the objectsthe size and orientation of the objectshow far the objects are from one anotherhow far the objects are from one anotherhow reflections workhow reflections workhow physics workshow physics workshow light falls on the objectshow light falls on the objects

4

IntroductionIntroduction

►►CoordinatesCoordinates2D2D

3D left3D left-- handedhanded

►►3D right3D right--handedhanded

y

x

y

x

zy

x

z

We will be using this

one.

5

Graphics Graphics MathsMaths by Exampleby Example

Let’s write a program where a cat chases a rat around the screen.

cat

rat

6

Graphics Graphics MathsMaths by Exampleby Example

How do we move the cat?

typedef struct{

GLfloat x, y;GLfloat speed;

} animObject;

animObject cat = {100,100,0.05};

and before drawing the cat each loop:

cat.x+=cat.speed;cat.y+=cat.speed;

-mouseChase1.exe

Page 2: Geometric Concepts Computer Graphics Points, Lines and Planesnatacha/TeachFall_2009/CSC706/... · 2009. 10. 28. · 1 1 Computer Graphics Vectors and Operations 2 This Week Vector

2

7

Graphics Graphics MathsMaths by Exampleby Example

What is the first problem we encounter?

• The cat’s movement has nothing to do with the rat’s location.

• The cat just moves off the screen.

8

Graphics Graphics MathsMaths by Exampleby Example

Therefore we need the cat’s movement to be towards the rat.

This can be described as a vector (v).

We can say:

cat.location + v = rat.location

or

v = rat.location – cat.location

(100,100)

(500,400)

v = (500,400) – (100,100)

v = (400,300)

9

Vectors, a closer look.Vectors, a closer look.

►►A vector has a length and a direction.A vector has a length and a direction.►►Vectors are expressed in the same way as Vectors are expressed in the same way as

point coordinates.point coordinates.Point (5,10)Point (5,10)Vector (5,10)Vector (5,10)

►►But how are they different?But how are they different?

10

VectorsVectors

P = (5,10)

v = (5,10)

A point has a location

A vector has no location

A vector is a path from one point to another.

11

VectorsVectors

Q = (8,1)

A vector can be determined by subtracting point coordinates.

v = Q – P

v = (8-1,1-10)

v = (7, -9)

In other words, v tells us how to get from P to Q. (Take 7 steps across and 9 steps down!!)

P = (1,10)

v

12

VectorsVectors

Q = (8,1)

P = (1,10)

v

►► DefinitionsDefinitionsThe difference The difference between two between two points is a vector: points is a vector: ►► v = Qv = Q--PP

The sum of a point The sum of a point and a vector is a and a vector is a point:point:►►Q = P + vQ = P + v

Page 3: Geometric Concepts Computer Graphics Points, Lines and Planesnatacha/TeachFall_2009/CSC706/... · 2009. 10. 28. · 1 1 Computer Graphics Vectors and Operations 2 This Week Vector

3

13

VectorsVectors

►►Your TurnYour TurnWhat is the vector that goes from P = (9,10) What is the vector that goes from P = (9,10) to Q = (15,7) ?to Q = (15,7) ?►►v = (6, v = (6, --3)3)

What is the resulting point from adding vector What is the resulting point from adding vector v = (9,v = (9,-- 20) to point P = (1,2) ?20) to point P = (1,2) ?►►Q = (10, Q = (10, --18)18)

14

Graphics Graphics MathsMaths by Exampleby ExampleSo now we know:

• cat.location + (400,300) = rat.location

Rather than this:

cat.x+=cat.speed;cat.y+=cat.speed;

Should we write this:v.x = rat.x - cat.x;v.y = rat.y - cat.y;cat.x+=v.x;cat.y+=v.y;

? What would happen?- mouseChase2.exe

(100,100)

(500,400)v = (400,300)

15

Graphics Graphics MathsMaths by Exampleby ExampleWhat happened

• The cat’s location was updated to be the location of the rat.

• It moved to the rat’s location in one jump.

• We want it to appear to be moving towards the location.

16

Graphics Graphics MathsMaths by Exampleby ExampleEach loop we want the cat to move along

the vector, but not the whole length.

17

Vector OperationsVector Operations

►►There are two fundamental vector There are two fundamental vector operations:operations:

you can scale themyou can scale them►►8v 8v ►►if v = (1,2) then 8v = (8,16)if v = (1,2) then 8v = (8,16)

you can add themyou can add them►►v + av + a►►v = (3,4), a = (8,1) then v = (3,4), a = (8,1) then v+av+a = (11,5)= (11,5)

18

Vector OperationsVector Operations

►►Scaling a VectorScaling a Vector

v

2v

0.5v

-0.5v

Page 4: Geometric Concepts Computer Graphics Points, Lines and Planesnatacha/TeachFall_2009/CSC706/... · 2009. 10. 28. · 1 1 Computer Graphics Vectors and Operations 2 This Week Vector

4

19

Vector OperationsVector Operations

►►Adding VectorsAdding Vectors

v

a

va

v+a

v

-a

v-a

20

Vector OperationsVector Operations

►► Your TurnYour TurnGiven vector v = (10,20,5) what is:Given vector v = (10,20,5) what is:►►2v, 0.5v and 2v, 0.5v and --0.2v?0.2v?

2v = (20,40,10)2v = (20,40,10)0.5v = (5,10,2.5)0.5v = (5,10,2.5)--0.2v = (0.2v = (--2, 2, --4, 4, --1)1)

Given vector v = (1,1,1) and a = (8,4,2), what is:Given vector v = (1,1,1) and a = (8,4,2), what is:►► v + a, v v + a, v –– a and a a and a –– vv

v + a = (9,5,3)v + a = (9,5,3)v v –– a = (a = (--7, 7, --3, 3, --1)1)a a –– v = (7, 3, 2)v = (7, 3, 2)

21

Vector OperationsVector Operations

►►Linear CombinationsLinear Combinationsadding scaled vectors togetheradding scaled vectors together►►8v + 2a8v + 2a

►►DefinitionDefinitiona linear combination of m vectors va linear combination of m vectors v11, v, v22,…,,…,vvmm is is a vector of the form:a vector of the form:w = aw = a11vv11 + a+ a22vv22 + … + + … + aammvvmm

22

Vector OperationsVector Operations

►►Linear CombinationsLinear Combinations►►ExampleExample

v = (1,2,3) and a = (1,1,1)v = (1,2,3) and a = (1,1,1)2v + 3a = (2,4,6) + (3,3,3) = (5,7,9)2v + 3a = (2,4,6) + (3,3,3) = (5,7,9)

23

Vector OperationsVector Operations

►►Linear CombinationsLinear CombinationsAffine CombinationsAffine Combinations►►Coefficients add up to unityCoefficients add up to unity

in other words the scalars add up to 1in other words the scalars add up to 1aa11 + a+ a22 + … + a+ … + amm = 1= 1

►►e.g. 3a + 2b e.g. 3a + 2b –– 4c (3+24c (3+2--4=1)4=1)►►Forcing an affine combinationForcing an affine combination

(1(1--t)a + (t)a + (t)bt)b

24

Vector OperationsVector Operations

►►Challenge QuestionChallenge QuestionThe follow is an affine transformation:The follow is an affine transformation:►►iaia + + jbjb + ?c+ ?c►►what is the coefficient of c?what is the coefficient of c?

►►i + j + ? = 1i + j + ? = 1►►? = 1 ? = 1 –– i i –– j thereforej therefore►►iaia + + jbjb + (1+ (1--ii--j)cj)c

Page 5: Geometric Concepts Computer Graphics Points, Lines and Planesnatacha/TeachFall_2009/CSC706/... · 2009. 10. 28. · 1 1 Computer Graphics Vectors and Operations 2 This Week Vector

5

25

Vector OperationsVector Operations

►►Linear CombinationsLinear CombinationsConvex CombinationsConvex Combinations►►Coefficients add up to unity…. butCoefficients add up to unity…. but►►all coefficients must be between 0 and 1all coefficients must be between 0 and 1

i.e.i.e.►►aa11 + a+ a22 + … + a+ … + amm = 1 and= 1 and►►1 >= 1 >= aaii >= 0 for all 1,…,m>= 0 for all 1,…,m

e.ge.g►►.9v + .1w.9v + .1w►►.25v + .75w.25v + .75w

26

Vector OperationsVector Operations

►►Linear CombinationsLinear CombinationsConvex CombinationsConvex Combinations►►The set of all convex combinations of two vectors, The set of all convex combinations of two vectors,

vv11 and vand v22 is:is:v = (1v = (1--a)va)v11 + av+ av22

as a varies from 0 to 1as a varies from 0 to 1

►►Why?Why?every possible scalar version of vevery possible scalar version of v11 and vand v22 is covered!is covered!

27

Vector OperationsVector Operations

►►Linear CombinationsLinear CombinationsConvex CombinationsConvex Combinations►►v = (1v = (1--a)va)v11 + av+ av2 2 can can

be rearranged to be rearranged to give:give:

►►v = vv = v11 + a(v+ a(v22--vv11))►►This shows that the This shows that the

vector v will be vvector v will be v11plus some scaled plus some scaled version of the vector version of the vector joining vjoining v11 with vwith v22

v1

v2 v2 – v1

a(v2 – v1)v

28

Vector OperationsVector Operations

►►Linear CombinationsLinear CombinationsConvex CombinationsConvex CombinationsGiven 3 vectors vGiven 3 vectors v11, v, v22 and vand v3 3 the set of linear combinations the set of linear combinations will be:will be:v = av = a11vv11 + a+ a22vv22 + (1+ (1--aa11--aa22)v)v33

v = 0.2vv = 0.2v11 + 0.3v+ 0.3v22 + 0.5v+ 0.5v33

v = 0.5vv = 0.5v11 + 0.5v+ 0.5v22 + 0v+ 0v33

v1

v3

vv22

All values of v will point inside

this region!!

0.2v0.2v11

0.3v0.3v22

0.5v0.5v33

29

Vector OperationsVector Operations

►►Linear CombinationsLinear CombinationsConvex CombinationsConvex CombinationsGiven 3 vectors vGiven 3 vectors v11, v, v22 and vand v3 3 the set of linear combinations the set of linear combinations will be:will be:v = av = a11vv11 + a+ a22vv22 + (1+ (1--aa11--aa22)v)v33

v = 0.2vv = 0.2v11 + 0.3v+ 0.3v22 + 0.5v+ 0.5v33

v = 0.5vv = 0.5v11 + 0.5v+ 0.5v22 + 0v+ 0v33

v1

v3

vv22

All values of v will point inside

this region!!

0.5v0.5v11

0.5v0.5v22

30

Graphics Graphics MathsMaths by Exampleby ExampleSo rather than add the whole vector to the

cat’s location, we could just add a scaled version of it.

If we take one 500th of the vector each loop:

cat.x+=(v.x/500.0);cat.y+=(v.y/500.0);

The cat will move along the vector.

-mouseChase3.exe

Page 6: Geometric Concepts Computer Graphics Points, Lines and Planesnatacha/TeachFall_2009/CSC706/... · 2009. 10. 28. · 1 1 Computer Graphics Vectors and Operations 2 This Week Vector

6

31

Vector LengthVector Length

►►MagnitudeMagnitudeis the length of the vectoris the length of the vectordetermined using Pythagoras’ Theoremdetermined using Pythagoras’ Theorem►►can you remember what this is? can you remember what this is?

32

Vector OperationsVector Operations

►► MagnitudeMagnitudePythagoras’ TheoremPythagoras’ Theorem►►The length of the hypotenuse of a rightThe length of the hypotenuse of a right--angled triangle is angled triangle is

equal to the square root of the sum of the squares of the equal to the square root of the sum of the squares of the other two sides.other two sides.

a

b

h bah 22 +=

33

Vector OperationsVector Operations

►► MagnitudeMagnitudePythagoras’ TheoremPythagoras’ Theorem►►Think of a vector as the Think of a vector as the

hypotenuse of a righthypotenuse of a right--angled angled triangle.triangle.

►►The length of a vector is The length of a vector is denoted using |v|denoted using |v| v

y coordinate

x coordinate

yxv 22|| +=

34

Vector OperationsVector Operations

►► MagnitudeMagnitudePythagoras’ TheoremPythagoras’ Theorem►►Example: What is the magnitude of v = (5,10)?Example: What is the magnitude of v = (5,10)?►► |v| = sqrt(5|v| = sqrt(522+10+1022) = sqrt(25+100) = sqrt(125)) = sqrt(25+100) = sqrt(125)►►11.1811.18

35

Vector OperationsVector Operations

►► Your TurnYour TurnFind |v| for:Find |v| for:v=(1,v=(1,--2,5), w=(10,3,1) and t=(1,1,1)2,5), w=(10,3,1) and t=(1,1,1)►► |v| = 5.5677|v| = 5.5677►► |w| = 10.488|w| = 10.488►► |t| = 1.732|t| = 1.732

36

Vector OperationsVector Operations

►►MagnitudeMagnitudeSince a vector is the Since a vector is the path between to path between to points, then the points, then the length of the vector length of the vector must be the distance must be the distance between the two!!between the two!!

Q = (8,1)

P = (1,10)

v

Page 7: Geometric Concepts Computer Graphics Points, Lines and Planesnatacha/TeachFall_2009/CSC706/... · 2009. 10. 28. · 1 1 Computer Graphics Vectors and Operations 2 This Week Vector

7

37

Vector OperationsVector Operations

►►MagnitudeMagnitudeSometimes it is useful (as you will see soon) Sometimes it is useful (as you will see soon) to scale a vector so that its length is unity (1).to scale a vector so that its length is unity (1).A normal vector is denoted by a hat: A normal vector is denoted by a hat: ââ..This means dividing the vector coordinates by This means dividing the vector coordinates by the length of the vector. the length of the vector. ââ = a/|a|= a/|a|

38

Vector OperationsVector Operations

►►MagnitudeMagnitudeExample:Example:►►What is the normal version of a = (1,5,3) ?What is the normal version of a = (1,5,3) ?►►|a| = sqrt(1|a| = sqrt(122 + 5+ 522 + 3+ 322) = 5.916) = 5.916►►ââ = (1/5.916, 5/5.916, 3/5.916) = (1/5.916, 5/5.916, 3/5.916)

= (0.169, 0.845, 0.5)= (0.169, 0.845, 0.5)

39

Vector OperationsVector Operations

►►Your turnYour turnNormaliseNormalise the following:the following:►►a = (2,4,6)a = (2,4,6)►►g = (1,1,1)g = (1,1,1)►►h = (0,5,1)h = (0,5,1)

Answers with gross rounding errors Answers with gross rounding errors ☺☺►►ââ = (0.26,0.53,0.8)= (0.26,0.53,0.8)►►ĝ = (0.6,0.6,0.6)ĝ = (0.6,0.6,0.6)►►ĥ = (0,1,0.2)ĥ = (0,1,0.2)

40

Important VectorsImportant Vectors

►► 3 Vectors you should become good friends with:3 Vectors you should become good friends with:►► NormalisedNormalised vectors parallel to:vectors parallel to:

x axis (1,0,0); (called i)x axis (1,0,0); (called i)y axis (0,1,0); (called j)y axis (0,1,0); (called j)z axis (0,0,1); (called k)z axis (0,0,1); (called k)

►►These vectors are called:These vectors are called:

the unit vectorsthe unit vectors

41

Graphics Graphics MathsMaths by Exampleby ExampleIn the previous example, the cat moved

towards the rat and it began to slow down because v changed each calculation as the cat got closer to the rat.

NOTE: The length of the vector changed but not the direction.

If we want the cat to move at a constant speed we could use the normalisedversion of v, as we know it would always have a length of 1.

42

Graphics Graphics MathsMaths by Exampleby ExampleSo rather than add the whole vector to the cat’s location, we

could just add the normalised version of it.

Therefore we would do this:v.x = rat.x - cat.x;v.y = rat.y - cat.y;v.normalise();cat.x+=v.x;cat.y+=v.y;

wherevoid normalise(){

float length = sqrt(pow(x,2)+pow(y,2));x = x/length;y = y/length;

}

-mouseChase4.exe

Page 8: Geometric Concepts Computer Graphics Points, Lines and Planesnatacha/TeachFall_2009/CSC706/... · 2009. 10. 28. · 1 1 Computer Graphics Vectors and Operations 2 This Week Vector

8

43

Graphics Graphics MathsMaths by Exampleby Example• The mouse now moves with a constant speed.

It moves a distance of 1 each loop.

• To slow or speed this, we need to incorporate a speed variable.

• Thus:cat.x += v.x * speed;cat.y += v.y * speed;

• We call v, velocityvelocity.

-mouseChase5.exe

44

Graphics Graphics MathsMaths by Exampleby Example• Now we have the cat moving towards the rat!!

• What next?

• The cat should turn in the direction it is moving.

• How do we do this?

• Use vectors of course...!!!

45

Graphics Graphics MathsMaths by Exampleby Example• We need to determine the angle between the

cat’s initial velocity (v1) and it’s new velocity (v2).

• To do this, we use

the DOT product. v1

v2

Ө

46

Vector OperationsVector Operations

►►The DOT ProductThe DOT ProductUsed to solve geometrical problems in Used to solve geometrical problems in computer graphics.computer graphics.Useful in determining the way in which lines Useful in determining the way in which lines and vectors intersect.and vectors intersect.

47

Vector OperationsVector Operations

►► The DOT ProductThe DOT ProductCalculated by multiplying and adding row values with Calculated by multiplying and adding row values with column values.column values.DefinitionDefinition►►The dot product of two vectors is denoted vThe dot product of two vectors is denoted v٠٠w and has the w and has the

value:value:

∑=

n

iii wv

1

48

Vector OperationsVector Operations

►► The DOT ProductThe DOT Productor where v = (vor where v = (v11,v,v22) and w = (w) and w = (w11,w,w22))the dot product, v the dot product, v ٠٠ w will be:w will be:►► (v(v11ww11+v+v22ww22))

Example, v = (2,1) and w = (3,5) then v Example, v = (2,1) and w = (3,5) then v ٠٠ w will be:w will be:►►2*3 + 1*5 = 112*3 + 1*5 = 11

Example, v = (2,2,2,2) and w = (4,1,2,1.1), v Example, v = (2,2,2,2) and w = (4,1,2,1.1), v ٠٠ w will w will be:be:►►2*4 + 2*1 + 2*2 + 2 * 1.1 = 16.22*4 + 2*1 + 2*2 + 2 * 1.1 = 16.2

Page 9: Geometric Concepts Computer Graphics Points, Lines and Planesnatacha/TeachFall_2009/CSC706/... · 2009. 10. 28. · 1 1 Computer Graphics Vectors and Operations 2 This Week Vector

9

49

Vector OperationsVector Operations

►► The DOT ProductThe DOT ProductThe angle between two vectors.The angle between two vectors.►►The dot product can be used to find the angle between two The dot product can be used to find the angle between two

vectors or intersecting lines.vectors or intersecting lines.►►Given 2 vectors e and c, the angle between the vectors can Given 2 vectors e and c, the angle between the vectors can

be calculated.be calculated.e = (|e = (|e|cose|cos Өe,|e|sin,|e|sin Өe))c = (|c = (|c|cosc|cos Өc,|c|sin,|c|sin Өc))

►►The dot product e The dot product e ٠٠ c isc is||e||c|cose||c|cos((Өc - Өe)

►or e e ٠٠ c =c =|e||c|cos(Ө) where Ө is the angle between the vectors!

e

c

Өe

Өc

Ө

50

Vector OperationsVector Operations

►► The DOT ProductThe DOT Producte e ٠٠ c =c =|e||c|cos(Ө) Divide both sides by |e||c| for a more compact form:►► (e (e ٠٠ c)/|e||cc)/|e||c| =| =|e||c|cos(Ө)/|e||c|►ĉ ٠٠ ê = coscos((Ө )

Therefore:Therefore:►►The angle between two vectors is The angle between two vectors is

the dot product of the the dot product of the normalisednormalised vectors.vectors. e

c

Өe

Өc

Ө

51

Vector OperationsVector Operations

►► The DOT ProductThe DOT ProductExample: Find the angle between (5,6) and (8,2)Example: Find the angle between (5,6) and (8,2)►► coscos((Ө ) = ĉ ٠٠ ê ►ĉ = c/|c| = (5,6) / sqrt(52+62)

= (5,6) / 7.8= (5,6) / 7.8= (0.64,0.77)= (0.64,0.77)

►ê = e/|e| = (8,2) / sqrt(82+22)= (8,2) / 8.25= (8,2) / 8.25= (0.8,0.24)= (0.8,0.24)

►ĉ ٠٠ ê = 0.8248►Ө = cos-1(0.8248) = 34.43

c

52

Graphics Graphics MathsMaths by Exampleby ExampleTherefore the cat’s turning angle should be:• angle = acos(cat.velocity.x*v.x + cat.velocity.y*v.y);

-mouseChase6.exe

v1

v2

Ө

In the example, the cat seems to be facing the wrong direction.

What went wrong?

53

Graphics Graphics MathsMaths by Exampleby ExampleThe angle calculation was correct!

However,

• positive angles in computer graphics turn objects anticlockwise.

How do we calculate a negative angle?

• You can’t!

• How do we know whether to turn left or right?

• Well, not by using the dot product alone.54

Enter the Cross ProductEnter the Cross Product

►►Cross ProductsCross ProductsThe cross product of two vectors is another The cross product of two vectors is another vector.vector.The resulting vector is perpendicular to both The resulting vector is perpendicular to both vectors.vectors.

Page 10: Geometric Concepts Computer Graphics Points, Lines and Planesnatacha/TeachFall_2009/CSC706/... · 2009. 10. 28. · 1 1 Computer Graphics Vectors and Operations 2 This Week Vector

10

55

Vector OperationsVector Operations

►► Cross ProductsCross ProductsGiven a = (Given a = (aaxx,a,ayy,a,azz) and e = () and e = (eexx,e,eyy,e,ezz) the cross ) the cross product would be (in terms of the unit vectors):product would be (in terms of the unit vectors):►►a x e = a x e = i(ai(ayyeezz--aazzeeyy) + ) + j(aj(axxeezz--aazzeexx) + ) + k(ak(axxeeyy--aayyeexx))►►or if you find it easier you can form a determinant, thus:or if you find it easier you can form a determinant, thus:

eeeaaakji

eazyx

zyx=×

56

Vector OperationsVector Operations

►► Cross ProductsCross ProductsHow do you use this to calculate the dot product?How do you use this to calculate the dot product?Take each item in the top row and multiply by the Take each item in the top row and multiply by the difference of the products of the items in the other difference of the products of the items in the other columns.columns.

eeeaaakji

eazyx

zyx=×

57

Vector OperationsVector Operations

►► Cross ProductsCross Productsi(ai(ayyeezz--aazzeeyy))j(aj(axxeezz--aazzeexx))k(ak(axxeeyy--aayyeexx))

eeeaaakji

eazyx

zyx=×

Now put them together:a x e = a x e = i(ai(ayyeezz--aazzeeyy) + ) + j(aj(axxeezz--aazzeexx) + ) + k(ak(axxeeyy--aayyexex))…. and you have the CROSS PRODUCT!!!…. and you have the CROSS PRODUCT!!!

58

Vector OperationsVector Operations

►► Cross ProductsCross Productsi(ai(ayyeezz--aazzeeyy) + ) + j(aj(axxeezz-- aazzeexx) + ) + k(ak(axxeeyy--aayyeexx))

is just another way of writing a 3d coordinate e.g.is just another way of writing a 3d coordinate e.g.((xx, , yy, , zz))

( ( ((aayyeezz--aazzeeyy)), , ((aaxxeezz-- aazzeexx)), , ((aaxxeeyy--aayyeexx)) ))

59

Vector OperationsVector Operations

►►Cross ProductCross ProductNow we have the cross product what are we Now we have the cross product what are we going to do with it?going to do with it?We can use it to find perpendicular vectors and We can use it to find perpendicular vectors and areas.areas.

60

Vector OperationsVector Operations

►►Cross ProductCross Producta x e is perpendicular to both a and ea x e is perpendicular to both a and ethe length of a x e equals the area of the the length of a x e equals the area of the parallelogram bounded by a and eparallelogram bounded by a and eUse the right hand thumb rule to determine the Use the right hand thumb rule to determine the direction of a x edirection of a x e

a

e

a x e

Page 11: Geometric Concepts Computer Graphics Points, Lines and Planesnatacha/TeachFall_2009/CSC706/... · 2009. 10. 28. · 1 1 Computer Graphics Vectors and Operations 2 This Week Vector

11

61

Vector OperationsVector Operations

►►Cross ProductCross ProductFinding the Normal to a PlaneFinding the Normal to a Plane►►Given three points on the plane we can determine Given three points on the plane we can determine

the normal to the plane.the normal to the plane.►►PP11, P, P22, P, P33 --> v = P> v = P22--PP11, w = P, w = P33--PP11

►►Find v x w to calculate the normal, n.Find v x w to calculate the normal, n.►►Any scalar multiple of n is also normal to the plane.Any scalar multiple of n is also normal to the plane.

62

Vector OperationsVector Operations

►►Cross ProductCross ProductWe can also.....We can also.....►►Determine if you need to turn right or left to go from Determine if you need to turn right or left to go from

facing one vector to another.facing one vector to another.

Let’s say a = (1,0,0) and e = (0,1,0)

a x e = (1*0-0*1, 0*0-1*0, 1*1 – 0*0)

= (0,0,1)a

e

a x e

63

Vector OperationsVector Operations

►►Cross ProductCross ProductWe can also.....We can also.....►►Determine if you need to turn right or left to go from Determine if you need to turn right or left to go from

facing one vector to another.facing one vector to another.

Let’s say a = (1,0,0) and e = (0,1,0)

e x a = (0*1 - 1*0, 1*0 - 0*0, 0*0 – 1*1)

= (0,0,-1)

a

e e x a

64

Vector OperationsVector Operations

►►Cross ProductCross ProductWe can also.....We can also.....►►Determine if you need to turn right or left to go from Determine if you need to turn right or left to go from

facing one vector to another.facing one vector to another.a

e e x a = (0,0,-1)

a

e

a x e = (0,0,1)

What do these results tell you?

65

Vector OperationsVector Operations

►►Cross ProductCross ProductWe can also.....We can also.....►►Determine if you need to turn right or left to go from Determine if you need to turn right or left to go from

facing one vector to another.facing one vector to another.

a

e

a x eif we want to turn from facing a to

facing e, then obvious, by looking at it we have to turn to our left.

In this case a x e gives us a resulting

vector with a positive z value.

66

Vector OperationsVector Operations

►►Cross ProductCross ProductWe can also.....We can also.....►►Determine if you need to turn right or left to go from Determine if you need to turn right or left to go from

facing one vector to another.facing one vector to another.

a

e e x a

if we want to turn from facing e to facing a, then obvious, by looking at

it we have to turn to our right.In this case e x a gives us a resulting

vector with a negative z value.

Page 12: Geometric Concepts Computer Graphics Points, Lines and Planesnatacha/TeachFall_2009/CSC706/... · 2009. 10. 28. · 1 1 Computer Graphics Vectors and Operations 2 This Week Vector

12

67

Vector OperationsVector Operations

►►Cross ProductCross ProductTherefore:Therefore:►► if the z value of the cross product is negative then if the z value of the cross product is negative then

we turn clockwisewe turn clockwise►►if the z value of the cross product is positive then we if the z value of the cross product is positive then we

turn counterclockwiseturn counterclockwise

68

Vector OperationsVector Operations

►► Cross ProductCross ProductTherefore:Therefore:

double double turnAngle(vectorturnAngle(vector v1, vector v2)v1, vector v2){{

double angle = double angle = acos(cat.velocity.xacos(cat.velocity.x**v.xv.x + + cat.velocity.ycat.velocity.y**v.yv.y) ) * 180/3.14; //convert to degrees* 180/3.14; //convert to degrees

//if z of cross product is negative//if z of cross product is negativeif( (v1.x*v2.y if( (v1.x*v2.y -- v1.y*v2.x) < 0)v1.y*v2.x) < 0)

return return --angle;angle;//if z of cross product is positive//if z of cross product is positiveelse if ((v1.x*v2.y else if ((v1.x*v2.y -- v1.y*v2.x) > 0)v1.y*v2.x) > 0)

return angle;return angle;

//if z is 0 then no turn angle//if z is 0 then no turn anglereturn 0;return 0;

}}--mouseChase7.exemouseChase7.exe

69

Let’s move the RatLet’s move the Rat

►►If we program a mouse click to change the If we program a mouse click to change the location of the rat, we would assume the cat location of the rat, we would assume the cat will change directions and move towards it. will change directions and move towards it.

►►This is a great test for our program.This is a great test for our program.

70

Let’s move the RatLet’s move the Ratvoid void myMouse(intmyMouse(int button, button, intint state, state, intint x, x, intint y)y){{

//if left button clicked move the rat//if left button clicked move the ratif(buttonif(button == GLUT_LEFT_BUTTON && state == GLUT_DOWN)== GLUT_LEFT_BUTTON && state == GLUT_DOWN){{

rat.xrat.x = x;= x;rat.yrat.y = SCREENHEIGHT = SCREENHEIGHT -- y;y;

}}}}

-mouseChase8.exe

71

Homogeneous CoordinatesHomogeneous Coordinates

►►Some graphics systems and OpenGL Some graphics systems and OpenGL represent points and vectors as represent points and vectors as homogeneous coordinates.homogeneous coordinates.

►►This means that in 2D a coordinate has 3 This means that in 2D a coordinate has 3 values (x, y, v) values (x, y, v)

►►and in 3D, 4 values (x, y, z, v)and in 3D, 4 values (x, y, z, v)

72

Homogeneous CoordinatesHomogeneous Coordinates

►► For a point v = 1For a point v = 1►► For a vector v = 0For a vector v = 0►► e.g. The point (2,4) becomes (2,4,1).e.g. The point (2,4) becomes (2,4,1).►► e.g. The vector (3,5) becomes (3,5,0).e.g. The vector (3,5) becomes (3,5,0).►► e.g. The point (3,4,1) becomes (3,4,1,1).e.g. The point (3,4,1) becomes (3,4,1,1).►► e.g. The vector (3,6,7) becomes (3,6,7,0).e.g. The vector (3,6,7) becomes (3,6,7,0).►► When it comes to working with the point or When it comes to working with the point or

vector the 1 and 0 can just be dropped.vector the 1 and 0 can just be dropped.►► The reason for this will become clear in later The reason for this will become clear in later

chapters…..chapters…..

Page 13: Geometric Concepts Computer Graphics Points, Lines and Planesnatacha/TeachFall_2009/CSC706/... · 2009. 10. 28. · 1 1 Computer Graphics Vectors and Operations 2 This Week Vector

13

73

ExampleExample

►► TweeningTweening between shapesbetween shapes

►► -- tween.exetween.exe

74

The EndThe End

►►Next week….Next week….RotationsRotationsScalingsScalings andandTranslations…Translations…