Skip to content

STARS.md

Latest commit

 

History

History
136 lines (101 loc) · 4.9 KB

STARS.md

File metadata and controls

136 lines (101 loc) · 4.9 KB
Raw

Real Star System Documentation

Overview

This website features an authentic astronomical star rendering system using real celestial data from star catalogs. Instead of randomly generated stars, you're seeing actual stars from the night sky positioned according to their true celestial coordinates.

How It Works

Star Catalog

The stars.json file contains data for 54 of the brightest stars visible from Earth, including:

  • Star Name: Famous stars like Sirius, Vega, Polaris, Betelgeuse, etc.
  • Right Ascension (RA): The celestial equivalent of longitude (0-360 degrees)
  • Declination (Dec): The celestial equivalent of latitude (-90° to +90°)
  • Apparent Magnitude (mag): Brightness as seen from Earth (lower = brighter)
  • Color: Actual star color based on spectral class

Coordinate System

Celestial Sphere Projection:

  • The night sky is mapped using an equirectangular projection (like a flat map of Earth)
  • Right Ascension (RA) maps to horizontal position (0° = left edge, 360° = right edge)
  • Declination (Dec) maps to vertical position (-90° = bottom, +90° = top)

Formula:

horizontal_position = (RA / 360) × 100%
vertical_position = ((90 - Dec) / 180) × 100%

Observer Position

The stars are displayed as viewed from Earth's equator (latitude 0°) looking at the entire celestial sphere.

This means:

  • The North Celestial Pole (Polaris region) is near the top
  • The South Celestial Pole is near the bottom
  • The Celestial Equator runs horizontally through the middle
  • You're seeing a "flattened" view of the entire night sky at once

Note: In reality, you would only see half the sky at any given time (the hemisphere above the horizon). This display shows the full 360° celestial sphere wrapped around as if you could see through the Earth.

Star Properties

Size:

  • Calculated from apparent magnitude
  • Brighter stars (lower magnitude) appear larger
  • Formula: size = max(1.5px, 5 - magnitude × 0.8)
  • Sirius (mag -1.46) appears much larger than dim stars (mag 2+)

Color:

  • Based on actual star spectral classes
  • Blue/Aquamarine: Hot young stars (Rigel, Vega, Sirius)
  • White/Sapphire: Medium temperature stars (Spica, Regulus)
  • Yellow/Topaz: Sun-like stars (Capella, Polaris)
  • Red/Ruby: Cool giant stars (Betelgeuse, Antares, Aldebaran)

Depth Layers:

  • Stars are assigned to 3 parallax layers based on brightness
  • Layer 3 (foreground): magnitude < 1 (brightest stars)
  • Layer 2 (middle): magnitude 1-2
  • Layer 1 (background): magnitude > 2
  • Creates depth effect when scrolling

Visual Effects:

  • Each star has a glowing box-shadow matching its color
  • Twinkle animation with varying speeds
  • Stars fade between 80-100% opacity for realistic twinkling
  • Hover over any star to see its name!

Fallback System

If the stars.json file fails to load:

  • System automatically falls back to 300 randomly generated stars
  • Random positions, colors, and sizes
  • Ensures the visual effect always works
  • Check browser console to see which mode is active

Famous Stars You Can Find

Brightest Stars:

  • Sirius (top-left area) - Brightest star in the sky, blue-white
  • Canopus (lower-left) - Second brightest, yellow-white
  • Arcturus (middle-right) - Orange giant, fourth brightest
  • Vega (right side) - Bright blue star in summer skies

Navigation Stars:

  • Polaris (near top) - The North Star
  • Betelgeuse (left-middle) - Red supergiant in Orion
  • Rigel (left-middle) - Blue supergiant, Orion's brightest

Southern Hemisphere:

  • Acrux (lower-right) - Brightest star in the Southern Cross
  • Achernar (lower-left) - End of the river Eridanus

Technical Details

Rendering:

  • Asynchronous loading via fetch('stars.json')
  • Creates DOM elements dynamically
  • Uses CSS transforms for parallax scrolling
  • Hardware-accelerated animations

Performance:

  • Only 54 star elements (vs 300 random)
  • CSS-only animations (no JavaScript animation loops)
  • Efficient parallax using RequestAnimationFrame with throttling

Compatibility:

  • Works in all modern browsers
  • Graceful fallback for older browsers
  • Mobile-friendly (parallax disabled for performance)

Data Sources

Star data compiled from:

  • Hipparcos Catalog (ESA)
  • Yale Bright Star Catalog
  • Generally accepted astronomical databases

All coordinates, magnitudes, and spectral data are astronomically accurate as of epoch J2000.0.

Future Enhancements

Possible improvements:

  • Time-based star rotation (show different seasons)
  • Location-based star visibility (your local sky)
  • Constellation line overlays
  • Real-time star positions accounting for Earth's rotation
  • More stars (currently limited to brightest 54)
  • Star labels that appear on hover with more info

"Look up at the stars and not down at your feet. Try to make sense of what you see, and wonder about what makes the universe exist. Be curious." - Stephen Hawking