forked from Palakis/circles-sines-signals
-
Notifications
You must be signed in to change notification settings - Fork 0
/
sincos.html
201 lines (181 loc) · 8.41 KB
/
sincos.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
<html>
<head>
<title>Circles Sines and Signals - Sine and Cosine</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="//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"> THE SINE WAVE
<div class="subheader" style="font-size: 14px"> PERIODIC MOVEMENT AND THE CIRCLE </div>
</div>
<script>
var PHASOR_FREQUENCY = 2;
var PHASOR_AMPLITUDE = 1;
var TARGET_PHASOR_FREQUENCY = 2;
var TARGET_PHASOR_AMPLITUDE = 1;
var PHASOR_INTERPOLATOR = d3.interpolateNumber(PHASOR_FREQUENCY, TARGET_PHASOR_FREQUENCY);
var PHASOR_AMP_INTERPOLATOR = d3.interpolateNumber(PHASOR_AMPLITUDE, TARGET_PHASOR_AMPLITUDE);
var PHASOR_INTERPOLATION = 1.0;
var PHASOR_AMP_INTERPOLATION = 1.0;
function GET_PHASOR_FREQUENCY() {
return PHASOR_INTERPOLATOR(Math.min(PHASOR_INTERPOLATION, 1.0));
}
function GET_PHASOR_AMPLITUDE() {
return PHASOR_AMP_INTERPOLATOR(Math.min(PHASOR_AMP_INTERPOLATION, 1.0));
}
function updateFreq(freq) {
PHASOR_FREQUENCY = GET_PHASOR_FREQUENCY();
TARGET_PHASOR_FREQUENCY = freq;
PHASOR_INTERPOLATION = 0.0;
PHASOR_INTERPOLATOR = d3.interpolateNumber(PHASOR_FREQUENCY, TARGET_PHASOR_FREQUENCY);
}
function updateAmp(amp) {
PHASOR_AMPLITUDE = GET_PHASOR_AMPLITUDE();
TARGET_PHASOR_AMPLITUDE = amp / 5000;
PHASOR_AMP_INTERPOLATION = 0.0;
PHASOR_AMP_INTERPOLATOR = d3.interpolateNumber(PHASOR_AMPLITUDE, TARGET_PHASOR_AMPLITUDE);
}
</script>
<table class="figureTable">
<tr>
<td style="vertical-align: top;">
<div class="text" style="margin-left: 0px">
<p>
Most of us are introduced to <i>sine</i> and <i>cosine</i> in Geometry class. We’re taught that sine and cosine are <i>functions</i> whose primary use is the determination of unknown lengths and angles when working with right triangles. I think it’s better to think of sine waves as expressions of pure periodic movement, and to focus on the deep relationship between sine waves and circles.<sup>1</sup>
</p>
<p>
We can describe the shape of a sine wave by spinning a line around in a circle. The vertical distance from the center of the circle to the tip of the line gives us the <i>amplitude</i> of the sine wave. The faster the line is spinning, the higher the <i>frequency</i> of the resulting sine wave. <i>Figure 1</i> shows the generation of a sine wave via circular movement. You can change the amplitude and frequency of the resulting sine wave by adjusting the sliders at the bottom of the figure.
</p>
<br/>
<table>
<tr class="figureCaption">
<td width="100%">
<b>Figure 1.</b> The Sine Wave
</td>
</tr>
<tr>
<td>
<svg id="phasor" class="svgWithText" width="600" height="150" style="margin-left: 50px; margin-right: 100px;"></svg>
<script type="text/javascript" src="js/phasor_sine.js"></script>
<div class="controls">
<label for=freqFader>Frequency</label><br/>
<input type=range min=2 max=16 value=2 id=freqFader step=1 width=150 oninput="updateFreq(value);"><br/>
<label for=ampFader>Amplitude</label><br/>
<input type=range min=0 max=5000 value=5000 id=ampFader step=1 width=150 oninput="updateAmp(value);">
</div>
</td>
</tr>
</table>
<br/>
<p>
The construction in <i>Figure 1</i> is so important to our studies that we’ll give it a special name, the <i>phasor</i>.<sup>2</sup> Any time you see the term <i>phasor</i> in this text you should think of a line spinning around in a circle. In later sections we will see how phasors can be combined to create arbitrarily complex wave shapes.
</p>
</td>
<td class="figureExplanation" style="">
<b>1.</b>
It’s worth watching Brad Osgood discuss the nature of sine and cosine in <a href="http://youtu.be/gZNm7L96pfY?t=48m35s">this lecture</a> from Stanford University.<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/>
<b>2.</b>
We’re being a bit fast and loose with the terminology here. "Phasor" can mean a number of different things depending upon who you’re speaking with. If you take umbrage at my naming and have a better idea, let me know.<br/><br/>
</td>
</tr>
</table>
<div class="littleheader"> THE COSINE WAVE
<div class="subheader" style="font-size: 14px"> THE COUNTERPART TO SINE </div>
</div>
<table class="figureTable">
<tr>
<td style="vertical-align: top;" width="160px">
<div class="text" style="margin-left: 0px; width: 160px">
<table width="160px">
<tr class="figureCaption">
<td>
<b>Figure 2.</b> The Cosine Wave
</td>
</tr>
<tr>
<td>
<svg id="phasor2" class="svgWithText" width="150" height="350" style=""></svg>
<script type="text/javascript" src="js/phasor_cosine.js"></script>
</td>
</tr>
</table>
</div>
</td>
<td style="vertical-align: top" width="750">
<span style="display:inline-block; vertical-align: top">
<div class="textfontonly" style="margin-top: 0px; padding-left: 30px">
<p>
<i>Cosine</i> waves are generated in a similar fashion to sine waves, except that we trace the <i>horizontal</i> distance from the center of the circle to the tip of the line. In actuality, sine and cosine wave have exactly the same shape. One is just a <i>rotated</i> version of the other. If you don’t believe me, rotate your head 90 degrees to the right and you’ll find that the cosine wave has become a sine wave.
</p>
<p>
Sine and cosine are exceptionally interesting, and their relationship to one another is crucially important for the functioning of the Fourier Transform. For the time being, our main takeaway from this section should be that sine and cosine are periodic functions with a deep connection to movement about the unit circle. It’s this deep connection to the circle which gives sine and cosine a number of very astonishing properties which we'll investigate in detail in later sections. In the next section we’ll reacquaint ourselves with the unit-circle and some basic trigonometric properties before returning to the question of sampling.
</p>
</div>
</span>
</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>