/
dotproduct3.html
158 lines (132 loc) · 7.13 KB
/
dotproduct3.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 - Signal Correlation</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="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/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>
<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 AND CONTRIBUTION
<div class="subheader" style="font-size: 14px"> COMPOUND WAVEFORMS AND THEIR CONSTITUENTS </div>
</div>
<table class="figureTable">
<tr>
<td style="vertical-align: top;">
<div class="text" style="margin-left: 0px">
<p>
Recall from the <a href="sound2.html">section on timbre</a> that a square wave is created by summing together a sequence of <i>odd</i> harmonics. <i>Figure 1</i> shows the generation of a square wave by summing together three harmonically related phasors. The large blue phasor corresponds to the first harmonic, the smaller green phasor to the third harmonic, and the purple phasor to the fifth harmonic.
</p>
<br/>
<table style="">
<tr class="figureCaption">
<td width="100%">
<b>Figure 1.</b> Creating a Square Wave Using Three Phasors
</td>
</tr>
<tr>
<td>
<svg id="phasorSumSquare" class="svgWithText" width="700" height="220" style="padding: 20px; margin-left: 0px;"></svg>
<script type="text/javascript" src="js/square_wave_phasors.js"></script>
</td>
</tr>
</table>
<p>
The square wave in Figure 1 can be thought of as a <i>compound</i> waveform since it’s composed of three sinusoidal components. In fact, <i>any</i> waveform can be thought of as an aggregation of one or more sine waves. In this section we’ll utilize the dot product to construct a “detector” which is capable of measuring the presence or absence of a given sine wave within a compound waveform.
</p>
<p>
The “detector” is actually quite simple. It works by computing the dot product of the compound waveform with a pure sinusoid. If the resulting dot product is non-zero (the two signals are correlated), we know that the sinusoid is present in the compound waveform. The magnitude of the dot product tells us <i>how much</i> of that sinusoid is present. We can derive the “formula” or “recipe” for the compound waveform by running it through the detector over and over again while adjusting the frequency of the sine wave. Whenever the dot product is non-zero, we know that that frequency is present in the “recipe”. A basic schematic for this detector is shown in <i>Figure 2</i>. Use the Frequency slider to adjust the target frequency of the detector.
</p>
<br/>
<table>
<tr class="figureCaption">
<td width="100%">
<b>Figure 2.</b> Calculating the Dot Product of a Square Wave and Sines of Varying Frequency.<br/>
<sub>A Component Sine Wave "Detector"<br/>
</td>
</tr>
<tr>
<td><br/>
<svg id="sigCorrelationInteractive" class="svgWithText" width="600" height="350" style="padding: 20px; margin-left: 70px;"></svg>
<script type="text/javascript" src="js/square_correlation.js"></script>
<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;
}
</script>
<div class="controls" width="180">
<label id="frequency" for=simpleCorrelationFreq>Frequency</label><br/>
<input type=range min=1 max=5 value=1 id=simpleCorrelationFreq step=1 oninput="updateSimpleCorrelationFreq(value);"
onMouseDown="" onMouseUp="" style="width: 150px"><br/>
<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/>
</div>
</td>
</tr>
</table><br/>
<p>
As you play with the frequency control, you’ll notice that the detector will register the presence of sinusoidal components at <span class="inlineexample">2</span>, <span class="inlineexample">6</span>, and <span class="inlineexample">10 hertz</span> (the 1<sup>st</sup>, 3<sup>rd</sup>, and 5<sup>th</sup> harmonics of <span class="inlineexample">2 hertz</span>). In addition, the magnitude of the dot product at these frequencies corresponds perfectly with the relative sizes of the phasors in <i>Figure 1</i>. It seems like our detector is working! Using this construction we’re able to specify the frequency and radius of the three phasors which generate our square wave using only the time-domain representation of our square wave. In actuality, we’ve just performed a very simple Fourier Transform.
</p>
<p>
Unfortunately, our detector is flawed. you’ll notice that the detector will completely miss frequency components if the square wave is phase shifted 90 degrees in relation to the sinusoid. Our detector <i>should</i> be robust enough to handle inputs with arbitrary phase shifts. We’ll address this problem in the next section, and fix our detector through the clever use of sine and cosine.
</p> <br/>
</td>
<td class="figureExplanation" style="">
<!-- <b>1.</b> You've also just performed your first <i>autocorrelation</i>. An autocorrelation is the correlation of a <br/><br/> -->
</td>
</tr>
</table><br/>
<div class="footer" id="footer"></div><script type="text/javascript" src="menu.js"></script></body>
</html>