1. Vectors
Jeff Chastine

2. 𝑉𝑒𝑐𝑡𝑜𝑟𝑠
A mathematical structure that has more than one “part” (e.g. an array)
2D vectors might have x and y
3D vectors might have x, y and z
4D vectors might have x, y, z and w
Vectors can represent a point in space
Vectors commonly represent both:
Direction
Magnitude
Jeff Chastine

3. 𝑉𝑒𝑐𝑡𝑜𝑟𝑠
A vector is often denoted with an arrow above it (e.g. 𝑢 )
Row representation [x, y, z] (multiple columns)
15 −4 3
Column vector has multiple rows
Vectors will be used in lighting equations
15 −4 3
Jeff Chastine

4. Example You Man-Bear-Pig
How would I describe the 2D difference in location of a player and an enemy?
You
Man-Bear-Pig
Jeff Chastine

5. Example
How would I describe the 2D difference in location of a player and an enemy?
(x2, y2)
(x1, y1)
Jeff Chastine

6. Example 𝑑𝑖𝑓𝑓 =[ 𝑥 1 − 𝑥 2 , 𝑦 1 − 𝑦 2 ] (x2, y2) (x1, y1)
How would I describe the 2D difference in location of a player and an enemy?
(x2, y2)
(x1, y1)
𝑑𝑖𝑓𝑓 =[ 𝑥 1 − 𝑥 2 , 𝑦 1 − 𝑦 2 ]
…or 𝑑𝑖𝑓𝑓=[∆𝑥, ∆𝑦]
Note: a very useful 2D function is atan2 (∆y, ∆x) which gives you the angle!

7. Interpretation (x2, y2) (x1, y1) Magnitude (length)
𝑑𝑖𝑓𝑓 has both magnitude and direction
(x2, y2)
(x1, y1)
Magnitude (length)
Jeff Chastine

8. Interpretation (x2, y2) (x1, y1) (∆x, ∆y) Direction (0, 0)
𝑑𝑖𝑓𝑓 has both magnitude and direction
(x2, y2)
(x1, y1)
(∆x, ∆y)
(0, 0)
Direction
Jeff Chastine

9. Adding/Subtracting Vectors
Do this component-wise
Therefore, the vectors must be the same size
Adding example
−3 =
Subtraction works the same way + =
Jeff Chastine

10. Multiplication? Multiplying by a scalar (a single number)
6 * =
What about multiplication?
This isn’t really defined, but we do have
Dot product
Cross product
Jeff Chastine

11. Magnitude and Normalization of Vectors
Normalization is a fancy term for saying the vector should be of length 1
Magnitude is just its length and denoted 𝑉
Example for
mag = 𝑥 2 + 𝑦 2 + 𝑧 2
mag = = 35 =~
To normalize the vector, divide each component by its magnitude
Example from above =
Magnitude of =~1
Jeff Chastine

12. The Dot Product 𝜃 Also called the inner or scalar product
Multiply component-wise, then sum together
Denoted using the dot operator 𝑢 ∙ 𝑣
Example
∙ −2 = 1∗8 + 2∗1 + 4∗−2 =2.0
Why is this so cool?
If normalized, it’s the cosine of the angle θ between the two vectors!
Use acos⁡(𝜃) to “undo” that
Basis of almost all lighting calculations! 𝜃
Jeff Chastine

13. DOT PROduct Example 𝑣 𝜃 𝑢 Assume we have two vectors: 𝑢 = 1 0 0
𝑢 =
𝑣 =
These vectors are already normalized
We expect the angle to be 90°
Dot product is:
𝑢 ∙ 𝑣 = 1∗0 + 0∗1 + 0∗0 =0
acos 0 =90° 𝑣 𝜃 𝑢
Jeff Chastine

14. DOT PROduct Example 2 𝜃 𝑣 𝑢 Assume we have two vectors: 𝑢 = 1 0 0
𝑢 =
𝑣 = −
We expect the angle to be 180°
Dot product is:
𝑢 ∙ 𝑣 = 1∗−1 + 0∗0 + 0∗0 =−1
acos −1 =180° 𝜃 𝑣 𝑢
Jeff Chastine

