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

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

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

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

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

jgs Points, Vector, Angles Linear Algebra

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 ⍬

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)

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

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

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

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

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

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

jgs Dot product

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]

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

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]

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

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

jgs Cross product

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

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

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

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

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

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

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

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

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

jgs Matrices Linear Algebra

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

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

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

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

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

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

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.