-
Notifications
You must be signed in to change notification settings - Fork 86
/
Copy pathconvolution.html
141 lines (120 loc) · 5.22 KB
/
convolution.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>
<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="//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"> CONVOLUTION
<div class="subheader" style="font-size: 14px"> A WALKTHROUGH </div>
</div>
<table class="figureTable">
<tr>
<td style="vertical-align: top;">
<div class="text" style="margin-left: 0px">
When you periodically measure the value of some quantity, you’re <i>sampling</i>. Discrete signals are usually generated by sampling real-world continuous signals<sup>1</sup>. As an example, let's think about the process of sampling the altitude of a plane over the course of a two hour long flight. In the following animation, we create a discrete signal by sampling the altitude of the plane every ten minutes.
<br/><br/><br/><br/>
<table>
<tr class="figureCaption">
<td width="100%">
<b>Figure 1.</b> Sampling the Altitude of a Plane as it Travels from Paris to Berlin
</td>
</tr>
<tr>
<td>
<div id="animationWrapper" class="animation" style="position: relative; ">
<svg id="convolution" class="svgWithText" width="750" height="450" style="margin-left: 50px; margin-right: 0px; padding-top: 80px; padding-left: 10px;"></svg>
<script type="text/javascript" src="js/convolution.js"></script>
</div>
</td>
</tr>
</table>
</td>
<td class="figureExplanation" style="">
<b>1.</b>
It's also possible to sample a discrete signal. This process is called re-sampling. Discrete signals may also be synthesized or constructed, which is what your digital synthesizer is doing. Just rememebr that a discrete signal is fundamentally just a list of numbers. <br/><br/>
</td>
</tr>
</table>
<div class="littleheader"> THE FREQUENCY RESPONSE
<div class="subheader" style="font-size: 14px"> UTILIZING THE CONVOLUTION THEOREM </div>
</div>
<table class="figureTable">
<tr>
<td style="vertical-align: top;">
<div class="text" style="margin-left: 0px">
When you periodically measure the value of some quantity, you’re <i>sampling</i>. Discrete signals are usually generated by sampling real-world continuous signals<sup>1</sup>. As an example, let's think about the process of sampling the altitude of a plane over the course of a two hour long flight. In the following animation, we create a discrete signal by sampling the altitude of the plane every ten minutes.
<br/><br/><br/><br/>
<table>
<tr class="figureCaption">
<td width="100%">
<b>Figure 1.</b> Sampling the Altitude of a Plane as it Travels from Paris to Berlin
</td>
</tr>
<tr>
<td>
<div id="animationWrapper2" class="animation" style="position: relative; ">
<svg id="firresponse" class="svgWithText" width="750" height="500" style="margin-left: 0px; margin-right: 0px; padding-top: 0px; padding-left: 20px;"></svg>
<script type="text/javascript" src="js/fir_response.js"></script>
</div>
</td>
</tr>
</table>
</td>
<td class="figureExplanation" style="">
<b>1.</b>
It's also possible to sample a discrete signal. This process is called re-sampling. Discrete signals may also be synthesized or constructed, which is what your digital synthesizer is doing. Just rememebr that a discrete signal is fundamentally just a list of numbers. <br/><br/>
</td>
</tr>
</table><br/>
<div class="title" id="footer"></div><script type="text/javascript" src="menu.js"></script></body>
</html>