-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvector.html
142 lines (139 loc) · 8.45 KB
/
vector.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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<!-- Created by Justinas Tijunelis -->
<html>
<head>
<title>Vectors</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="mobile" style="font-size: 5rem;">
Too lazy to do mobile version.
</div>
<div class="desktop">
<!-- Top Bar -->
<div id="topbar">
<div id="top">
<h1>Rotations and Applications</h1>
</div>
<div id="nav">
<div class="row">
<div class="column">
<a href="index.html">
<div id="navButton" style="background-color:#F5888240">
<b>Introduction</b>
</div>
</a>
</div>
<div class="column">
<a href="quat.html">
<div id="navButton" style="background-color:#69D4F540">
<b>Quaternions</b>
</div>
</a>
</div>
<div class="column">
<a href="vector.html">
<div id="navButton" style="background-color:#B466E1FF">
<b>Vectors</b>
</div>
</a>
</div>
<div class="column">
<a href="app.html">
<div id="navButton" style="background-color:#5DF59740">
<b>Applications</b>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- End Top Bar -->
<!-- Start Content -->
<div id="content">
<div class="flex-container" id="vector-flex">
<div id="mediumbox">
<h2 style="text-align:left; font-size: 2vw; padding-left: 20px;">What is a vector?</h2>
<p style="text-align: left; font-size: 1.5vw; padding: 20px">
A vector is an object that has both a magnitude and a direction. In 3D, a vector can be
represented by 3 values (x, y, z) coming from the origin. In general:
<p style="text-align: left; font-size: 1.5vw; padding: 20px; font-family:Cambria;">
<i>v</i> = (<i>x, y, z</i>)
<p style="text-align: left; font-size: 1.5vw; padding: 20px">
A vector alone is not sufficient for representing rotation, however, it can tell us what the
upward, forward, and left/right directions are for an object. As Euler discovered, rotation
can be described if we add an additional dimension, the "spin" of an object along it's upward
direction:
<p style="text-align: left; font-size: 1.5vw; padding: 20px; font-family:Cambria;">
<i>e</i> = (<i>θ</i>, <i>v</i>); where <i>v = (x, y, z)</i> is a vector in real space
<p style="text-align: left; font-size: 1.5vw; padding: 20px">
While one vector cannot describe an object's rotational state, it can describe a rotational
transform! If we have two vectors, we can describe the rotation from one to the other with
a quaternion. By the same logic, we can rotate a vector with a quaternion.
</div>
<div id="mediumbox">
<h2 style="text-align:left; font-size: 2vw; padding-left: 20px;">Vectors and quaternions</h2>
<p style="text-align: left; font-size: 1.5vw; padding: 20px">
As described, two vectors can describe a from-to rotation with a quaternion. Also, a vector
can be rotated by a quaternion. However, the methods for doing so are not intuitive.
<p style="text-align: left; font-size: 1.5vw; padding: 20px">
Rotating a vector by a quaternion <em>must</em> be done as follows:
<p style="text-align: left; font-size: 1.5vw; padding: 20px; font-family:Cambria;">
<i>v'</i> = <i>q<sub>A</sub></i> × <i>v</i> × <i>q<sub>A</sub><sup>*</sup></i> =
<i>q<sub>A</sub></i> × (<i>v</i> × <i>q<sub>A</sub><sup>*</sup></i>)
<p style="text-align: left; font-size: 1.5vw; padding: 20px">
Applying another rotation can be done as follows:
<p style="text-align: left; font-size: 1.5vw; padding: 20px; font-family:Cambria;">
<i>v'</i> = <i>q<sub>B</sub></i> × (<i>q<sub>A</sub></i> × <i>v</i> ×
<i>q<sub>A</sub><sup>*</sup></i>) × <i>q<sub>B</sub><sup>*</sup></i>
= <i>q<sub>B</sub></i> × ((<i>q<sub>A</sub></i> × <i>v</i> ×
<i>q<sub>A</sub><sup>*</sup></i>) × <i>q<sub>B</sub><sup>*</sup></i>) <br><br>
= (<i>q<sub>B</sub></i> × <i>q<sub>A</sub></i>) × <i>v</i> ×
(<i>q<sub>A</sub><sup>*</sup></i> × <i>q<sub>B</sub><sup>*</sup></i>) =
(<i>q<sub>B</sub></i> × <i>q<sub>A</sub></i>) × <i>v</i> ×
(<i>q<sub>B</sub></i> × <i>q<sub>A</sub></i>)<sup>*</sup>
<p style="text-align: left; font-size: 1.5vw; padding: 20px">
Computing a quaternion from two vectors is another beast entirely. Thankfully, this
functionality is built into most game engines
and softwares where you would use it.
</div>
<div id="widebox">
<div class="row">
<div class="column">
<h2 style="text-align:left; font-size: 2vw; padding-left: 20px;">Can vector math be applied
to quaternions?</h2>
<p style="text-align: left; font-size: 1.5vw; padding: 20px">
The cross product is a mathematical operation on two vectors, A and B, which produces a
third vector C which is perpendicular to both A and B. This can also be applied to
quaternions. The
cross product of the i, j, k components of two quaternions produces the i, j, k
components of the
multiplication of those two quaternions.
<p style="text-align: left; font-size: 1.5vw; padding: 20px">
The dot product is a mathematical operation on two vectors, A and B, which produces a
scalar value
which tells you "by what amount" A goes in the direction of B. The dot product of the i,
j, k components
of two quaternions produces the real component of the resulting quaterion, w.
<p style="text-align: left; font-size: 1.5vw; padding: 20px">
As it turns out, we can multiply quaternions with a real component of zero using the dot
and cross products:
<p style="text-align: left; font-size: 1.5vw; padding: 20px; font-family:Cambria;">
<i>Let a and b be quaternions where a = (0, v) and b = (0, w)</i>;<br><br>
<i>a</i> × <i>b</i> = (<i>-v</i> · <i>w</i>, <i>v</i> × <i>w</i>)
</div>
</div>
<div class="row">
<div class="column">
<img style="width: 100%"
src="https://i2.wp.com/www.chrisevans3d.com/pub_blog/wp-content/uploads/2014/05/vector_wikipedia.png?w=555" />
</div>
</div>
</div>
</div>
</div>
<!-- End Content -->
</div>
</body>
</html>