This project is an interactive 2D simulation of our Solar System. Unlike standard CSS-only animations, this version uses JavaScript and Trigonometry to calculate orbital paths in real-time. It features the Sun, eight planets, and the Moon, all rendered with dynamic Z-indexing to simulate depth as they pass behind or in front of the Sun.
- Mathematical Orbits: Utilizes Sine and Cosine functions to map planetary coordinates.
- Interactive Tilt: Includes a "Scale Handler" that allows users to click and drag to change the vertical perspective (inclination) of the orbital plane.
- Dynamic Depth: Implements real-time
z-indexswitching, so planets visually pass behind the Sun during the upper half of their orbit. - Control System: Integrated Start/Stop functionality to pause the simulation.
- Visual Shadows: Each planet features a CSS-driven light and shadow layer that rotates to maintain consistent lighting relative to the Sun.
- HTML5: Structure and semantic layout.
- CSS3: Space-themed aesthetics, planet textures (via Cloudinary), and lighting effects.
- JavaScript (ES6): Core engine for orbital physics and logic.
- jQuery: Used for efficient DOM manipulation and event handling.
- Clone the repository:
git clone https://github.com/Mayank-Garg7/SolarSystem.git
- Navigate to the folder:
cd SolarSystem
- Launch:
Open
index.htmlin any modern web browser.
Controls:
- Start/Stop Buttons: Use the controls at the bottom right to toggle motion.
- Click & Drag: Drag your mouse vertically anywhere on the screen to change the "tilt" of the solar system.
The simulation uses a relative speed constant (
-
Earth:
$29.78 / n$ -
Mercury:
$47.87 / n$ (Fastest) -
Neptune:
$5.43 / n$ (Slowest)
- Author: Mayank Garg
- Resources: Cloudinary for planet assets, jQuery for event management.