Un service qui affiche le ciel actuel avec un dégradé CSS depuis votre position approximative

• Le service estime la position actuelle de l’utilisateur à partir de son adresse IP.
• Il visualise la couleur du ciel et l’ambiance correspondante sous forme de dégradé CSS.
• Aucun besoin de carte ou de saisie complexe : le résultat est visible immédiatement en accédant simplement au site web.
• L’interface est simple et légère, donc facile d’accès pour tout le monde.
• Les vraies données météo ne sont pas prises en compte ; la couleur est déterminée principalement à partir du fuseau horaire local et de la position du soleil.

---

Aperçu du service

• Lorsqu’un utilisateur se connecte, ce service web estime sa position approximative (latitude et longitude) via l’adresse IP.
• À l’aide de la position estimée et de l’heure locale, il calcule la palette du ciel selon la position du soleil et le fuseau horaire.
• Les couleurs du ciel calculées sont rendues en arrière-plan du site au format dégradé CSS afin de montrer en temps réel l’ambiance du ciel.
• Sans aucune saisie de données supplémentaire, il s’active automatiquement dès l’accès au site.

Fonctionnalités et caractéristiques

• Aucune étape complexe comme une carte, une API météo ou la création d’un compte n’est nécessaire.
• Visualisation en temps réel : la couleur du ciel change dynamiquement selon la variation du fuseau horaire du lieu actuel.
• Implémenté uniquement avec des dégradés CSS, il offre une expérience utilisateur très rapide et légère.
• Il ne prend pas en compte les données de conditions météorologiques dangereuses, les nuages ou les précipitations ; il applique par défaut un algorithme centré sur l’angle du soleil et l’heure.

Objectifs et intérêt

• Il s’agit d’un outil d’information visuelle simple, sans la complexité d’une application météo ou d’un service de carte.
• Il a un fort potentiel d’usage comme œuvre d’art web ou projet de démo personnel.
• En fournissant automatiquement des repères visuels localisés, il est bien adapté pour répondre rapidement à la question : « À quoi ressemble le ciel ici en ce moment ? »

[GN⁺]

Commentaires Hacker News

• Au début de ma carrière, quand je développais un logiciel de navigation 3D turn-by-turn, je me souviens d'avoir eu la charge du rendu du ciel.

  • Mon supérieur m’a dit que cela pouvait se réduire à un carré bleu le jour et gris foncé la nuit, mais je voulais vraiment reproduire un vrai ciel qui évolue selon l’environnement, la latitude, la longitude et l’heure. Je me suis donc appuyé sur l’article Preetham[lien] pour implémenter un modèle réaliste du ciel.

  • Les constellations étaient basées sur une table astronomique en dur, et la performance était plutôt correcte.

  • Mais en management, l’horizon légèrement laiteux et jaunâtre, ainsi que les autres effets réalistes, les ont laissé perplexes. Ils ont refusé mon travail en disant que « le ciel des concurrents est bleu », et ma réponse « regardez dehors » n’a été entendue du tout.

  • Finalement, j’ai tout supprimé et laissé un simple carré bleu.

  • C’est grâce à cette expérience que je trouve ce type de site vraiment impressionnant.

  • C’est pour cela que j’ai compris l’importance des spécifications et du design.

    • Les conventions immédiatement compréhensibles sont importantes, et trop de détails visuels ne font souvent qu’ajouter de la confusion.
    • Si le ciel n’est pas bleu mais apparaît flou ou blanchâtre, on peut se demander s’il s’agit d’un ciel ou d’une page encore en chargement. Il en va de même pour les étoiles : la nuit, elles n’ont pas d’objectif fonctionnel.
    • Ces effets réalistes conviennent aux vues planétaires réelles comme Google Earth. Quand on les implémente, c’est amusant, mais pour une vue de navigation, la simplicité et la clarté restent primordiales. La praticité prime sur le réalisme.

  • J’ai entendu qu’un ancien collègue avait passé énormément de temps à implémenter physiquement un système d’étoiles dans le jeu Cobalt[lien].

    • Si cela pose un problème d’utilisabilité, on peut retirer ce type d’élément à la fin, mais je pense que ces petits détails, une fois cumulés, augmentent la qualité du résultat et donnent aux utilisateurs l’envie d’explorer davantage.

  • Dans ces cas, la programmation est parfois plus ennuyeuse lorsqu’elle devient un métier qu’un loisir.

    • Parfois, il y a une chance d’en faire au travail, mais en général cela ne passe que si une étude montre que, par exemple, « un ciel réaliste augmente les indicateurs OKR de 0,1 % ».
    • Mais il existe toujours des niches où l’on peut s’amuser, ce qui explique pourquoi l’industrie du jeu est à bas salaire et à forte intensité de travail malgré la passion qu’elle suscite.

  • La manière dont les managers ignorent la créativité des innovateurs est un exemple typique de gestion absurde.

  • Je me suis demandé pourquoi ne pas l’ajouter au moins en easter egg.

    • J’aurais aimé que, en disant que les tableaux de Vincent Van Gogh reprenaient précisément les positions réelles des constellations, on ait plaidé que cette inspiration servait de défi pour reproduire des couleurs de ciel réalistes.

