forked from Palakis/circles-sines-signals
-
Notifications
You must be signed in to change notification settings - Fork 0
/
dotproduct4.html
172 lines (145 loc) · 6.44 KB
/
dotproduct4.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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<html>
<head>
<title>Circles Sines and Signals - Correlation With Sine and Cosine</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"> CORRELATION WITH SINE AND COSINE
<div class="subheader" style="font-size: 14px"> ACCOUNTING FOR PHASE </div>
</div>
<table class="figureTable">
<tr>
<td style="vertical-align: top;">
<div class="text" style="margin-left: 0px">
<p>
In the previous section we noticed that our “sine detector” was flawed. The detector would fail to register the presence of certain sinusoidal components if the input signal was phase-shifted by exactly 90 degrees. Under these circumstances, sine waves could slip past the detector unnoticed.
</p>
<p>
We can fix our detector by computing <i>two</i> dot products instead of one.
In addition to computing the dot product of our input with a sine wave, we will also compute the dot product with a <i>cosine</i> wave. Since a cosine is simply a sine with a shift of 90 degrees, this ensures that we’ll always register a non-zero reading on our detector no matter what the phase of the incoming signal might be. With this change, no sinusoidal components will be able to “slip through” the detector.
</p>
<script>
var SIMPLE_CORRELATION_OFFSET = 0.0;
function updateSimpleCorrelationOffset(value) {
SIMPLE_CORRELATION_OFFSET = Math.PI * 2 * (value / 100);
}
var SIMPLE_CORRELATION_FREQ = 1.0;
function updateSimpleCorrelationFreq(value) {
SIMPLE_CORRELATION_FREQ = value;
}
var DP_COS = 0;
var DP_SIN = 15;
</script>
<br/>
<table>
<tr class="figureCaption">
<td width="50%">
<b>Figure 1a.</b> Dot Product With Cosine
</td>
<td width="50%">
<b>Figure 1b.</b> Dot Product With Sine
</td>
</tr>
<tr>
<td>
<svg id="sigCorrelationInteractiveCos" class="svgWithText" width="300" height="340" style="padding: 20px; margin-left: 0px;"></svg>
<script type="text/javascript" src="js/both_correlation_cosine.js"></script>
<script>
</script>
</td>
<td>
<svg id="sigCorrelationInteractiveSin" class="svgWithText" width="300" height="340" style="padding: 20px; margin-left: 0px;"></svg>
<script type="text/javascript" src="js/both_correlation_sine.js"></script>
</td>
</tr>
<tr>
<td colspan="2">
<svg id="dpcircle" class="svgWithText" width="250" height="200" style="margin-left: 250px"></svg>
<script type="text/javascript" src="js/dp_circle.js"></script>
</td>
</tr>
<tr>
<td colspan="2">
<br/><br/>
<div class="controls" width="180">
<label id="phaseShift" for=simpleCorrelationOffset>Phase Shift</label><br/>
<input type=range min=0 max=100 value=0 id=simpleCorrelationOffset step=0.5 oninput="updateSimpleCorrelationOffset(value);"
onMouseDown="" onMouseUp="" style="width: 150px"><br/>
<label id="frequency" for=simpleCorrelationFreq>Frequency</label><br/>
<input type=range min=1 max=5 value=1 id=simpleCorrelationOffset step=1 oninput="updateSimpleCorrelationFreq(value);"
onMouseDown="" onMouseUp="" style="width: 150px">
</div>
</td>
</tr>
</table><br/>
<p>
Something quite interesting happens when we interpret the two dot products as coordinates on the complex plane. Using the cosine dot product as the real component, and the the sine dot product as the imaginary component we end up describing a complex number whose magnitude is <i>constant</i> no matter what the phase shift of the incoming signal might be. Notice that the final output of the detector looks remarkably similar to a phasor when plotted on the complex plane, <i>especially</i> as you begin to fiddle with the phase slider. I recommend spending some time with this visualization since it visualizes what’s going on at the heart of the DFT. If you understand this, everything else is (sortof) minutiae.
</p>
<p>
In the next section, we’ll step through an example computation of the DFT and see exactly how the detector that we’ve developed over the last two sections is used in the DFT.
</p>
<br/>
</td>
<td class="figureExplanation" style="">
</td>
</tr>
</table><br/>
<div class="title" id="footer"></div><script type="text/javascript" src="menu.js"></script></body>
</html>