/
dft_walkthrough.html
141 lines (120 loc) · 5.29 KB
/
dft_walkthrough.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
<html>
<head>
<title>Circles Sines and Signals - Discrete Fourier Transform Example</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"> A WALKTHROUGH OF THE DFT
<div class="subheader" style="font-size: 14px"> STEP BY STEP </div>
</div>
<table class="figureTable">
<tr>
<td style="vertical-align: top;">
<div class="text" style="margin-left: 0px">
<p>
In this section we’ll present an animation that <i>literally</i> shows you every single arithmetic operation required to perform an 8-point DFT as described by the equation for the Discrete Fourier Transform,
</p>
<div class='fourierEquation'>
$$ \mathrm{DFT}[k] = \sum_{n=0}^{N-1} \mathrm{x}[n] \cdot
(cos(\varphi) - sin(\varphi)i) \\
where \quad \varphi = k \frac{n}{N} 2\pi
$$
</div>
<p>
I don’t expect you to scrutinize every bit of this animation. It’s not necessary to read, check, and understand every single term in the multiplication and summation sequences. Instead, it’s far more important to be able to relate what’s happening in the animation to the symbolic representation shown in the formula. My desire is that you simply appreciate that while the theory and notation surrounding the DFT may be abstract and challenging, actually <i>implementing</i> the DFT is relatively straightforward. Hopefully, walking through every step of the process will serve to demystify the topic.
</p>
<p>
The animation in <i>Figure 1</i> allows you to choose between three input signals: a sine wave, a square wave, and a saw wave. <i>These all have a fundamental frequency of 1Hz</i>, which implies that the sampling rate of of the signals is <i>8 Hz</i>. I suggest that you watch the animation for each signal before moving on to the next section. Click the Play button when you’re ready to view the animation. Don’t worry if it moves too quickly, In the next two sections you will be able to freely explore the output and intermediate stages of the transform at your leisure.
</p>
<br/>
<table>
<tr class="figureCaption">
<td width="100%">
<b>Figure 1.</b> Animated Walkthrough of the Discrete Fourier Transform<br/><br/>
</td>
</tr>
<tr>
<td>
<div id="animatedDftWrapper" class="animation" style="width:750px; margin-left: auto; margin-right: auto; position: relative; ">
<table>
<tr style="">
<td>
</td>
</tr>
<tr>
<td>
<div id="fourierEquations" style="width: 50%; margin-right: 0px; margin-left: auto; display: inline;">
</div>
</td>
</tr>
</table>
<br/><br/>
<svg id="dftAnimated" class="svgWithText" width="705" height="490" style="margin-top:30px; padding-left: 10px; padding-bottom: 10px;"></svg>
<script type="text/javascript" src="js/dft_animated.js"></script>
</div>
</td>
</tr>
</table>
<br/><br/>
</td>
<td class="figureExplanation" style="">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
The Input Signal corresponds to the <b>x[n]</b> term in the equation.
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
This little row of complex numbers corresponds to the <b>DFT</b> term in the equation. It's the output of the DFT.
</td>
</tr>
</table><br/>
<div class="title" id="footer"></div><script type="text/javascript" src="menu.js"></script></body>
</html>