3D Rotating Starfield with Constellations (Light Mode)

An interactive 3D starfield animation built with HTML5 Canvas and vanilla JavaScript. Features a rotating perspective view with colorful stars moving through 3D space in a light cosmic environment, enhanced with constellation-like lines connecting nearby stars.

Features

• Light Mode: Features a bright space background with colorful stars
• 3D Perspective: Stars move through 3D space with realistic depth perception
• Rotation Effect: The entire starfield slowly rotates around the center
• Colorful Stars: Each star has a vibrant hue generated using HSL colors
• Glow Effects: Stars have luminous glow effects for an ethereal appearance
• Constellation Lines: Nearby stars are connected with subtle lines creating a constellation effect
• Responsive Design: Automatically adjusts to window size changes
• Smooth Animation: Uses requestAnimationFrame for optimal performance
• Efficient Rendering: Spatial grid optimization for line drawing

How It Works

• 800 stars are generated with random positions, colors, sizes, and speeds
• Each star exists in 3D space (x, y, z coordinates)
• Stars rotate around the center using trigonometric functions
• Perspective projection creates the illusion of depth
• Stars that move off-screen are recycled to the back of the scene
• Constellation lines are drawn between stars within a certain distance
• Spatial grid optimization ensures efficient line drawing

New Constellation Feature

• Dynamic Connections: Lines appear between stars that are close to each other
• Subtle Appearance: Light gray lines with transparency create a delicate constellation effect
• Performance Optimized: Uses a spatial grid to efficiently find nearby stars
• Depth Integration: Lines respect the 3D perspective and rotation of the starfield

Usage

Simply open index.html in a web browser. The animation starts automatically and fills the entire viewport.

Customization

You can adjust various parameters in constants.js:

• NUM_STARS: Number of stars (default: 800)
• MIN_STAR_SIZE / MAX_STAR_SIZE: Star size range
• MIN_SPEED / MAX_SPEED: Star movement speed range
• PERSPECTIVE_FACTOR: Controls depth effect intensity
• ROTATION_SPEED: How fast the starfield rotates
• BG_COLOR: Background color (light space theme)
• SIZE_DISTRIBUTION: Array with size distribution probabilities
• LINE_DISTANCE: Maximum distance to connect stars with lines
• LINE_COLOR: Color and transparency of constellation lines

Files

• index.html: Main HTML structure
• index.js: Animation controller
• renderer.js: Canvas rendering logic with constellation lines
• star.js: Star generation and properties
• constants.js: Configuration parameters
• styles.css: Basic styling for full-screen display