forked from Palakis/circles-sines-signals
-
Notifications
You must be signed in to change notification settings - Fork 0
/
dotproduct.html
158 lines (136 loc) · 5.73 KB
/
dotproduct.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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<html>
<head>
<title>Circles Sines and Signals - The Dot Product</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="third_party/d3/d3.min.js"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
jax: ["input/TeX","input/MathML","output/SVG"],
extensions: ["tex2jax.js","mml2jax.js","MathMenu.js","MathZoom.js"],
TeX: {
extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"]
}
});
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({ TeX: { extensions: ["color.js"] }});
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config(
{
SVG: {linebreaks: { automatic:true }},
displayAlign: "center"
}
);
</script>
<script type="text/javascript"
src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG">
</script>
<link href='//fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Vollkorn:400italic,400' rel='stylesheet' type='text/css'>
<style>
@import url("fontello-b1d57784/css/fontello.css");
@import url("style.css");
</style>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-59785365-1', 'auto');
ga('send', 'pageview');
</script>
<link rel="icon" type="" href="favicon.ico"></head>
<body>
<div class="title">
<table width="900">
<tr>
<td width="90%">
<div class="bigheader" id="titleinfo">
</div>
</td>
</tr>
<tr>
<td width="70%">
<br/>
<div id="menu" class="menu" style="margin-left: 45; ">
<table> <tr id="menurow"> </tr> </table>
</div>
<!-- -->
</td>
</tr>
</table>
</div>
<div class="littleheader"> THE DOT PRODUCT
<div class="subheader" style="font-size: 14px"> DEFINITION AND 2D INTERPRETATION </div>
</div>
<table class="figureTable">
<tr>
<td style="vertical-align: top;">
<div class="text" style="margin-left: 0px">
<p>
The main operation of the Discrete Fourier Transform is the <i>dot product</i>.<sup>1</sup> Actually performing the dot product is straightforward. We take two signals of equal length, multiply their elements together one-by-one, and then sum up the products.
</p>
<br/>
<table width="700">
<tr class="figureCaption">
<td width="50%">
<b>Equation 1.</b> Classical Notation for the Dot Product
</td>
<td width="50%">
<b>Example 1.</b> Example Calculation of the Dot Product
</td>
</tr>
<tr>
<td>
<div style="font-size: 18px">
$$\sum_{n=0}^{N-1} a[n] \cdot b[n]$$
</div>
</td>
<td style="font-family: lato; color: #333; padding-left: 20px; text-align: center">
<br/><br/>
Given two signals <b>a</b> and <b>b</b>,<br/><br/>
<b>a[n]</b> = [3, 5, 7, 9, 4]<br/>
<b>b[n]</b> = [8, 2, 5, 3, 1]
<br/><br/>
We compute their <i>dot product</i> as,<br/><br/>
(3 × 8) + (5 × 2) + (7 × 5) + (9 × 3) + (4 × 1)<br/><br/>
Which leaves us with,<br/><br/>
24 + 10 + 35 + 27 + 4 = <b>100</b><br/><br/>
</td>
</tr>
</table>
<p>
At first glance this operation may seem uninteresting, but there is a nice geometric interpretation of that dot product that we can leverage.
As it turns out, we can use the dot product to measure the degree to which two vectors or signals are <i>pointing</i> or <i>heading</i> in the same direction. When two vectors are perpendicular to one another, they point in completely different directions and their dot product will be <i>zero</i>. The dot product is at its maximum when two vectors run parallel to one another. Note that the dot product may be negative, indicating the the two vectors have a similar but <i>opposite</i> heading. Play around with the following figure to see how the value of the dot product changes as the orientation between the two vectors changes.
</p>
<br/>
<table>
<tr class="figureCaption">
<td width="100%">
<b>Figure 1.</b> Geometric Interpretation of the Dot Product<br/><sub>Click and drag to change the endpoint of the pink vector</sub>
</td>
</tr>
<tr>
<td>
<div id="wrapper" class="animation" style="position: relative; ">
<svg id="dotproductgeo" class="svgWithText" width="500" height="250" style="margin: 10px; margin-left: 180px; padding: 20px; cursor: pointer"></svg>
<script type="text/javascript" src="js/dot_product_2d.js"></script>
</div>
</td>
</tr>
</table><br/><br/>
<p>
I’d like you to think of the dot product as a measure of <i>similarity</i>. In the next section we’ll see how the dot product can be used to measure the similarity between something a bit more complicated than two dimensional vectors - signals of arbitrary length.
</p>
</td>
<td class="figureExplanation" style="">
<b>1.</b> If you've forgotten what it looked like in the context of the Discrete Fourier Transform, I've repeated it here so you don't have to tab back and forth.
$$\sum_{n=0}^{N-1} \mathrm{x}[n] \cdot
e^{-\varphi\mathrm{i}}$$ <br/><br/>
</td>
</tr>
</table>
<br/><br/><br/>
<div class="title" id="footer"></div><script type="text/javascript" src="menu.js"></script></body>
</html>