15. DOT PROduct Example 3 𝑢 𝑣 Assume we have two vectors: 𝑢 = 1 0 0
𝑢 =
𝑣 =
We expect the angle to be 0°
Dot product is:
𝑢 ∙ 𝑣 = 1∗1 + 0∗0 + 0∗0 =1
acos 1 =0° 𝑢 𝑣
Jeff Chastine

16. Projection 𝑉 𝛼 𝑊 Length of projection is:
Can also be used to calculate the projection of one vector onto another 𝑉 𝛼 𝑊
Length of projection is:
Then, multiply by normalized 𝑊/ 𝑊
𝑉 cos 𝛼 = 𝑉∙𝑊 𝑊
𝑝𝑟𝑜𝑗 𝑤 𝑉= 𝑉∙𝑊 𝑊 2 𝑊
Jeff Chastine

17. CROSS PRODUCT 𝑐 𝑎 𝜃 𝑏 𝑎𝑥 𝑎𝑦 𝑎𝑧 𝑏𝑥 𝑏𝑦 𝑏𝑧
Gives us a new vector that is perpendicular to the other two
Denoted with the × operator
Calculations:
𝑎 × 𝑏 =[ 𝑎 𝑦 𝑏 𝑧 − 𝑎 𝑧 𝑏 𝑦 𝑎 𝑧 𝑏 𝑥 − 𝑎 𝑥 𝑏 𝑧 𝑎 𝑥 𝑏 𝑦 − 𝑎 𝑦 𝑏 𝑥 ]
Interesting:
If 𝑎 × 𝑏 = 𝑐 then 𝑏 × 𝑎 =− 𝑐
The magnitude (length) of the new vector is the sine of the angle (if normalized) 𝑎 𝜃 𝑏
𝑎𝑥 𝑎𝑦 𝑎𝑧 𝑏𝑥 𝑏𝑦 𝑏𝑧
Jeff Chastine

18. CROSS PRODUCT 𝑐 𝑎 𝜃 𝑏 𝑎𝑥 𝑎𝑦 𝑎𝑧 𝑏𝑥 𝑏𝑦 𝑏𝑧
Gives us a new vector that is perpendicular to the other two
Denoted with the × operator
Calculations:
𝑎 × 𝑏 =[ 𝑎 𝑦 𝑏 𝑧 − 𝑎 𝑧 𝑏 𝑦 𝑎 𝑧 𝑏 𝑥 − 𝑎 𝑥 𝑏 𝑧 𝑎 𝑥 𝑏 𝑦 − 𝑎 𝑦 𝑏 𝑥 ]
Interesting:
If 𝑎 × 𝑏 = 𝑐 then 𝑏 × 𝑎 =− 𝑐
The magnitude (length) of the new vector is the sine of the angle (if normalized) 𝑎 𝜃 𝑏
𝑎𝑥 𝑎𝑦 𝑎𝑧 𝑏𝑥 𝑏𝑦 𝑏𝑧
Jeff Chastine

19. CROSS PRODUCT 𝑐 𝑎 𝜃 𝑏 𝑎𝑥 𝑎𝑦 𝑎𝑧 𝑏𝑥 𝑏𝑦 𝑏𝑧
Gives us a new vector that is perpendicular to the other two
Denoted with the × operator
Calculations:
𝑎 × 𝑏 =[ 𝑎 𝑦 𝑏 𝑧 − 𝑎 𝑧 𝑏 𝑦 𝑎 𝑧 𝑏 𝑥 − 𝑎 𝑥 𝑏 𝑧 𝑎 𝑥 𝑏 𝑦 − 𝑎 𝑦 𝑏 𝑥 ]
Interesting:
If 𝑎 × 𝑏 = 𝑐 then 𝑏 × 𝑎 =− 𝑐
The magnitude (length) of the new vector is the sine of the angle (if normalized) 𝑎 𝜃 𝑏
𝑎𝑥 𝑎𝑦 𝑎𝑧 𝑏𝑥 𝑏𝑦 𝑏𝑧
Jeff Chastine