• Nous lançons un capteur à installer à l’intérieur d’une fenêtre. Ce capteur mesure la couleur du ciel sur un petit angle de cône et envoie le résultat vers un skylight et des luminaires intérieurs pour reproduire à l’intérieur la même lumière de ciel[innerscene.com].

  • Une implémentation via moniteur d’ordinateur est possible, mais utiliser un éclairage RGB au lieu d’un spectre complet limite l’uniformité de la lumière intérieure.
  • En outre, une faiblesse actuelle du code est que des variables comme nuages, brouillard, fumée ne sont pas prises en compte, ce qui peut dévier du paysage extérieur (soulevé par de nombreux commentaires HN).
  • L’image satellite en temps réel peut compenser partiellement, mais comme l’exactitude absolue est difficile, nous avons finalement développé nos propres capteurs.
  • Le marché propose déjà plusieurs capteurs CCT, mais ceux-ci mesurent généralement uniquement direction + diffusion + lumière réfléchie, avec une limite d’environ 7500K, alors que le ciel réel peut varier jusqu’à 40 000K.
  • Nous avons partagé une image de la courbe montrant comment la couleur du ciel change selon l’heure à partir de mesures de notre capteur réel[image] et des informations supplémentaires[lien].

• La remarque sur la balise HTML meta http-equiv="Refresh" m’a fait sourire.

  • Avant, lorsque le rafraîchissement automatique d’une page était nécessaire, il n’y avait pas d’autre solution.

  • J’ai eu l’impression que ce projet était une excellente vitrine du formalisme minimaliste.

  • En réalité, la signification de « http-equiv » est la même qu’un en-tête HTTP, et envoyer l’en-tête « Refresh: 60 » a le même effet.

  • Vous seriez encore plus surpris si vous découvriez la fonction frameset.

  • Merci quand même ! Et désolé, mais à ma naissance, setTimeout(() => location.reload(), ...) était déjà largement utilisé.

• Comme développeur old-school qui ne suit pas les toutes dernières technologies web, je suis curieux de comprendre le principe de fonctionnement du code suivant avec la combinaison astro/cloudflare/wrangler.

  • const { latitude = "0", longitude = "0" } = Astro.locals.runtime.cf || {};

  • On dirait que la fonction cloudflare est encapsulée dans astro pour fournir latitude et longitude, et j’aimerais savoir quel traitement interne existe.

  • J’ai consulté la documentation, mais je n’ai pas trouvé de réponse claire, merci de détailler.

  • Le fait qu’aucun traitement interne ne soit visible vient du fait que cela fonctionne effectivement comme une magie.

    • Astro propose des adaptateurs plug-and-play pour de nombreux runtime serveurs comme Vercel, Cloudflare et Netlify.
    • L’adaptateur Cloudflare expose diverses liaisons dans Astro.locals.runtime, parmi lesquelles la liaison cf inclut latitude, longitude et d’autres nombreuses valeurs de requête[lien1, lien2]
    • Certaines liaisons sont mockées localement quand l’environnement n’est pas Cloudflare-Worker.

  • Cloudflare permet d’activer une fonctionnalité qui ajoute automatiquement latitude/longitude de l’utilisateur (de manière approximative via IP ou autre) aux en-têtes HTTP[lien]

    • « Cette transformation gérée ajoute aux en-têtes de la requête HTTP les informations de ville, pays, continent, latitude et longitude du visiteur. »

• J’ai ouvert le site et attendu 20 secondes pour voir « quand ça change », puis je me suis soudain rendu compte qu’il était minuit.

  • La nuit, on obtient juste un écran noir, et j’ai pensé qu’il aurait fallu que quelqu’un de plus astucieux en rajoute un peu plus.

• Je suis l’auteur de SunCalc. Voir mon code utilisé pour de tels cas me rend sincèrement heureux.

  • Au passage, suncalc.net renvoie une erreur car le jeton Google Maps API a expiré[suncalc.net]

    • Tu as l’air de bien connaître la tech des cartes, alors je te suggère, à titre de petite suggestion, d’envisager une migration vers Protomaps[lien].

  • Auteur ? contributeur ? Quoi qu’il en soit, c’est une super réalisation et ça fait plaisir à voir de telles démos.

• J’ai rafraîchi la page, activé JS, rafraîchi encore, et j’ai fini par croire que le serveur surchargé faisait planter l’affichage.

  • Après avoir lu les commentaires, j’ai compris que l’écran noir venait simplement du fait qu’il faisait nuit dehors, et qu’en réalité cela fonctionnait bien depuis le départ.

• L’implémentation est bien plus élaborée que prévu. Elle s’appuie sur un article de recherche[lien].

• J’ai vérifié en mettant mon téléphone contre la fenêtre : le résultat correspond à 100 % au ciel réel (actuellement dégagé), au point d’appeler ma femme pour lui montrer. C’est vraiment impressionnant, bravo.

• Je suis la personne qui développe ant.care[lien]; l’objectif était de synchroniser le ciel d’arrière-plan avec l’environnement réel, mais jusqu’ici il n’a été implémenté que de manière très simple.

  • J’aimerais bien appliquer cette approche un jour. Je réfléchis encore à faire l’ensemble en Rust/WASM ou à n’implémenter que le cœur en Rust et le reste en JS/HTML.