For this project, I wanted to create a monotone landscape illustration that dynamically represents the solar system based on the user’s time, date, and location. What started as a simple static illustration quickly evolved into an interactive experience where the sky changes color according to the time of day, planets position themselves accurately in the sky, and a parallax landscape reacts to mouse movement. I struggled soooo much, because I’m not an Astro-physician and I suck at maths…
The Challenge
Combining precise astronomical calculations with elegant visual rendering required solving several technical challenges:
- Calculate the exact positions of solar system planets in real-time
- Convert astronomical coordinates (azimuth, altitude) to canvas positions
- Handle Moon and Sun phases visually
- Animate color transitions based on the time of day
- Create a smooth parallax effect for the landscape based on mouse position
- Make stars visible only during nighttime hours
- Make SVG layers repeat horizontally to cover the entire viewport (I even had to use the
<<=operator!)
The Solution
I used the Astronomy Engine package for all astronomical calculations, which allowed me to focus on visual rendering and user experience. The project is built with vanilla JavaScript, SCSS, and PHP.
Astronomical Rendering
The system calculates in real-time the positions of all visible celestial bodies:
- The Sun: position, phases from sunrise to sunset
- The Moon: position, lunar phases with precise visual rendering
- The planets: Mercury, Venus, Mars, Jupiter, Saturn, Uranus, Neptune
- The stars: star catalog with magnitudes for realistic rendering
Each celestial body is positioned using equatorial coordinates converted to horizontal coordinates (azimuth and altitude), then projected onto the canvas taking into account the horizon and view orientation.
Parallax Landscape
The landscape is composed of 10 distinct SVG layers (clouds, mountains, trees, field, grass, house) that create a depth effect. Each layer moves at a different speed based on mouse position, creating an immersive parallax effect. The layers are dynamically generated in SVG and colored according to the color palette corresponding to the time of day.
Dynamic Color System
The project defines several color states corresponding to different times of day:
- Nadir (midnight): dark palette with deep blues
- Night end: transition to lighter tones
- Nautical dawn: first rays of sun with pinks and oranges
- Civil dawn: morning light
- Sunrise: explosion of warm colors
- Noon: bright daylight
- Sunset: return to warm colors
- Civil twilight: transition to night
- Nautical twilight: deep blues of night
Transitions between these states are handled by linear interpolation (lerp) of RGB values, creating smooth transitions throughout the day.
Interactive Configuration
- Change the displayed time (now, noon, midnight)
- Show or hide celestial body names
- Enable/disable star display
- Enable/disable landscape
- Display elements below the horizon
- Show the horizon line
- Control individual display of each planet
Technical Stack
- Astronomy Engine: precise astronomical calculations
- Canvas API: 2D rendering for celestial bodies and landscape
- SVG: dynamic generation of landscape layers
- Vanilla JavaScript: no framework, optimal performance
- SCSS: maintainable styles with variables and mixins
- PHP: simple server for initial rendering (because I like PHP)
Key Features
Precise Astronomical Calculations
The system uses the Astronomy Engine API to calculate the exact positions of celestial bodies. Each planet is positioned based on its real position in the sky at a given moment, taking into account the observer’s latitude and longitude. Well I try to be the most precise about It, It’s not like I can look at It and say, yeah that’s accurate based on the location…
Phase Rendering
The Moon and Sun display their correct phases. For the Moon, the system calculates the phase angle and visually renders the illuminated portion. The Sun shows its different phases at sunrise and sunset.
Horizon Management
Celestial bodies below the horizon can be hidden or displayed according to configuration. The horizon line is calculated dynamically based on window dimensions.
Responsive Design
The interface adapts to all screen sizes. Parallax is disabled on mobile for better performance, and canvas dimensions are calculated dynamically.
The Result
Scenery is now an interactive experience that combines visual beauty and astronomical precision. The monotone landscape evolves throughout the day, planets move across the sky according to their real position, and the parallax effect adds an immersive dimension to the experience.
The project demonstrates how complex scientific calculations can be integrated into an elegant and interactive web experience. By using Astronomy Engine for calculations and Canvas API for rendering, I was able to create an accurate visualization of the solar system that remains performant and enjoyable to use.
Check out the site here or view the source code on GitHub.