vector_math.rst 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337
  1. .. _doc_vector_math:
  2. Vector math
  3. ===========
  4. Introduction
  5. ~~~~~~~~~~~~
  6. This tutorial is a short and practical introduction to linear algebra as
  7. it applies to game development. Linear algebra is the study of vectors and
  8. their uses. Vectors have many applications in both 2D and 3D development
  9. and Godot uses them extensively. Developing a good understanding of vector
  10. math is essential to becoming a strong game developer.
  11. .. note:: This tutorial is **not** a formal textbook on linear algebra. We
  12. will only be looking at how it is applied to game development.
  13. For a broader look at the mathematics,
  14. see https://www.khanacademy.org/math/linear-algebra
  15. Coordinate systems (2D)
  16. ~~~~~~~~~~~~~~~~~~~~~~~
  17. In 2D space, coordinates are defined using a horizontal axis (``x``) and
  18. a vertical axis (``y``). A particular position in 2D space is written
  19. as a pair of values such as ``(4, 3)``.
  20. .. image:: img/vector_axis1.png
  21. .. note:: If you're new to computer graphics, it might seem odd that the
  22. positive ``y`` axis points **downwards** instead of upwards,
  23. as you probably learned in math class. However, this is common
  24. in most computer graphics applications.
  25. Any position in the 2D plane can be identified by a pair of numbers in this
  26. way. However, we can also think of the position ``(4, 3)`` as an **offset**
  27. from the ``(0, 0)`` point, or **origin**. Draw an arrow pointing from
  28. the origin to the point:
  29. .. image:: img/vector_xy1.png
  30. This is a **vector**. A vector represents a lot of useful information. As
  31. well as telling us that the point is at ``(4, 3)``, we can also think of
  32. it as an angle ``θ`` and a length (or magnitude) ``m``. In this case, the
  33. arrow is a **position vector** - it denotes a position in space, relative
  34. to the origin.
  35. A very important point to consider about vectors is that they only
  36. represent **relative** direction and magnitude. There is no concept of
  37. a vector's position. The following two vectors are identical:
  38. .. image:: img/vector_xy2.png
  39. Both vectors represent a point 4 units to the right and 3 units below some
  40. starting point. It does not matter where on the plane you draw the vector,
  41. it always represents a relative direction and magnitude.
  42. Vector Operations
  43. ~~~~~~~~~~~~~~~~~
  44. You can use either method (x and y coordinates or angle and magnitude) to
  45. refer to a vector, but for convenience programmers typically use the
  46. coordinate notation. For example, in Godot the origin is the top-left
  47. corner of the screen, so to place a 2D node named ``Node2D`` 400 pixels to the right and
  48. 300 pixels down, use the following code:
  49. ::
  50. $Node2D.position = Vector2(400, 300)
  51. Godot supports both :ref:`Vector2 <class_Vector2>` and
  52. :ref:`Vector3 <class_Vector3>` for 2D and 3D usage respectively. The same
  53. mathematical rules discussed in this article apply for both types.
  54. - Member access
  55. The individual components of the vector can be accessed directly by name.
  56. ::
  57. # create a vector with coordinates (2, 5)
  58. var a = Vector2(2, 5)
  59. # create a vector and assign x and y manually
  60. var b = Vector2()
  61. b.x = 3
  62. b.y = 1
  63. - Adding vectors
  64. When adding or subtracting two vectors, the corresponding components are added:
  65. ::
  66. var c = a + b # (2, 5) + (3, 1) = (5, 6)
  67. We can also see this visually by adding the second vector at the end of
  68. the first:
  69. .. image:: img/vector_add1.png
  70. Note that adding ``a + b`` gives the same result as ``b + a``.
  71. - Scalar multiplication
  72. .. note:: Vectors represent both direction and magnitude. A value
  73. representing only magnitude is called a **scalar**.
  74. A vector can be multiplied by a **scalar**:
  75. ::
  76. var c = a * 2 # (2, 5) * 2 = (4, 10)
  77. var d = b / 3 # (3, 6) / 3 = (1, 2)
  78. .. image:: img/vector_mult1.png
  79. .. note:: Multiplying a vector by a scalar does not change its direction,
  80. only its magnitude. This is how you **scale** a vector.
  81. Practical applications
  82. ~~~~~~~~~~~~~~~~~~~~~~
  83. Let's look at two common uses for vector addition and subtraction.
  84. - Movement
  85. A vector can represent **any** quantity with a magnitude and direction. Typical examples are: position, velocity, acceleration, and force. In
  86. this image, the spaceship at step 1 has a position vector of ``(1,3)`` and
  87. a velocity vector of ``(2,1)``. The velocity vector represents how far the
  88. ship moves each step. We can find the position for step 2 by adding
  89. the velocity to the current position.
  90. .. image:: img/vector_movement1.png
  91. .. tip:: Velocity measures the **change** in position per unit of time. The
  92. new position is found by adding velocity to the previous position.
  93. - Pointing toward a target
  94. In this scenario, you have a tank that wishes to point its turret at a
  95. robot. Subtracting the tank's position from the robot's position gives the
  96. vector pointing from the tank to the robot.
  97. .. image:: img/vector_subtract2.png
  98. .. tip:: To find a vector pointing from ``A`` to ``B`` use ``B - A``.
  99. Unit vectors
  100. ~~~~~~~~~~~~
  101. A vector with **magnitude** of ``1`` is called a **unit vector**. They are
  102. also sometimes referred to as **direction vectors** or **normals**. Unit
  103. vectors are helpful when you need to keep track of a direction.
  104. Normalization
  105. -------------
  106. **Normalizing** a vector means reducing its length to ``1`` while
  107. preserving its direction. This is done by dividing each of its components
  108. by its magnitude:
  109. ::
  110. var a = Vector2(2, 4)
  111. var m = sqrt(a.x*a.x + a.y*a.y) # get magnitude "m" using the Pythagorean theorem
  112. a.x /= m
  113. a.y /= m
  114. Because this is such a common operation, ``Vector2`` and ``Vector3`` provide
  115. a method for normalizing:
  116. ::
  117. a = a.normalized()
  118. .. warning:: Because normalization involves dividing by the vector's length,
  119. you cannot normalize a vector of length ``0``. Attempting to
  120. do so will result in an error.
  121. Reflection
  122. ----------
  123. A common use of unit vectors is to indicate **normals**. Normal
  124. vectors are unit vectors aligned perpendicularly to a surface, defining
  125. its direction. They are commonly used for lighting, collisions, and other
  126. operations involving surfaces.
  127. For example, imagine we have a moving ball that we want to bounce off a
  128. wall or other object:
  129. .. image:: img/vector_reflect1.png
  130. The surface normal has a value of ``(0, -1)`` because this is a horizontal
  131. surface. When the ball collides, we take its remaining motion (the amount
  132. left over when it hits the surface) and reflect it using the normal. In
  133. Godot, the :ref:`Vector2 <class_Vector2>` class has a ``bounce()`` method
  134. to handle this. Here is a GDScript example of the diagram above using a
  135. :ref:`KinematicBody2D <class_KinematicBody2D>`:
  136. ::
  137. var collision = move_and_collide(velocity * delta) # object "collision" contains information about the collision
  138. if collision:
  139. var reflect = collision.remainder.bounce(collision.normal)
  140. velocity = velocity.bounce(collision.normal)
  141. move_and_collide(reflect)
  142. Dot product
  143. ~~~~~~~~~~~
  144. The **dot product** is one of the most important concepts in vector math,
  145. but is often misunderstood. Dot product is an operation on two vectors that
  146. returns a **scalar**. Unlike a vector, which contains both magnitude and
  147. direction, a scalar value has only magnitude.
  148. The formula for dot product takes two common forms:
  149. .. math::
  150. A \cdot B = \left \| A \right \|\left \| B \right \|\cos \Theta
  151. and
  152. .. math::
  153. A \cdot B = A_{x}B_{x} + A_{y}B_{y}
  154. However, in most cases it is easiest to use the built-in method. Note that
  155. the order of the two vectors does not matter:
  156. ::
  157. var c = a.dot(b)
  158. var d = b.dot(a) # these are equivalent
  159. The dot product is most useful when used with unit vectors, making the
  160. first formula reduce to just ``cosθ``. This means we can use the dot
  161. product to tell us something about the angle between two vectors:
  162. .. image:: img/vector_dot3.png
  163. When using unit vectors, the result will always be between ``-1`` (180°)
  164. and ``1`` (0°).
  165. Facing
  166. ------
  167. We can use this fact to detect whether an object is facing toward another
  168. object. In the diagram below, the player ``P`` is trying to avoid the
  169. zombies ``A`` and ``B``. Assuming a zombie's field of view is **180°**, can they see the player?
  170. .. image:: img/vector_facing2.png
  171. The green arrows ``fA`` and ``fB`` are **unit vectors** representing the
  172. zombies' facing directions and the blue semicircle represents its field of
  173. view. For zombie ``A``, we find the direction vector ``AP`` pointing to
  174. the player using ``P - A`` and normalize it. If the angle between this
  175. vector and the facing vector is less than 90°, then the zombie can see
  176. the player.
  177. In GDScript it would look like this:
  178. ::
  179. var AP = (P - A).normalized()
  180. if AP.dot(fA) > 0:
  181. print("A sees P!")
  182. Cross product
  183. ~~~~~~~~~~~~~
  184. Like the dot product, the **cross product** is an operation on two vectors.
  185. However, the result of the cross product is a vector with a direction
  186. that is perpendicular to both. Its magnitude depends on their relative angle.
  187. If two vectors are parallel, the result of their cross product will be null vector.
  188. ::
  189. \left \| a x b \right \| = \left \| a \right \|\left \| b \right \|\ sin(a,b)
  190. .. image:: img/tutovec16.png
  191. The cross product is calculated like this:
  192. ::
  193. var c = Vector3()
  194. c.x = (a.y * b.z) - (a.z * b.y)
  195. c.y = (a.z * b.x) - (a.x * b.z)
  196. c.z = (a.x * b.y) - (a.y * b.x)
  197. In GDScript, you can use the built-in method:
  198. ::
  199. var c = a.cross(b)
  200. .. note:: In the cross product, order matters. ``a.cross(b)`` does not
  201. give the same result as ``b.cross(a)``. The resulting vectors
  202. point in **opposite** directions.
  203. Calculating Normals
  204. -------------------
  205. One common use of cross products is to find the surface normal of a plane
  206. or surface in 3D space. If we have the triangle ``ABC`` we can use vector
  207. subtraction to find two edges ``AB`` and ``AC``. Using the cross product,
  208. ``AB x AC`` produces a vector perpendicular to both: the surface normal.
  209. Here is a function to calculate a triangle's normal in GDScript:
  210. ::
  211. func get_triangle_normal(a, b, c):
  212. # find the surface normal given 3 vertices
  213. var side1 = b - a
  214. var side2 = c - a
  215. var normal = side1.cross(side2)
  216. return normal
  217. Pointing to a Target
  218. --------------------
  219. In the dot product section above, we saw how it could be used to find the
  220. angle between two vectors. However, in 3D this is not enough information.
  221. We also need to know what axis to rotate around. We can find that by
  222. calculating the cross product of the current facing direction and the
  223. target direction. The resulting perpendicular vector is the axis of
  224. rotation.
  225. More Information
  226. ~~~~~~~~~~~~~~~~
  227. For more information on using vector math in Godot, see the following articles:
  228. - :ref:`doc_vectors_advanced`
  229. - :ref:`doc_matrices_and_transforms`