forked from jackschaedler/circles-sines-signals
/
index.html
176 lines (153 loc) · 10.7 KB
/
index.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
<html>
<head>
<title>Circles Sines and Signals - Introduction</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>
<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"> INTRODUCTION
<div class="subheader" style="font-size: 14px"> INTRODUCTION, REFERENCES, AND A DISCLAIMER</div>
</div>
<table class="figureTable">
<tr>
<td style="vertical-align: top;">
<div class="text" style="margin-left: 0">
<p>
This text is designed to accompany your study of introductory digital signal processing.<sup>1</sup> It’s an eccentric piece of not-so-rigorous literature with a preoccupation for explaining things using interactive visualizations, animations and sound.<sup>2</sup> My goal is to explain the Discrete Fourier Transform using a miniature curriculum which leverages your ability to learn concepts and absorb information <i>visually</i> instead of linguistically.<sup>3</sup> My hope is that these glyphs become slightly more comprehensible and slightly less intimidating after reading the subsequent 30 or so pages.<sup>4</sup>
</p>
<table style="margin-left: 50px">
<tr>
<td>
<div class='fourierEquation' style="font-size: 110%">
$$ \mathrm{DFT}[k] = \sum_{n=0}^{N-1} \mathrm{x}[n] \cdot
e^{-\varphi\mathrm{i}} \\
where \quad \varphi = k \frac{n}{N} 2\pi
$$
</div>
</td>
<td>
<svg id="phasorSumSquare" class="svgWithText" width="200" height="180" style="margin-left: 50px"></svg>
<script type="text/javascript" src="js/segue.js"></script>
</td>
</tr>
<tr class="figureCaption">
<td width="50%">
<b>Equation 1.</b> The Discrete Fourier Transform
</td>
<td width="50%">
<b>Figure 1.</b> Visualizing the Composition<br/> of a Complex Signal
</td>
</tr>
</table>
<br/>
<br/>
<div class="quote">
“One reason math texts are so abstruse and technical is because of all the specifications and conditions that have to be put on theorems to keep them out of crevasses. In this sense, they’re like legal documents, and often about as much fun to read.”<br/><br/>
<b> - David Foster Wallace, <i>Everything and More</i><sup>5</sup> </b>
</div><br/>
<p>
If you’re really serious about learning the theory and practice of digital signal processing, you should <i>not</i> use this website as your sole resource. Wherever a compromise was necessary, I’ve erred in favor of simplicity over completeness, fun and engagement over rigor. This text is a piece of pop-science and you should treat it as such.
</p>
<p>
If you want a solid introduction to digital signal processing, I strongly suggest that you read <a href="http://www.amazon.com/Understanding-Digital-Signal-Processing-Edition/dp/0137027419"> Understanding Digital Signal Processing </a> by Richard J Lyons. Lyons writes with a great deal of empathy for the reader, patiently explicating concepts that other authors might deem to be “obvious”. Paolo Prandoni and Martin Vetterli periodically offer <a href="https://youtu.be/Fa-r34Ciwog">a course</a> on digital signal processing through <a href="https://www.coursera.org/course/dsp">Coursera</a>. Their course is free, and the lectures are really quite lovely. Martin and Paolo have also written <a href="http://www.sp4comm.org/">Signal Processing for Communications</a>, which is freely available online.<sup>6</sup> <a href="https://ccrma.stanford.edu/~jos/">Julius O. Smith III</a> has an encyclopedic catalog of DSP writings freely available on his <a href="https://ccrma.stanford.edu/~jos/"> site</a>. Smith’s online text, <a href="https://ccrma.stanford.edu/~jos/mdft/">The Mathematics of the Discrete Fourier Transform </a> is of particular interest. <a href="http://www.ee.columbia.edu/~dpwe/">Dan Ellis</a> posts all of his teaching materials online for free and open access. Geoff Martin’s delightful <a href="http://www.tonmeister.ca/main/textbook/index.html">online book</a> is recommended if you’re interested in a less formal, but still very thorough resource on mathematics and DSP.
</p>
<p>
<a href="http://www.twitter.com/jackschaedler">Contact me</a> on twitter if you have any comments, questions, or complaints about this site. If you encounter an error in the mathematics or a technical issue with the presentation, please file this as an <i>issue</i> on the <a href="https://github.com/jackschaedler/circles-sines-signals">github site</a>.
</p>
<td class="figureExplanation" style="color: #666">
<b>1.</b>
Almost always referred to as "DSP", especially if you’re into the whole brevity thing.<br/><br/>
<b>2.</b>
I’ve attempted to avoid the gratuitous use of interactivity after reading the section titled <a href="http://worrydream.com/#!/MagicInk"> Interactivity Considered Harmful </a> in Bret Victor’s "Magic Ink" essay. If you have strong feelings about interactivity and computer-centric presentations of information, I highly recommend this essay.<br/><br/>
<b>3.</b>
This sentiment and wording might be familiar to you if you’ve read Bret Victor’s <a href="http://worrydream.com/KillMath/"> Kill Math </a>. If you haven’t already, you might also be interested in reading Evan Miller's <a href="http://www.evanmiller.org/dont-kill-math.html">critique of Kill Math</a>.<br/><br/>
<b>4.</b>
See Seymour Papert’s exceptional <a href="http://books.google.de/books/about/Mindstorms.html?id=AP8WBQAAQBAJ&redir_esc=y">Mindstorms</a>. Chapter two is all about "Mathophobia" where he writes, "It is not uncommon for intelligent adults to turn into passive observers of their own incompetence in anything but the most elementary mathematics." If you’re a mathophobe (like me), I hope this text feels like a welcome respite.<br/><br/>
<b>5.</b>
I'm mentioning DFW here because he has an interesting take on technical writing. Everything and More wasn't received particularly well by mathematicians (See Michael Harris' review titled, "A Sometimes Funny Book Supposedly About Infinity"), but I think his comments about technical writing are totally relevant.<br/><br/>
<b>6.</b>
Prandoni and Vetterli are engaged in a concerted effort to make learning materials freely available to the community. They should be commended for this effort. If you've ever hit the, <a href="http://en.wikipedia.org/wiki/Paywall">"Academic Paywall"</a>, you should thank people like Prandoni and Vetterli for not only writing, but also actively distributing their high-quality learning material for free. Their writings and lectures also incorporate philosophy, art, and history into the signal processing curriculum. It's education in the best sense.
</td>
</tr>
</table>
<div class="littleheader"> REFERENCES
<div class="subheader" style="font-size: 14px"> PRAISE AND STEALING</div>
</div>
<table class="figureTable">
<tr>
<td style="vertical-align: top;">
<div class="text" style="margin-left: 0">
This piece was inspired by Mike Bostock’s<a href="http://vimeo.com/112319901"> Visualizing Algorithms</a>, David Mimno’s <a href="http://youtu.be/-0Pe30Zz3a0">Understanding Machine Learning with D3</a>, Bret Victor’s <a href="http://vimeo.com/67076984">Media for Thinking the Unthinkable</a>, and Setosa’s <a href="http://setosa.io/ev/">Explained Visually</a>.<sup>7</sup>
</div><br/><br/>
<div class="text" style="margin-left: 0">
All of the visualizations were created using the <a href="http://d3js.org/">D3.js</a> library. D3 is an exceptional piece of software, and presents a brilliantly low barrier to entry via an <a href="http://bl.ocks.org/mbostock">enormous amount</a> of freely available <a href="http://vimeo.com/69448223"> online examples</a>. If <a href="http://jackschaedler.github.io/goya/">my last project</a> was an exploration into <a href="https://github.com/clojure/clojurescript">ClojureScript</a>, this one is an exploration into D3.<sup>8</sup>
</div>
</td>
<td class="figureExplanation" style="color: #666">
<b>7.</b>
<i>Heavily</i> inspired. If you suspect that I’ve cribbed anything, you’re probably right. Any similarities between this text and their stuff can be attributed to my great admiration for these people and their work.<br/><br/>
<b>8.</b>
That being said, this is <i>not</i> a coding project. This project is primarily an experimental piece of educational art. Don’t let my sloppy coding reflect poorly on the underlying technology.
</td>
</tr>
</table>
</p>
<br/><br/>
<div class="title" id=""><div class="footerbutton" style=""><a href="signals.html">NEXT <span style="font-size: 12px">▶</span></a></div></div>
<script type="text/javascript" src="menu.js"></script></body>
</html>