-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathblog_vectors_add.html
44 lines (33 loc) · 4.51 KB
/
blog_vectors_add.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gabor Makes Games</title>
<meta name="author" content="Gabor Szauer">
<link rel="stylesheet" type="text/css" href="css/shared.css"><link rel="stylesheet" type="text/css" href="css/navigation.css"><link rel="stylesheet" type="text/css" href="css/font-raleway.css"><link rel="stylesheet" type="text/css" href="css/font-oxygen.css"><link rel="stylesheet" type="text/css" href="css/font-worksans.css"><link rel="stylesheet" type="text/css" href="css/codepretty/skins/desert.css"><script type="text/javascript" src="js/codepretty/prettify.js"></script><link rel="stylesheet" type="text/css" href="css/katex.min.css"><script type="text/javascript" src="js/katex.min.js"></script><script type="text/javascript" src="js/katex-autorender.min.js"></script><script type="text/javascript" src="js/navigation.js"></script><!-- Global site tag (gtag.js) - Google Analytics --><script async src="https://www.googletagmanager.com/gtag/js?id=UA-96941899-3"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-96941899-3');</script> <link rel="stylesheet" type="text/css" href="css/blog.css">
<script type="text/javascript" src="js/blog_vectors_addition.js"></script>
</head>
<body onload="MainNavOnLoad();renderMathInElement(document.body);PR.prettyPrint();Init();"> <div class="nav"> <ul class="menu"> <li class="logo"><a href="https://gabormakesgames.com">Gabor Makes Games</a></li> <li class="item"><a id="main-nav-active" href="blog.html">Blog</a></li> <li class="item"><a href="books.html">Books</a></li> <li class="item"><a href="https://github.com/gszauer/">Github</a></li> <li class="item"><a href="https://twitter.com/gszauer">@gszauer</a></li> <li class="toggle"><a href="#">Open Menu</a></li> </ul></div>
<div id="blog">
<div id="sidebar"><a class="sidebar-item sidebar-first sidebar-gap" href="blog.html">Back to blog</a></li><a class="sidebar-item sidebar-first" href="vectors.html">Introduction</a><a class="sidebar-item sidebar-active " href="blog_vectors_add.html">Addition</a><a class="sidebar-item" href="blog_vectors_scale.html">Scaling</a><a class="sidebar-item" href="blog_vectors_subtract.html">Subtraction</a><a class="sidebar-item" href="blog_vectors_dot.html">Dot Product</a><a class="sidebar-item" href="blog_vectors_length.html">Magnitude</a><a class="sidebar-item" href="blog_vectors_normalize.html">Normalize</a><a class="sidebar-item" href="blog_vectors_angle.html">Angle</a><a class="sidebar-item" href="blog_vectors_projection.html">Projection</a><a class="sidebar-item" href="blog_vectors_reflection.html">Reflection</a><a class="sidebar-item" href="blog_vectors_cross.html">Cross Product</a><a class="sidebar-item" href="blog_vectors_interpolate.html">Interpolation</a><a class="sidebar-item" href="blog_vectors_summary.html">Summary</a></div>
<div id="content">
<h1>Vector addition</h1>
<p> A vector represents a displacement, when adding two vectors, the result is the combination of each of those displacemnts. Vector addition is a component wise operation which yields a new vector. To add two vectors, add like components and store the result in the appropriate component of the resulting vector.</p>
<p>$$ \vec{A} + \vec{B} = (A_0 + B_0, A_1 + B_1 ... A_n + B_n) $$ </p>
<p>Visually, to add vector \( \vec{A} \) to \(\vec{B}\), place \(\vec{B}\) at the tip of \(\vec{A}\) and follow the displacement of both vectors. In the below example there are two vectors, the blue vector \(\vec{A}\) and the green vector \(\vec{B}\). The result \(\vec{A} + \vec{B}\) is the orange vector.</p>
<canvas id="game_canvas" width="800" height="400" class="img-fluid">
Canvas support required
</canvas>
<p>The end of the orange vector can be reached by following the displacement of the green vector from the blue vector OR by following the displacement of the blue vector from the green vector. Implementing vector addition in code is trivial:</p>
<pre class="prettyprint linenums">vec2 Add(vec2 a, vec2 b) {
return vec2(a.x + b.x, a.y + b.y);
}
vec3 Add(vec3 a, vec3 b) {
return vec3(a.x + b.x, a.y + b.y, a.z + b.z);
}
vec4 Add(vec4 a, vec4 b) {
return vec4(a.x + b.x, a.y + b.y, a.z + b.z, a.w + b.w);
}</pre> </div>
</div>
</body>
</html>