Présentation de « Orbit of Night », une horloge web parfaite pour contempler l’espace
(orbit.ggoban.com)Bonjour !
Je vous présente aujourd’hui un side project créé ce matin même avec l’IA en « vibe coding » : Orbit of Night, une magnifique horloge sur fond spatial.
À l’origine, ce n’était qu’une page parmi les fonctionnalités d’un site web en cours de création, mais je me suis dit qu’il serait dommage de la laisser simplement comme une page isolée. Je me suis donc lancé dans ce projet avec pour objectif de créer une expérience qui donne envie de s’arrêter un instant et de contempler l’espace, l’esprit ailleurs.
Principales caractéristiques
- Fond d’écran vivant : un arrière-plan animé où étoiles, nébuleuses et météores se déplacent en continu
- Suivi de l’ISS en temps réel : une orbite sinusoïdale se déplaçant de manière stable à l’écran, recalibrée à partir de données réelles de position de l’ISS
- Éléments interactifs : possibilité de cliquer sur les planètes pour les scanner virtuellement, avec en plus quelques touches ludiques comme un OVNI ou des effets de trou noir
- Paramètres utilisateur : possibilité d’activer ou désactiver des éléments comme les planètes, l’OVNI ou l’ISS selon ses préférences, avec 3 thèmes proposés
Le tout a été réalisé sans framework, uniquement avec du JavaScript pur et des animations CSS (c’est l’IA qui a implémenté tout ça, mais elle m’a aussi trouvé particulièrement exigeant pendant la relecture !). J’ai notamment conçu l’orbite de l’ISS avec une approche hybride combinant simulation stable et recalibrage en temps réel à partir des données.
TMI : l’histoire d’un quadragénaire qui s’est mis à développer avec l’IA
En réalité, je suis désormais un père de famille dans la quarantaine.
Pour me présenter brièvement : je fais partie d’une génération qui a connu les jeux en mode texte et les MUD, et je suis aussi un joueur qui aime beaucoup les jeux web.
J’ai fait des études d’informatique et je travaille bien dans l’IT, mais plutôt du côté de l’ingénierie serveur. À force, j’ai aussi appris à toucher un peu au middleware, au backend et au frontend : en somme, un salarié tout à fait ordinaire.
J’ai toutefois toujours rêvé de créer des jeux. Après avoir découvert les performances atteintes par l’IA, je me suis dit : « le moment est enfin venu ! ». Depuis octobre dernier, je consacre donc mon temps libre à ce qu’on appelle aujourd’hui le vibe coding avec l’IA.
Je travaille actuellement sur mon troisième toy project de jeu web. En créant au passage une page de fonctionnalité, j’ai eu un éclair d’inspiration et j’ai particulièrement soigné un certain écran. Puis je me suis rendu compte qu’il serait dommage de le réserver uniquement à ce projet. C’est ainsi qu’est né ce projet-ci.
Pourquoi ne pas aller y faire un tour pour vous offrir un petit moment de contemplation spatiale ?
Tous les retours sont les bienvenus !
21 commentaires
C’est un superbe projet.
Merci pour votre intérêt !
Magnifique !
Merci pour votre chaleureux soutien !
C’est vraiment parfait comme fond d’écran de navigateur ! Ça donne une sensation similaire à celle d’avoir l’espace en fond d’écran sur un iPhone.
Merci beaucoup pour votre chaleureux intérêt ! Moi, je pense l’afficher sur une vieille tablette inutilisée que j’ai à la maison, lui bricoler un cadre simple et m’en servir comme horloge, haha !
Très bien~
Je pense que ce serait encore mieux d’améliorer aussi les planètes en s’inspirant de ceci.
https://codepen.io/jamesfinn180/pen/VwzENbR
Waouh ! Il y a vraiment énormément de gens incroyables dans ce monde. Merci pour votre intérêt. Comme le rendu est basé sur la vue depuis la Terre, la Terre elle-même n’apparaît sans doute pas telle quelle, mais je vais essayer d’en faire une version améliorée en l’adaptant !
C’était vraiment apaisant et ça m’a rendu heureux.
Merci d’avoir créé une si belle œuvre. :)
Merci beaucoup pour votre réponse chaleureuseT_T ça me donne encore plus de force.
J’ai pris en compte vos retours et apporté les modifications suivantes ! 1. Les planètes ont désormais des caractéristiques fixes lors de leur génération. 2. L’option de pluie d’étoiles filantes peut être modifiée dans les paramètres selon les préférences de chacun. (fréquence, vitesse, quantité) 3. La nébuleuse, ainsi que la Voie lactée — même si cela se remarque peu — et la lumière des étoiles ont été ajustées. 4. Si l’option trou noir est désactivée, il ne fonctionne désormais plus. 5. J’ai ajouté un effet en hommage, similaire au warp de Stx Wxr. 6. Des amis un peu particuliers apparaissent parfois sur les planètes. Merci à tous pour l’intérêt que vous portez au projet !
C’est un détail, mais même quand on désactive l’effet de trou noir, il continue de fonctionner tel quel. ^^ Super projet~ !
Oui, merci beaucoup ^^ Nous prévoyons d’appliquer très bientôt une version améliorée qui prend en compte ces bugs ainsi que les avis d’autres personnes. Merci de l’intérêt que vous y portez !
Ça ressemble au design que j’avais vu autrefois sur un site Pomodoro. Pourquoi ne pas faire apparaître plusieurs planètes ?
Ah, comme quoi il n’y a vraiment rien de nouveau sous le ciel… ! Pour l’instant, je pensais n’afficher qu’une seule planète et ajouter du fun avec l’apparition d’éléments uniques au-dessus, mais je vais aussi tester une version avec plusieurs planètes. Merci.
Moi aussi, comme c’était présenté comme quelque chose à regarder en mode contemplatif, je m’attendais à quelque chose qui ressemble à de vraies photos de l’espace en longue exposition… mais au final, c’était assez différent de ce que j’espérais.
Merci beaucoup pour ce retour précieux. Nous allons aussi réfléchir à ce point avec l’IA ! haha Cela dit, le concept est de tout exprimer autant que possible via du CSS ou du SVG, donc je vais m’inspirer des photos associées !
Ce serait bien d’avoir un univers un peu plus statique et réaliste~
Nous allons l’étendre afin de permettre de choisir différents univers en plus des thèmes de couleurs. Merci pour votre précieux retour !
Merci de nous présenter un projet aussi intéressant. C’est admirable et inspirant de vous voir continuer à relever des défis sans perdre vos rêves, même avec le temps qui passe. Je pense que vos enfants vont aussi beaucoup aimer ! Si je peux me permettre quelques retours : 1) les pluies de météores tombent un peu trop vite et en trop grand nombre, ce qui rend l’expérience plus excitante que contemplative. Si elles étaient un peu plus discrètes, moins nombreuses et plus lentes, cela pourrait créer une ambiance plus apaisante et poétique. 2) Pour le scan des planètes, pourquoi ne pas faire en sorte qu’une même planète affiche toujours les mêmes informations ? 3) Dans les paramètres, l’effet « trou noir » désigne-t-il l’effet au clic ? Même en le désactivant, l’effet ne semble pas s’arrêter. 4) Je ne comprends pas très bien quelles couleurs sont modifiées par l’option Random Color dans les paramètres.
Merci pour vos retours. Pour la pluie de météores, nous envisageons une option pour ajuster la fréquence via un curseur. Le fait que les planètes affichent des informations différentes à chaque clic fait aussi partie des points à corriger T_T. Random Color est une option qui fait apparaître les planètes dans une couleur aléatoire à chaque fois. Comme les planètes elles-mêmes se déplacent lentement, pour le vérifier vous pouvez désactiver puis réactiver l’option Planet juste au-dessus, et vous verrez apparaître des planètes de couleurs différentes haha. Pour le trou noir, je voulais à l’origine ajouter un effet où les étoiles alentour et le vaisseau spatial seraient aspirés lorsqu’on clique dessus, mais ce n’était pas si simple à gérer uniquement avec le navigateur et JavaScript, donc je n’ai implémenté qu’un effet où seules des particules semblent être attirées, hélas. Le fait qu’il ne s’éteigne pas avec off est également prévu dans une prochaine correction. Merci beaucoup pour vos précieux retours !