-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcolor.html
146 lines (140 loc) · 7.76 KB
/
color.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
<!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">Color</h3>
<h3 class="subtitle">Additive Blending</h3>
<p>
Now we're gonna start to look at different colors to the right.
You'll notice that all the simulations now have dark backgrounds.
This is because when you mix color with light, it gets
brighter, and harder to see on a white background.
This is called <b>additive blending.</b><sup class="tooltip is-tooltip-multiline is-tooltip-right" data-tooltip="It's the opposite with paint, where mixing colors makes the paint darker. We call that subtractive blending">*</sup>
</p>
<p>
To the right you'll see three circles. These each represent
spot lights shining on your screen. You can change each ones
strength to see how the colors mix.
</p>
<p>
We're using red, green, and blue because they are the primary
colors for light. You can make any other color with them.
Throughout these other simulations, we'll stick with just red, green, and blue,
so that it can be simulated relatively quickly. In reality, color is on
a continuous spectrum from red to violet.<sup class="tooltip is-tooltip-multiline is-tooltip-right" data-tooltip="The spectrum is also called the rainbow!">*</sup>
</p>
</div>
<div class="column sim-container" id="color_mixing">
</div>
</div>
<div class="columns">
<div class="explanation column">
<h3 class="title">Dispersion</h3>
<h3 class="subtitle">Prisms</h3>
<p>
On the previous page, you learned that each material has an index of refraction
that determines how much light is bent. But that was only for light of one color.
In reality, the index of refraction for a material varies with the color of the light.
This is called <b>dispersion.</b>
</p>
<p>
To the right, there is a prism, with different indices of refraction for red, green, and blue.
You can see how it splits the white beam into it's three colors.
In reality, it would split into a continous rainbow, but we're only showing
three colors because of how the simulator is programmed.
</p>
<p>
It is important to note that all conventional materials have a maximum index of refraction
for red light, and the IOR steadily decreases as you reach blue light. But in this simulation,
you can play around with what it would be like if the glass had a higher IOR for blue light
than it did for red light.
</p>
</div>
<div class="column sim-container" id="dispersion">
</div>
</div>
<div class="columns">
<div class="explanation column">
<h3 class="title">Dispersion</h3>
<h3 class="subtitle">Lenses, revisited</h3>
<p>
Dispersion causes issues with lenses. As you can see to the right,
each color of light is focused onto a different point.
This causes an issue called <b>chromatic aberration,</b> which can make
images taken through a lens appear distorted.
</p>
<p>
Chromatic aberration can be overcome by using a lens with a more constant IOR,
or by using thin, small lenses. For everyday applications of lenses,
like cameras and small telescopes,
the amount of aberration is too small to matter, or can be corrected with software.
</p>
<p>
For large telescopes, though, the aberration that would be caused by the large lens
would render any pictures unusable. Instead of overcoming this problem with advancements in lenses,
large telescopes simply use mirrors to focus
light instead.<sup class="tooltip is-tooltip-multiline is-tooltip-right" data-tooltip="There is also a small amount of chromatic aberration caused by the atmosphere, which is why some telescopes are placed in space.">*</sup>
</p>
</div>
<div class="column sim-container" id="chromatic_aberration">
</div>
</div>
<div class="columns">
<div class="explanation column">
<h3 class="title">Reflection</h3>
<h3 class="subtitle">Mirrors, revisited</h3>
<p>
While focusing light with mirrors may save you from chromatic aberration,
mirrors still have a problem with color.
They reflect more of some colors, and less of others.
You can try this by changing the reflectance of the mirror for
each individual color.
</p>
<p>
Most mirrors tend to reflect more green light than anything else.
This is why if you stand between two mirrors, and look into the distance,
the image slowly fades into a green mist. This is also why some people
will answer green when asked what color a mirror is.
</p>
</div>
<div class="column sim-container" id="color_mirrors">
</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="color_mixing.js"></script>
<script src="dispersion.js"></script>
<script src="chromatic_aberration.js"></script>
<script src="color_mirrors.js"></script>
</body>
</html>