-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathreflection.html
263 lines (249 loc) · 13.8 KB
/
reflection.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
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Optics</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="bulma.min.css" />
<link rel="stylesheet" type="text/css" href="bulma-tooltip.min.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="old.css" />
</head>
<body>
<div class="container">
<nav class="navbar">
<div class="navbar-brand">
<h3 class="title">Optics</h3>
</div>
<div class="navbar-menu is-active">
<div class="navbar-start">
<a class="navbar-item" href="index.html">Home</a>
<a class="navbar-item" href="reflection.html">Reflection</a>
<a class="navbar-item" href="refraction.html">Refraction</a>
<a class="navbar-item" href="color.html">Color</a>
</div>
</div>
</nav>
</div>
<section class="section">
<div class="container">
<div class="columns">
<div class="explanation column">
<h3 class="title">Reflection</h3>
<p>When light hits a mirror, it reflects out at the same angle that it hit the mirror at. This angle is
measured off of the normal vector, which is perpendicular to the surface of the mirror. Try moving
the light ray to the right to see reflection in action. </p>
<br/>
<blockquote class="notification">
<h6 class="has-text-centered subtitle">Law of Reflection</h6>
The angle with which light hits the mirror (θ<sub>i</sub>) is the same as the angle it reflects out at (θ<sub>r</sub>).
<br/>
<br/>
<h6 class="subtitle has-text-centered">
<pre>θ<sub>i</sub> = θ<sub>r</sub></pre>
</h6>
</blockquote>
</div>
<div id="reflection_flat" class="column sim-container"></div>
</div>
<div class="columns">
<div class="column explanation">
<h3 class="title">Virtual Images</h3>
<p>
Over to the right, there are two lights, red and blue, and a mirror.
If you stood next to the red light, and looked at it, well, it would
look like where it was. Not very exciting.
</p>
<p>
But if you looked at the red lamps reflection, it would appear to be where the blue lamp is. The blue lamp represents the
red lamps <b>virtual image.</b>
You'll notice that the virtual image is flipped perpendicular to the plane of the mirror.
This means that what points down in this simulation now points up.
But left still points left, and right still points right.
</p>
<!-- <p>
If you're wondering now why the text on your shirt looks backward in a mirror,
I think this <a href="https://www.youtube.com/watch?v=vBpxhfBlVLU">video by Physics Girl</a>
does a good job of explaining that.
</p> -->
<p>
Side note: you might notice that it is impossible to tell if the purple rays came from the
reflection of the red lamp, or were the rays from the blue lamp transmitted
through the mirror...
</p>
</div>
<div class="column sim-container" id="virtual_images">
</div>
</div>
<div class="columns">
<div class="explanation column">
<h3 class="title">Curved mirrors</h3>
<p>
Light hitting a curved mirror can get a bit more complicated.
</p>
<p>
When the rays hit a concave part of the mirror, it focuses the light onto a point. The rays also flip which side of the beam
they're on. This is why when you look into a spoon, your reflection is flipped. Try hovering over
the rays to see this.
</p>
<p>
When the light hits a convex part of the mirror, it tends to spread out, and the rays don't flip. This is why convex mirrors
are more boring than concave mirrors.
</p>
</div>
<div id="reflection_dome" class="column sim-container"></div>
</div>
<div class="columns">
<div class="explanation column">
<h3 class="title"> More curved mirrors </h3>
<p>
Here's another curved mirror to play with. This one's been modified to not be perfectly reflective.
</p>
<p>
Instead, it only reflects
<b id="percent-reflectance">50%</b> of the light that hits it. It lets another
<b id="percent-transmission">10%</b> through, and the absorbs the other
<b id="percent-absorbance">40%</b>. The absorbed light gets turned into heat.
Real mirrors tend to have reflectances within 80% - 99%, and absorb the rest.
</p>
</div>
<div id="bezier" class="column sim-container"></div>
</div>
<div class="columns">
<div class="explanation column">
<h3 class="title">Focusing Light</h3>
<p>
Focusing light is very useful. It can help to
amplify a weak signal, heat water in a
solar collector, and light things on fire, among other uses.<sup class="tooltip is-tooltip-right is-tooltip-multiline" data-tooltip="Please don't try lighting things on fire at home">*</sup>
</p>
<p>
Since curved mirrors focus light, you can use a half circle to focus a beam onto a point.
</p>
<p>
But, as you can see to the right, not all of the light is focused. Most rays just bounce out of the circle without coming near the focus.
The rays that do hit the focus don't focus into a point, but rather into a upside down heart like shape (cardioid).
This is more visible when the radius of the circle is smaller.
</p>
<p>
The fact that a circle doesn't perfectly focus light is called
<b>spherical aberration</b>. It can be minimized by only using the bottom part of the circle.
</p>
</div>
<div id="reflection_dish" class="column sim-container"></div>
</div>
<div class="columns">
<div class="explanation column">
<h3 class="title">The Parabola</h3>
<p>
The parabola is another choice for focusing light, and as you will see, it focuses light far better than the circle.<sup class="tooltip is-tooltip-right is-tooltip-multiline" data-tooltip="In fact, it can be mathematically
proven that every light ray coming down vertically onto a parabola will all be reflected towards the
same point, the parabola's focal point">*</sup>
<!--In fact, it can be mathematically
proven that every light ray coming down vertically onto a parabola will all be reflected towards the
same point, the parabola's focal point.-->
<!-- <sup class="footnote" data-balloon="Here's a great video that proves that, if you want" data-balloon-length="medium" data-balloon-pos="up">
<a href="https://www.youtube.com/watch?v=owVwjr6pTqc">[1]</a>
</sup> -->
</p>
<p>
You can see how the parabola focuses light by trying out the vertical beam (left). The light rays will all focus onto the
parabolas focal point. You can change how far away that point is with the slider below.
</p>
<p>
Then, try the cone lamp (right) and position it at the focal point. If you get it close enough, the lamp's rays should all
be reflected to form a vertical beam.
</p>
<p>
<!-- You can take that beam, and focus it back down with another parabola. You can try that below. I've limited the number of
times each light ray can get reflected, just so things don't get to messy. -->
Below, you can try using this property to focus light from one parabola onto another.
</p>
</div>
<div id="reflection_parabola" class="column sim-container"></div>
</div>
<div class="columns">
<div class="explanation column">
<h3 class="title">Satellite Dishes</h3>
<p>
This simulation shows how satellite dishes work.
</p>
<p>
Satellite dishes are 3D parabolas.<sup class="tooltip is-tooltip-multiline is-tooltip-right" data-tooltip="These are called parabaloids">*</sup>
Every satellite dish has a rod that sticks out from it.
At the end of the rod is the transceiver. It can emit and detect
radio waves, which are a kind of light that we humans can't see naturally.
</p>
<p>
The rod is used to position the transceiver at the parabola's focal point, so it can easily pick up all incoming light. When
two dishes are pointed at each other, any light from one of them will be focused into a
beam that points toward the other dish, where it gets focused onto the other's receiver.
</p>
<p>
(These rays are limited to only
reflect twice, just so things don't get to messy.)
</p>
</div>
<div class="column sim-container" id="beaming_parabola"></div>
<!-- <div class="one-half column">
<img src="dish.jpg">
</div> -->
</div>
<div class="columns">
<div class="explanation column">
<h3 class="title">The Ellipse</h3>
<p>
An ellipse, or oval, can also focus light. It has two focal points. When a light is placed
at one focal point, all of its rays are focused onto the other focal point.
</p>
<p>
A lot of phenomena related to reflecting light also work for sound.
For example, if you stand in the focal point of an elliptical room,
and whisper, your whisper will be focused onto the other focal point.
Someone at that point will therefore be able to hear you whispering from across the room.
</p>
<p>
Similarly, the parabola can also focus sound. This kind of device is
called a parabolic microphone, and it can let you hear sounds that
are very far away.
</p>
<p>
(These rays are limited to only
reflect once, just so things don't get to messy.)
</p>
</div>
<div class="column sim-container" id="ellipse">
</div>
</div>
<div class="columns">
<div class="explanation column">
<h3 class="title">Circles!</h3>
<p>
Now you can try playing around with light rays inside a circular mirror. It makes pretty patterns.
</p>
<p>
In reality, the rays would keep bouncing, but to keep your computer happy, these ones can only bounce 10 times.
</p>
<p>
Once you're done, you can move onto
<a href="refraction.html">refraction!</a>
</p>
</div>
<div id="reflection_circle" class="column sim-container"></div>
</div>
</div>
</section>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
<script src="geometry.js"></script>
<script src="ui.js"></script>
<script src="reflection_flat.js"></script>
<script src="reflection_dome.js"></script>
<script src="reflection_dish.js"></script>
<script src="reflection_circle.js"></script>
<script src="parabola.js"></script>
<script src="parabola2.js"></script>
<script src="bezier.js"></script>
<script src="ellipse.js"></script>
<script src="virtual.js"></script>
</body>
</html>