Pour ce projet, j’ai voulu créer une illustration de paysage monotone qui représente dynamiquement le système solaire en fonction de l’heure, de la date et de la localisation de l’utilisateur. Ce qui a commencé comme une simple illustration statique a rapidement évolué en une expérience interactive où le ciel change de couleur selon l’heure de la journée, où les planètes se positionnent avec précision dans le ciel, et où un paysage en parallaxe réagit au mouvement de la souris. J’ai vraiment beaucoup galéré, parce que je ne suis pas astrophysicien et je suis nul en maths…
Le Défi
Combiner des calculs astronomiques précis avec un rendu visuel élégant nécessitait de résoudre plusieurs défis techniques :
- Calculer les positions exactes des planètes du système solaire en temps réel
- Convertir les coordonnées astronomiques (azimut, altitude) en positions sur un canvas
- Gérer les phases de la Lune et du Soleil de manière visuelle
- Animer les transitions de couleurs en fonction de l’heure de la journée
- Créer un effet de parallaxe fluide pour le paysage basé sur la position de la souris
- Rendre les étoiles visibles uniquement pendant les heures nocturnes
- Faire répéter les couches SVG horizontalement pour couvrir tout le viewport (j’ai même dû utiliser l’opérateur
<<=!)
La Solution
J’ai utilisé le package Astronomy Engine pour tous les calculs astronomiques, ce qui m’a permis de me concentrer sur le rendu visuel et l’expérience utilisateur. Le projet est construit avec du JavaScript vanilla, du SCSS et du PHP.
Rendu Astronomique
Le système calcule en temps réel les positions de tous les corps célestes visibles :
- Le Soleil : position, phases du lever au coucher
- La Lune : position, phases lunaires avec rendu visuel précis
- Les planètes : Mercure, Vénus, Mars, Jupiter, Saturne, Uranus, Neptune
- Les étoiles : catalogue d’étoiles avec magnitudes pour un rendu réaliste
Chaque corps céleste est positionné en utilisant les coordonnées équatoriales converties en coordonnées horizontales (azimut et altitude), puis projetées sur le canvas en tenant compte de l’horizon et de l’orientation de la vue.
Paysage en Parallaxe
Le paysage est composé de 10 couches SVG distinctes (nuages, montagnes, arbres, champ, herbe, maison) qui créent un effet de profondeur. Chaque couche se déplace à une vitesse différente en fonction de la position de la souris, créant un effet de parallaxe immersif. Les couches sont générées dynamiquement en SVG et colorisées selon la palette de couleurs correspondant à l’heure de la journée.
Système de Couleurs Dynamique
Le projet définit plusieurs états de couleur correspondant aux différents moments de la journée :
- Nadir (minuit) : palette sombre avec des bleus profonds
- Fin de nuit : transition vers des tons plus clairs
- Aube nautique : premiers rayons du soleil avec des roses et des oranges
- Aube civile : lumière du matin
- Lever du soleil : explosion de couleurs chaudes
- Midi : lumière du jour éclatante
- Coucher du soleil : retour aux couleurs chaudes
- Crépuscule civil : transition vers la nuit
- Crépuscule nautique : bleus profonds de la nuit
Les transitions entre ces états sont gérées par interpolation linéaire (lerp) des valeurs RGB, créant des transitions fluides tout au long de la journée.
Configuration Interactive
- Changer l’heure affichée (maintenant, midi, minuit)
- Afficher ou masquer les noms des corps célestes
- Activer/désactiver l’affichage des étoiles
- Activer/désactiver le paysage
- Afficher les éléments en dessous de l’horizon
- Afficher la ligne d’horizon
- Contrôler l’affichage individuel de chaque planète
Stack Technique
- Astronomy Engine : calculs astronomiques précis
- Canvas API : rendu 2D pour les corps célestes et le paysage
- SVG : génération dynamique des couches du paysage
- JavaScript vanilla : pas de framework, performance optimale
- SCSS : styles maintenables avec variables et mixins
- PHP : serveur simple pour le rendu initial (parce que j’aime PHP)
Fonctionnalités Clés
Calculs Astronomiques Précis
Le système utilise l’API Astronomy Engine pour calculer les positions exactes des corps célestes. Chaque planète est positionnée en fonction de sa position réelle dans le ciel à un moment donné, en tenant compte de la latitude et de la longitude de l’observateur. Bon, j’essaie d’être le plus précis possible, c’est pas comme si je pouvais regarder et dire, ouais c’est précis par rapport à la localisation…
Rendu des Phases
La Lune et le Soleil affichent leurs phases correctes. Pour la Lune, le système calcule l’angle de phase et rend visuellement la portion éclairée. Le Soleil montre ses différentes phases au lever et au coucher.
Gestion de l’Horizon
Les corps célestes en dessous de l’horizon peuvent être masqués ou affichés selon la configuration. La ligne d’horizon est calculée dynamiquement en fonction des dimensions de la fenêtre.
Design Responsive
L’interface s’adapte à toutes les tailles d’écran. Le parallaxe est désactivé sur mobile pour une meilleure performance, et les dimensions du canvas sont calculées dynamiquement.
Le Résultat
Scenery est maintenant une expérience interactive qui combine beauté visuelle et précision astronomique. Le paysage monotone évolue tout au long de la journée, les planètes se déplacent dans le ciel selon leur position réelle, et l’effet de parallaxe ajoute une dimension immersive à l’expérience.
Le projet démontre comment des calculs scientifiques complexes peuvent être intégrés dans une expérience web élégante et interactive. En utilisant l’Astronomy Engine pour les calculs et le Canvas API pour le rendu, j’ai pu créer une visualisation précise du système solaire qui reste performante et agréable à utiliser.
Découvrez le site ici ou consultez le code source sur GitHub.