forked from jackschaedler/circles-sines-signals
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathconvolution.html
149 lines (128 loc) · 5.64 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
142
143
144
145
146
147
148
149
<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>
<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"> 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>