forked from jackschaedler/circles-sines-signals
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdft_frequency.html
249 lines (216 loc) · 9.65 KB
/
dft_frequency.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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<html>
<head>
<title>Circles Sines and Signals - Frequency Interpretation</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/javascript" src="third_party/jsfft/lib/complex_array.js"></script>
<script type="text/javascript" src="third_party/jsfft/lib/fft.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"> FREQUENCY RESOLUTION OF THE DFT
<div class="subheader" style="font-size: 14px"> FREQUENCY LAYOUT OF THE DFT BINS </div>
</div>
<table class="figureTable">
<tr>
<td style="vertical-align: top;">
<div class="text" style="margin-left: 0px">
<p>
Each bin in the DFT output corresponds to a particular frequency. We can determine the frequency of a given bin using the following equation,
</p>
<div style="font-family: lato; color: #333; padding-left: 20px; text-align: center">
The <b>frequency</b> of the <b>k<sup>th</sup> bin</b> is given by,<br/><br/>
<b>k × (sampling_rate / N)</b></br></br>
<sub>Where <b>N</b> is the number of samples in the input signal</sub>
</div>
<br/><br/>
Recall that the sampling rate used in our last few examples is <span class="inlineexample">8Hz</span>.
This means that the frequencies of the output bins for our examples are <span class="inlineexample">0Hz, 1Hz, 2Hz, 3Hz, 4Hz, 5Hz, 6Hz, and 7Hz.</span> Play around with the following visualization to see how the bin frequencies are laid out as the number of samples in the input <span class="inlineexample">(N)</span> changes.
<br/><br/>
<script>
var N = 8;
var K = 0;
function updateN(value) {
N = value * 2;
}
function updateK(value) {
K = value;
}
</script>
<table>
<tr class="figureCaption">
<td width="100%">
<b>Figure 1.</b> Frequency Layout of DFT Bins<br/>
<sub> Sampling Rate is assumed to be 8Hz </sub>
</td>
</tr>
<tr>
<td>
<svg id="binfrequencies" class="svgWithText" width="705" height="80" style="margin-top:30px; padding-left: 0px; padding-bottom: 0px;"></svg>
<script type="text/javascript" src="js/bin_frequencies.js"></script>
<div class="controls" style="margin-top: 15px;">
<label id="inputSamples" for=N>N = <b>8</b><br/><sub>(Number of Input Samples)</sub></label><br/>
<input type=range min=1 max=8 value=4 id=N step=1 oninput="updateN(value);"
onMouseDown="" onMouseUp="" style="width: 150px"><br/>
</div>
</td>
</tr>
</table>
<p>
Notice that the bins are always evenly distributed across the frequency spectrum from <span class="inlineexample">0Hz</span> up to the sampling rate. Notice too, that the bins are always harmonically related. In other words, all bin frequencies are multiples of the second bin frequency (the bin right after the DC bin). You can think of this frequency as the <i>fundamental</i> frequency of the DFT, and calculate it as <span style="font-family: lato; color: #333; font-weight: bold"> (sampling rate / N)</span> hertz.
</p>
</td>
<td class="figureExplanation" style="">
</td>
</tr>
</table><br/>
<div class="littleheader"> INCREASING THE FREQUENCY RESOLUTION
<div class="subheader" style="font-size: 14px"> COLLECTING MORE SAMPLES </div>
</div>
<script>
var FFT_SIZE = 8;
function updateSize(value) {
if (value == 1)
{
FFT_SIZE = 8;
}
else if (value == 2)
{
FFT_SIZE = 16;
}
else if (value == 3)
{
FFT_SIZE = 32;
}
else if (value == 4)
{
FFT_SIZE = 64;
}
else if (value == 5)
{
FFT_SIZE = 128;
}
}
</script>
<table class="figureTable">
<tr>
<td style="vertical-align: top;">
<div class="text" style="margin-left: 0px">
<p>
As the number of input samples increases, we can see that the <i>resolution</i> of the DFT output will also increase. If you need a higher resolution in the DFT output, you simply provide a longer input signal to the DFT.
</p>
<p>
We often choose a DFT resolution which is high enough to allow us to distinguish between sinusoidal components which are close to one another in frequency.
For example, let’s suppose that we’re trying to analyze a signal which is composed of two sinusoids. One of the sinusoids has a frequency of <span class="inlineexample">5 Hz</span> and the other has a frequency of <span class="inlineexample">6 Hz</span>. <i>Figure 2</i> shows the composition of this compound signal. The <span class="inlineexample">5 Hz</span> phasor is shown in blue, and the <span class="inlineexample">6 Hz</span> phasor is shown in orange.
</p>
<br/>
<table style="">
<tr class="figureCaption">
<td width="100%">
<b>Figure 2.</b> A Compound Waveform Composed of Two Sinusoids<br/>At 5 Hz and 6 Hz
</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/res_phasors.js"></script>
</td>
</tr>
</table>
<p>
Since this signal is composed of two sinusoids, we would expect to see two peaks in the DFT output. One of these peaks should appear at <span class="inlineexample">5 Hz</span>, and one at <span class="inlineexample">6 Hz</span>. Since both of the circles have the same size (magnitude), we would also expect the two peaks to have the same height.
</p>
<p>
In order to properly identify these two individual sinusoids, we must increase the frequency resolution of the DFT output. This is accomplished by increasing the number of input samples which are fed to the DFT. <i> Figure 3</i> allows you to vary the length of the input signal in order to see the effect on the DFT output. The two “expected” peaks are shown in red. Drag the slider at the bottom of <i>Figure 3</i> to increase or decrease the length of the input signal.
</p>
<br/>
<table>
<tr class="figureCaption">
<td width="100%">
<b>Figure 3.</b> Increasing DFT Resolution by Collecting More Input Samples
</td>
</tr>
<tr>
<td>
<div id="wrapper" class="animation" style="position:relative">
<svg id="dftresolution" class="svgWithText" width="740" height="400" style="margin-left: 0px; margin-right: 0px; padding-top: 0px; padding-left: 20px;"></svg>
<script type="text/javascript" src="js/dft_resolution1.js"></script>
<div class="controls" style="margin-top: 5px">
<label for=size>Input Samples</label><br/>
<input type=range min=1 max=5 value=1 id=size step=1 oninput="updateSize(value);"
onMouseDown="" onMouseUp="" style="width: 150px"><br/>
</div>
</div>
</td>
</tr>
</table>
<br/>
<p>
There’s a very fundamental trade-off being demonstrated in <i>Figure 3</i>. In order to achieve high-resolution in the frequency domain, we must collect <i>many</i> samples in the time domain. The resolution of our DFT output is directly proportional to the length of the input signal we feed it.
</p>
<p>
This idea has big implications if we’re interested in performing high-resolution frequency analysis in real-time. The more input samples we need, the longer we have to wait for them. The longer we wait, the more latency we introduce into our analysis process. High resolution in the frequency domain implies a decrease in our time-domain resolution.
</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>