20. CROSS PRODUCT 𝑐 𝑎 𝜃 𝑏 𝑎𝑥 𝑎𝑦 𝑎𝑧 𝑏𝑥 𝑏𝑦 𝑏𝑧
Gives us a new vector that is perpendicular to the other two
Denoted with the × operator
Calculations:
𝑎 × 𝑏 =[ 𝑎 𝑦 𝑏 𝑧 − 𝑎 𝑧 𝑏 𝑦 𝑎 𝑧 𝑏 𝑥 − 𝑎 𝑥 𝑏 𝑧 𝑎 𝑥 𝑏 𝑦 − 𝑎 𝑦 𝑏 𝑥 ]
Interesting:
If 𝑎 × 𝑏 = 𝑐 then 𝑏 × 𝑎 =− 𝑐
The magnitude (length) of the new vector is the sine of the angle (if normalized) 𝑎 𝜃 𝑏
𝑎𝑥 𝑎𝑦 𝑎𝑧 𝑏𝑥 𝑏𝑦 𝑏𝑧
Jeff Chastine

21. Fun Questions How do we find the normal of a triangle?
How can we determine if a polygon is facing away from the camera?
Jeff Chastine

22. Fun Questions P0 P1 P2 How do we find the normal of a triangle?
How can we determine if a polygon is facing away from the camera? P0 P1 P2
Jeff Chastine

23. Fun Questions P0 𝑢 𝑣 P1 P2 Make some vectors…
How do we find the normal of a triangle?
How can we determine if a polygon is facing away from the camera? P0 𝑢 𝑣 P1 P2
Make some vectors…
Jeff Chastine

24. Fun Questions P0 𝑢 𝑣 P1 P2 Make some vectors…
How do we find the normal of a triangle?
How can we determine if a polygon is facing away from the camera? P0 𝑢 𝑣 P1 P2
Make some vectors…
Jeff Chastine

25. Fun Questions 𝑢 × 𝑣 P0 𝑢 𝑣 P1 P2 Take the cross product
How do we find the normal of a triangle?
How can we determine if a polygon is facing away from the camera?
𝑢 × 𝑣 P0 𝑢 𝑣 P1 P2
Take the cross product
Jeff Chastine

26. Fun Questions 𝑁 P0 P1 P2 How do we find the normal of a triangle?
How can we determine if a polygon is facing away from the camera? 𝑁 P0 P1 P2
Jeff Chastine

27. Fun Questions 𝑁 P0 P1 P2 How do we find the normal of a triangle?
How can we determine if a polygon is facing away from the camera? 𝑁 P0 P1 P2
Jeff Chastine

28. Fun Questions 𝑁 P0 camera P1 P2
How do we find the normal of a triangle?
How can we determine if a polygon is facing away from the camera? 𝑁 P0
camera P1 P2
Jeff Chastine

29. Fun Questions 𝑁 P0 𝑐𝑎𝑚 camera P1 P2
How do we find the normal of a triangle?
How can we determine if a polygon is facing away from the camera? 𝑁 P0
𝑐𝑎𝑚
camera P1 P2
Jeff Chastine

30. Fun Questions 𝐼𝑓 acos 𝑁∙𝑐𝑎𝑚 <90°, 𝑖 𝑡 ′ 𝑠 𝑣𝑖𝑠𝑖𝑏𝑙𝑒 𝑁 P0 𝑐𝑎𝑚 camera
How do we find the normal of a triangle?
How can we determine if a polygon is facing away from the camera?
𝐼𝑓 acos 𝑁∙𝑐𝑎𝑚 <90°, 𝑖 𝑡 ′ 𝑠 𝑣𝑖𝑠𝑖𝑏𝑙𝑒 𝑁 P0
𝑐𝑎𝑚
camera P1 P2
Jeff Chastine
Assuming 𝑁 and 𝑐𝑎𝑚 are normalized

31. A final Note Can multiply a matrix and vector to: Rotate the vector
Translate the vector
Scale the vector
Etc..
This operation returns a new vector
Jeff Chastine

32. The End
Image of a triangle facing away from the camera
Jeff Chastine