-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathconstellations.html
More file actions
442 lines (414 loc) · 22.9 KB
/
constellations.html
File metadata and controls
442 lines (414 loc) · 22.9 KB
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
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Patterns in the Sky - Astro for Kids</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/pages/constellations.css">
</head>
<body>
<div class="stars-bg"></div>
<nav class="top-nav"></nav>
<main class="page-content">
<!-- HERO -->
<section class="page-hero fade-in">
<h1>Patterns in the Sky</h1>
<p>Did you know the stars in a constellation might be hundreds of light-years apart?</p>
</section>
<!-- INTRO: WHAT IS A CONSTELLATION? -->
<section class="card fade-in fade-in-delay-1">
<h2>What Are Constellations, Really?</h2>
<p>
When you look up at the night sky, you might connect bright stars into shapes -- a hunter,
a bear, a scorpion. People have been doing this for thousands of years. We call these
patterns <strong>constellations</strong>.
</p>
<p>
But here is the surprising part: the stars in a constellation are <strong>not</strong>
actually near each other. They can be separated by hundreds or even thousands of
light-years in depth. They only <em>look</em> close together because we are seeing them
from one particular viewpoint -- Earth.
</p>
<p>
Think of it like looking at two fireflies in a field at night. They might appear right
next to each other from where you are standing, but one could be 10 meters away and the
other 200 meters away. Constellations work the same way, but on an enormous scale.
</p>
<p>
Astronomers call this a <strong>projection effect</strong> -- a flat pattern created by
our perspective, like a shadow on a wall that hides the true 3D shape of the object
casting it. From a different planet orbiting a distant star, these same stars would
scatter into completely unrecognizable patterns.
</p>
</section>
<!-- INTERACTIVE: ORION DEPTH TOGGLE -->
<section class="interactive-area fade-in fade-in-delay-2">
<div class="interactive-label">Interactive</div>
<h3>Orion: Flat Pattern or Scattered Stars?</h3>
<p>
Orion the Hunter is one of the most recognizable constellations. But its stars are
scattered across vastly different distances. Toggle between the familiar 2D sky view
and a side view that reveals each star's true depth.
</p>
<div class="orion-controls">
<button class="btn btn-primary orion-toggle-btn" id="orionToggle">
<span class="toggle-icon">▶</span>
<span class="toggle-label">Switch to 3D Side View</span>
</button>
<span class="view-indicator" id="viewIndicator">Viewing: 2D Sky View (as seen from Earth)</span>
</div>
<div class="orion-viewer" id="orionViewer">
<svg class="orion-svg" id="orionSvg" viewBox="0 0 600 520" xmlns="http://www.w3.org/2000/svg">
<!-- Constellation lines (2D only) -->
<g class="constellation-lines" id="constellationLines">
<!-- Lines will be drawn by JS -->
</g>
<!-- Stars will be placed by JS -->
<g class="orion-stars" id="orionStars"></g>
</svg>
<!-- Depth axis label for 3D view -->
<div class="depth-axis" id="depthAxis">
<span class="depth-label-near">Closer to Earth</span>
<span class="depth-label-far">Farther from Earth</span>
<div class="depth-arrow"></div>
</div>
</div>
<p class="orion-message" id="orionMessage">
All seven major stars look like they belong together, but keep reading to see how far
apart they really are.
</p>
</section>
<!-- SECTION: WHY IT MATTERS -->
<section class="card fade-in">
<h2>A Hunter Made of Illusion</h2>
<p>
Look at how different the distances are for Orion's belt stars alone:
<strong>Mintaka</strong> is about 380 light-years away, <strong>Alnitak</strong> is
roughly 1,200 light-years away, and <strong>Alnilam</strong> -- the middle belt star
-- is a staggering 2,000 light-years away. That is more than five times farther than
Mintaka, yet they appear side by side in our sky.
</p>
<p>
If you could travel to a star system in another part of our galaxy and look back,
Orion would not exist. The stars would be scattered in completely different directions.
The constellation is a trick of perspective -- beautiful, but not real in three
dimensions.
</p>
<div class="fact-box">
<div class="fact-label">Space Fact</div>
<p>
From another planet, Orion would not look like this at all! Every constellation is
unique to Earth's viewpoint. An alien civilization on the other side of the Milky
Way would see completely different patterns in their sky.
</p>
</div>
</section>
<!-- SECTION: THE PLEIADES -- A REAL CLUSTER -->
<section class="card pleiades-section fade-in">
<h2>The Pleiades: Stars That Actually Are Neighbors</h2>
<p>
Not all groups of stars are illusions. Some really are close together in space. The
<strong>Pleiades</strong> (also called the Seven Sisters) is a beautiful example of a
<strong>real star cluster</strong> -- a group of stars born from the same cloud of gas,
traveling through space together.
</p>
<div class="pleiades-stats">
<div class="stat-item">
<span class="stat-value">~444</span>
<span class="stat-unit">light-years away</span>
</div>
<div class="stat-item">
<span class="stat-value">~13</span>
<span class="stat-unit">light-years across</span>
</div>
<div class="stat-item">
<span class="stat-value">~1</span>
<span class="stat-unit">light-year between stars</span>
</div>
<div class="stat-item">
<span class="stat-value">~100 million</span>
<span class="stat-unit">years old</span>
</div>
</div>
<p>
Compare that to a constellation like Orion, where stars are separated by
<em>hundreds</em> of light-years in depth. In the Pleiades, the stars are genuinely
close -- roughly 1 light-year apart from each other. They were born together from the
same giant cloud of gas about 100 million years ago, and they are still drifting through
space as a family.
</p>
<p>
Over 1,000 stars belong to the Pleiades cluster, but only 6 or 7 of the brightest
are visible to the naked eye. Over the next few hundred million years, the cluster will
gradually spread apart as each star follows its own slightly different orbit through the
galaxy.
</p>
<div class="fact-box">
<div class="fact-label">Key Difference</div>
<p>
<strong>Constellation</strong> = a pattern that only looks connected from Earth
(stars at very different distances).<br>
<strong>Star cluster</strong> = a real group of stars that are physically close,
born from the same gas cloud, and often traveling together through space.
</p>
</div>
</section>
<!-- SECTION: BIG DIPPER EXCEPTION -->
<section class="card fade-in">
<h2>The Big Dipper: A Partial Exception</h2>
<p>
Most constellations are pure projection -- but the Big Dipper has a twist. Five of its
seven main stars (all except the two at the ends, Dubhe and Alkaid) are actually moving
through space together. They belong to the <strong>Ursa Major Moving Group</strong>, a
loose collection of stars that share a common origin and direction of travel.
</p>
<p>
So the Big Dipper is partly a real association and partly a coincidence. The two end
stars just happen to be in the same line of sight from Earth but are on completely
different paths. Over tens of thousands of years, the Big Dipper's familiar scoop shape
will slowly warp and deform as those unrelated stars drift away.
</p>
<p>
The Big Dipper is technically an <strong>asterism</strong> -- an informal pattern of
stars -- rather than a constellation itself. It is the most recognizable part of the
larger constellation <strong>Ursa Major</strong> (the Great Bear). Similarly, the
Little Dipper is the main asterism within <strong>Ursa Minor</strong> (the Little Bear).
</p>
</section>
<!-- SECTION: FINDING POLARIS -->
<section class="card fade-in">
<h2>Finding Polaris: The Pointer Stars</h2>
<p>
The Big Dipper is not just a pretty pattern -- it is one of the most useful tools for
navigating the night sky. The two stars at the outer edge of the Big Dipper's bowl,
<strong>Dubhe</strong> and <strong>Merak</strong>, are called the
<strong>Pointer Stars</strong>. Draw an imaginary line from Merak through Dubhe and
extend it about five times the distance between them. That line leads straight to
<strong>Polaris</strong>, the North Star.
</p>
<div class="pointer-stars-diagram">
<img src="pics/little_dippers_big_dippers.jpg"
alt="Diagram showing the Big Dipper's pointer stars (Merak and Dubhe) leading to Polaris, the North Star, at the tip of the Little Dipper"
class="diagram-img">
<p class="diagram-caption">
Follow the Pointer Stars (Merak and Dubhe) to find Polaris at the tip of the Little Dipper.
</p>
</div>
<h3>What Makes Polaris Special?</h3>
<p>
Polaris sits less than a degree from the <strong>north celestial pole</strong> -- the
point in the sky directly above Earth's North Pole. As the Earth rotates, every other
star appears to move in circles across the sky, but Polaris barely moves at all. It
stays fixed in roughly the same spot all night, all year, making it an anchor point
for navigation.
</p>
<p>
Polaris is not especially bright -- it ranks about 48th in brightness among stars
visible to the naked eye. What makes it important is its <em>position</em>, not its
brightness. It is also a <strong>Cepheid variable</strong> star, a type that pulsates
in brightness on a regular cycle. Cepheids are crucial for measuring cosmic distances,
making Polaris both a navigator's tool and an astronomer's reference point.
</p>
<div class="fact-box">
<div class="fact-label">Navigation Trick</div>
<p>
The altitude of Polaris above the horizon equals your latitude on Earth. If Polaris
is 40 degrees above the horizon, you are at roughly 40 degrees north latitude. At
the North Pole, Polaris is directly overhead. At the equator, it sits right on the
horizon.
</p>
</div>
</section>
<!-- SECTION: SEASONAL ORIENTATION -->
<section class="card fade-in">
<h2>The Big Dipper Through the Seasons</h2>
<p>
Because the Big Dipper circles around Polaris, its orientation changes dramatically
with the seasons. The dipper appears to rotate counterclockwise around Polaris over
the course of a year. Here is how it looks at around 9 PM in each season (for
observers in the northern mid-latitudes):
</p>
<div class="pointer-stars-diagram">
<img src="pics/big_dipper_seasons.png"
alt="The Big Dipper in four seasonal orientations circling around the North Star: above in spring, left in summer, below in fall, right in winter"
class="diagram-img">
<p class="diagram-caption">
The Big Dipper never sets -- it circles Polaris all year, guiding travelers and
stargazers across the ages.
</p>
</div>
<p>
In <strong>spring</strong>, the Big Dipper is high overhead with the bowl facing
down. In <strong>summer</strong>, it tilts to the west with the handle pointing
upward. By <strong>autumn</strong>, it sinks low near the northern horizon with the
bowl facing up. And in <strong>winter</strong>, it stands on its handle to the east
of Polaris, climbing back upward through the long night.
</p>
</section>
<!-- SECTION: THE LITTLE DIPPER -->
<section class="card fade-in">
<h2>The Little Dipper (Ursa Minor)</h2>
<p>
The Little Dipper mirrors the shape of the Big Dipper but is smaller and fainter.
Its most important star is <strong>Polaris</strong>, which sits at the tip of its
handle. While the Big Dipper is easy to spot thanks to its bright stars, the Little
Dipper can be tricky -- most of its stars are dim, and in light-polluted skies only
Polaris and the two bowl-end stars (<strong>Kochab</strong> and
<strong>Pherkad</strong>) are easily visible.
</p>
<p>
The two dippers appear to "pour into" each other: the Big Dipper's bowl opens
toward the Little Dipper, and the Little Dipper's bowl opens back toward the Big
Dipper. Their handles curve in opposite directions.
</p>
<div class="dipper-comparison">
<div class="dipper-item">
<h4>Big Dipper (Ursa Major)</h4>
<ul>
<li>7 bright, easy-to-spot stars</li>
<li>Bowl stars include the Pointer Stars</li>
<li>Circles around Polaris but never sets (for most northern observers)</li>
<li>Part of the 3rd largest constellation</li>
</ul>
</div>
<div class="dipper-item">
<h4>Little Dipper (Ursa Minor)</h4>
<ul>
<li>Fainter -- harder to see in city skies</li>
<li>Contains Polaris at the handle tip</li>
<li>Kochab and Pherkad ("Guardians of the Pole") mark the bowl end</li>
<li>Appears to hang from Polaris like a ladle</li>
</ul>
</div>
</div>
<div class="fact-box">
<div class="fact-label">Deep Time</div>
<p>
Polaris has not always been the North Star, and it will not always be. Earth's
axis slowly wobbles in a circle over about 26,000 years (called
<strong>precession</strong>). Around 3000 BC, the pole star was Thuban in Draco.
In about 12,000 years, Vega will take over the role. Polaris just happens to be
in the right place at the right time for our era.
</p>
</div>
</section>
<!-- DIG DEEPER ACCORDION -->
<div class="accordion fade-in">
<div class="accordion-header">
<span class="accordion-arrow">▶</span>
Dig Deeper: Stellar Associations vs. Constellations
</div>
<div class="accordion-body">
<div class="accordion-inner">
<p>
Astronomers distinguish between several types of star groupings:
</p>
<table class="data-table">
<thead>
<tr>
<th>Type</th>
<th>Physically Real?</th>
<th>Example</th>
<th>What Holds It Together?</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Constellation</strong></td>
<td>No -- projection only</td>
<td>Orion, Scorpius</td>
<td>Nothing (visual pattern from Earth)</td>
</tr>
<tr>
<td><strong>Asterism</strong></td>
<td>No -- a subset pattern</td>
<td>Big Dipper (part of Ursa Major)</td>
<td>Nothing (informal pattern)</td>
</tr>
<tr>
<td><strong>Open Cluster</strong></td>
<td>Yes</td>
<td>Pleiades, Hyades</td>
<td>Gravity (loosely bound, eventually disperses)</td>
</tr>
<tr>
<td><strong>Globular Cluster</strong></td>
<td>Yes</td>
<td>M13 in Hercules</td>
<td>Gravity (tightly bound, very old)</td>
</tr>
<tr>
<td><strong>Moving Group</strong></td>
<td>Yes</td>
<td>Ursa Major Moving Group</td>
<td>Shared origin and motion (not strongly bound)</td>
</tr>
<tr>
<td><strong>OB Association</strong></td>
<td>Yes</td>
<td>Orion OB1 Association</td>
<td>Shared origin (unbound, expanding)</td>
</tr>
</tbody>
</table>
<p>
The key question is always: are these stars physically close in 3D space, or do
they just appear close on our sky? Real clusters share a common origin, age, and
chemical composition. Constellations are cultural inventions -- useful for
navigating the sky, but not a map of real structure.
</p>
<p>
Interestingly, many of Orion's bright stars <em>do</em> belong to a real
structure called the <strong>Orion OB1 Association</strong> -- a large, loosely
connected group of young, hot stars born from the same giant molecular cloud.
But the association spans a huge volume, and the familiar stick-figure of Orion
is still a projection effect layered on top of that real structure.
</p>
</div>
</div>
</div>
<!-- QUIZ -->
<div class="quiz-box fade-in">
<h4>Test Your Understanding</h4>
<p>The three stars of Orion's belt appear close together in our sky. In reality, how far apart are the nearest and farthest belt stars?</p>
<button class="quiz-option" data-correct="false"
data-feedback="Not quite -- even though they look like neighbors, the belt stars are much farther apart than that.">
About 10 light-years apart
</button>
<button class="quiz-option" data-correct="false"
data-feedback="That would be a lot, but the actual difference is even bigger!">
About 500 light-years apart
</button>
<button class="quiz-option" data-correct="true"
data-feedback="That is right! Mintaka is about 380 light-years from Earth, while Alnilam is roughly 2,000 light-years away -- a difference of over 1,600 light-years in depth, yet they appear side by side in our sky.">
Over 1,600 light-years apart in depth
</button>
<button class="quiz-option" data-correct="false"
data-feedback="They are far apart, but not quite that far. The difference in distance from Earth is about 1,600 light-years.">
About 10,000 light-years apart
</button>
<div class="quiz-feedback"></div>
</div>
<!-- FINAL FACT -->
<div class="fact-box fade-in">
<div class="fact-label">Think About This</div>
<p>
Every culture throughout history has looked at the same stars and invented different
constellations. Ancient Greek, Chinese, Aboriginal Australian, and Polynesian
astronomers all saw different patterns. The stars have not changed -- only the stories
we project onto them. The universe does not draw pictures for us. We draw them
ourselves, and that is part of what makes stargazing so human.
</p>
</div>
<div class="page-nav"></div>
<footer class="page-footer">
<p>Astro for Kids -- Built for curious minds exploring the cosmos</p>
</footer>
</main>
<script src="js/nav.js"></script>
<script src="js/common.js"></script>
<script src="js/pages/constellations.js"></script>
</body>
</html>