forked from Palakis/circles-sines-signals
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsampling4.html
151 lines (133 loc) · 6.13 KB
/
sampling4.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
<html>
<head>
<title>Circles Sines and Signals - The Wagon Wheel Effect</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 WAGON WHEEL EFFECT
<div class="subheader" style="font-size: 14px"> YET MORE ALIASING </div>
</div>
<table class="figureTable">
<tr>
<td style="vertical-align: top;">
<div class="text" style="margin-left: 0px">
<p>
You’ve probably noticed that wheels sometimes appear to spin backwards on film or television even when the vehicle they’re attached to is moving forward. This phenomenon is known as the <i>Wagon Wheel Effect</i>, and it’s caused by undersampling and aliasing.
</p>
<p>
A movie camera samples the light entering its lens 24 times per second. Recalling the Nyquist-Shannon Sampling Theorem, we know that our camera will be unable to properly film any phenomenon which cycles at a frequency greater than <span class="inlineexample">12Hz</span>. Whenever the camera undersamples, there will be an apparent reversal of motion when playing back the film.
</p>
<p>
<i>Figure 1</i> demonstrates this effect. On the left side of the figure you see a rotating object. On the right side you see a sequence of “snapshots” which are taken at the sampling rate. You can adjust the sampling rate using the slider at the bottom of the figure.
</p>
<br/><br/>
<table>
<tr class="figureCaption">
<td width="100%">
<b>Figure 1.</b> The Wagon Wheel Effect
<br/><br/><br/>
</td>
</tr>
<tr>
<td>
<script>
var NEW_RATE_AVAILABLE = true;
var RATE_FACTOR = 0.1;
var SETTING_RATE = false;
function updateRate(rate) {
RATE_FACTOR = rate / 10;
NEW_RATE_AVAILABLE = true;
}
function startSetRate() {
SETTING_RATE = true;
}
function endSetRate() {
SETTING_RATE = false;
}
</script>
<svg id="wagonWheel" class="svgWithText" width="350" height="150" style="margin-left: 190px; margin-right: 210px;"></svg>
<script type="text/javascript" src="js/wagon_wheel.js"></script><br/><br/>
<div class="controls">
<label for=rateSlider>Sampling Rate</label><br/>
<input type=range min=0 max=9.5 value=0.1 id=rateSlider step=0.1 oninput="updateRate(value);"
onMouseDown="startSetRate();" onMouseUp="endSetRate();">
</div>
</td>
</tr>
</table>
<br/>
<p>
If you play around with the visualization long enough, you’ll notice that in order to preserve the effect of clockwise motion in the snapshots you need to ensure that a picture is taken at least twice per every revolution of the moving object. Notice too that very weird things can happen if you set the sampling rate to special values. For example, if we take exactly one snapshot per revolution, the object will appear to be stationary in the snapshots.<sup>1</sup> If you sample twice per revolution, the snapshots will show an object in motion, but it will be impossible to infer the direction of motion - it just flips back and forth.
</p>
<p>
In the next section we’ll take one final look at sampling theory before starting our investigations into the Discrete Fourier Transform.
</p>
</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/><br/><br/><br/><br/><br/>
<b>1.</b>
This is why the propellers and fans in factories must not spin at the same rate that the fluorescent lamps blink. Many a hand and finger has been lost because the stroboscopic rate of the fluorescent lamps causes the spinning machinery to appear stationary, and so safe for the insertion of fleshy appendages.<br/><br/>
</td>
</tr>
</table><br/><br/>
<div class="title" id="footer"></div><script type="text/javascript" src="menu.js"></script></body>
</html>