130

# SER332 Lecture 13

Introduction to Graphics and Game Development
Linear Algebra
(201804)

## Javier GonzalezPRO

February 27, 2018

## Transcript

1. ### jgs SER332 Introduction to Graphics and Game Development Lecture 13:

Linear Algebra Javier Gonzalez-Sanchez javiergs@asu.edu 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

Goal

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

Goal 3D Maze ( IJKS 1982)

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 ) Addition and Subtraction 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

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(); }

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

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)

32. ### Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 31 jgs

Matrix § A matrix is a set of elements, organized into rows and columns § addition: ! " # \$ + & ' ( ℎ = ! + & " + ' # + ( \$ + ℎ § 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 javiergs@asu.edu 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.