Javier Gonzalez-Sanchez
February 27, 2018
160

# SER332 Lecture 13

Introduction to Graphics and Game Development
Linear Algebra
(201804)

## Javier Gonzalez-SanchezPRO

February 27, 2018

## Transcript

1. jgs
SER332
Introduction to Graphics and Game
Development
Lecture 13: Linear Algebra
Javier Gonzalez-Sanchez
[email protected]
PERALTA 230U
Office Hours: By appointment

2. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 1
jgs
Announcement
§ Project 2 is Posted
Due by March 21, 11:59PM

3. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 2
jgs
Goal

4. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 3
jgs
Goal

5. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 4
jgs
Goal
3D Maze
( IJKS 1982)

6. jgs
Points, Vector, Angles
Linear Algebra

7. jgs
Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 6
Points
Specify locations in space
(or in the plane)
Points and Vectors
Vector
have a magnitude and direction
(4,2)
(1,3)
v

8. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 7
jgs
Vectors
§ Vector
v = (v1
, v2
)
§ Magnitude or Length
||v|| = sqrt( v1
2 + v2
2)
§ Orientation (angle)
⍬ = tan -1 ( v2 / v1 )
§ Unit vector
||v|| = 1
§ Zero vector
v = (0,0)

9. jgs
Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 8
u - v =
(u1
,u2
) - (v1
,v2
) =
(u1
-v1
, u2
-v2
)
u + v =
(u1
,u2
) + (v1
,v2
) =
(u1
+v1
, u2
+v2
)
v
u
u+v
v
u
v-u

10. jgs
Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 9
a * v =
a * (v1
,v2
) =
(a*v1
, a*v2
)
Multiplication with a Scalar
v
av

11. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 10
jgs
Test yourself
§ Point + Vector = ?
§ Point – Point = ?
§ Vector + Vector = ?
§ Point + Point = ?

12. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 11
jgs
Test yourself
§ Point + Vector = Point
§ Point – Point = Vector
§ Vector + Vector = Vector
§ Point + Point = ?
v
u
u-v
v
u
v-u

13. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 12
jgs
Angles

14. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 13
jgs
Uses
// mouse motion callback function
void motion(int x, int y) {
if (mouse_button == GLUT_LEFT_BUTTON) {
y_angle += (float(x - mouse_x) / width) *360.0;
x_angle += (float(y - mouse_y) / height)*360.0;
}
if (mouse_button == GLUT_RIGHT_BUTTON) {
scale += (y - mouse_y) / 100.0;
if (scale < 0.1) scale = 0.1;
if (scale > 7) scale = 7; }
mouse_x = x;
mouse_y = y;
glutPostRedisplay();
}

15. jgs
Dot product

16. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 15
jgs
§ The dot product or inner product measures to what degree two vectors are
aligned
u · v = (u1
,u2
) · (v1
,v2
) = u1
* v1
+ u2
* v2
v * u = (5*7) + (5*3) = 50
v * w = (5*5) + (5*0) = 25
u * w = (7*5) + (3*0) = 35
u * u = (7*7) + (3*3) = 58
t * w = (0*5) + (5*0) = 0
Dot Product
q
v=[5,5]
u=[7,3]
w=[5,0]
t=[0,5]

17. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 16
jgs
§ Two vectors v and w are perpendicular or normal iff u · v = 0
§ Geometric Interpretation:
§ cos(a) = l / ||w|| = u · v / ||v|| * ||w||
Dot Product
w
v
a
l

18. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 17
jgs
v * u = (5*7) + (5*3) = 50
v * w = (5*5) + (5*0) = 25
u * w = (7*5) + (3*0) = 35
u * u = (7*7) + (3*3) = 58
t * w = (0*5) + (5*0) = 0
|t| = 5.0
|v| = 7.07
|u| = 7.61
|w| = 5.0
§ cos(a) = u · v / ||v|| * ||w||
q = cos-1 (25 / 7.07 * 5.0) = 45º
Dot Product
q
v=[5,5]
u=[7,3]
w=[5,0]
t=[0,5]

19. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 18
jgs
Dot Product
||v|| = sqrt (v · v) = sqrt (v1
* v1
+ v2
* v2
)

20. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 19
jgs
Dot Product | Uses
§ Calculate the angle between 2 vectors

21. jgs
Cross product

22. jgs
Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 21
• Notation: u = v x w
• The cross product is a vector
• ||u|| proportional to the sine of
the angle between v and w
||u|| = ||v||*||w||*sin(a)
• u is perpendicular to v and w
• The direction of u follows the right
hand rule
Cross Product
w
v
a
u

23. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 22
jgs
Cross Product
u = v x w
=
!
"
!
#
!
\$
x
%
"
%
#
%
\$
=
& ' (
!
"
!
#
!
\$
%
"
%
#
%
\$
=
!
#
∗ %
\$
− %
#
∗ !
\$
!
\$
∗ %
"
− %
\$
∗ !
"
!
"
∗ %
#
− %
"
∗ !
#

24. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 23
jgs
Cross Product | Uses
§ Calculate the area of a triangle
§ Calculate distance from a line to a dot
§ Calculate normals

25. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 24
jgs
Cross Product | Triangle Area
§ The cross product is related to the area of a triangle
§ (parallelogram)area = ||u|| = ||v x w|| = ||v||*||w||*sin(a)
§ (triangle)area = ||u|| / 2 = ||v x w|| / 2 = ...
Q
R
P
w
v

26. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 25
jgs
Test Yourself
Given a Triangle with
P=(0,0,0), Q=(0,3,0) and R=(3,3,0)
What is the area?
Q R
P

27. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 26
jgs
Test Yourself
§ area (triangle) = (0,3,0) x (3,3,0) = ||(0,0,-9)|| / 2 = 9/2 = 4.5
§ area (parallelogram) = 9
§ area (parallelogram) = (3)(4.24) sin (45) = (3)(4.24...)(0.70...) = 9
Q R
P

28. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 27
jgs
Cross Product | Distance point to line
// compute the distance from AB to C
double lineToPointDistance2D
(double[] pA, double[] pB, double[] pC) {
double dist = cross(pA-pB, pA-pC) / (pA - pB);
return Math.abs(dist);
}
pA
pC
pB

29. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 28
jgs
Cross Product | Distance point to line

30. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 29
jgs
Cross Product | Normal calculation (lighting)

31. jgs
Matrices
Linear Algebra

32. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 31
jgs
Matrix
§ A matrix is a set of elements, organized into rows and columns
! "
# \$
+
& '
( ℎ
=
! + & " + '
# + ( \$ + ℎ
§ subtraction:
! "
# \$

& '
( ℎ
=
! − & " − '
# − ( \$ − ℎ
§ multiplication:
! "
# \$

& '
( ℎ
=
!& + "( !' + "ℎ
#& + \$( #' + \$ℎ

33. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 32
jgs
Matrix Multiplication
§ Cn x p
= A n x m
B m x p
§ Examples
2 5
3 1

6 2
1 5
=
17 29
19 11
6 2
1 5

2 5
3 1
=
18 32
17 10

34. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 33
jgs
Usage: transformations

35. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 34
jgs
Usage: transformations

36. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 35
jgs
Usage: transformations

37. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 36
jgs
Homework
Review Linear Algebra

38. jgs
SER332 Introduction to Graphics
Javier Gonzalez-Sanchez
[email protected]
Spring 2018
Disclaimer. These slides can only be used as study material for the class SER332 at ASU. They cannot be distributed or used for another purpose.