[Contribution] Créez une carte isobarre en Javascript

[Comode]

Bonjour,

J'avais déjà publié ici il y a quelques temps un algorithme en PHP permettant de créer des courbes de niveau. Le principal problème de l'algo était qu'il était compliqué à réutiliser pour les moins expérimentés en programmation et était un gouffre en ressources pour le serveur.

Je vous propose donc aujourd'hui sa ré implémentation en Javascript.

Le fait de l'avoir reprogrammé en javascript apporte de nouveaux avantages, mais aussi de nouveaux inconvénients :

AVANTAGES :

- Libération d'une quantité monstrueuse de ressources au niveau serveur

- Possibilité de créer les cartes à la demande sans surcharge du serveur

- facilité d'implémentation sur un site existant

- Peut être implémenté sans distinction sur un serveur PHP, ASP (beurk) ou tout autre technologie serveur tel que le PERL ou le Python

INCONVENIENTS :

- Consommation de ressource importante chez le client

- Nécessite d'utiliser un navigateur compatible avec la technologie HTML5 ou Canvas (Opera, FireFox, Safari et bientôt IE8).

Alors nottez qu'il ne s'agit que d'une première version et qu'il y a bien d'autre choses qui pourront être implémentés par la suite. Parmis les amélioration auxquels je pense, il y a l'utilisation de courbes de Bésier plutot que de lignes ordinaires, mais j'ai peur que l'algo commence a devenir franchement gourmand...

Mais revenons en a ce qui existe déjà...

Voici un tout petit exemple de ce qui peut être fait. L'exemple ci-dessous utilise une toute petite grille de 12*12 avec 8 niveaux de courbes et sans carte de fond. Ca ne représente rien de concret, c'est juste le résultat obtenu a partir d'une grille aléatoire (celle que vous trouverez en exemple dans le code source fourni).

L'alogorithme en question s'appel "Marching Square". C'est un algo originellement utilisé pour le rendu d'images 3D façon dessins-animés.

La version actuelle utilise une nouveauté proposée par les navigateurs web recents : les Canvas. Le Canvas est une zone de dessin vectoriel HTML dans laquelle on travaille en Javascript. Grace a ce nouvel outil, il est possible de réellement dessiner dans une page web. L'algo proposé pourra donc être réutilisé et collé avec transparence sur des fonds de carte, et vous pouvez même imaginez un système façon GoogleEarth pour naviguer sur vos cartes météo (j'y travail /emoticons/tongue@2x.png 2x" width="20" height="20"> ). Ne vous arretez donc pas a l'aspect un peu trop sobre de ce que je vous montre ici /emoticons/wink@2x.png 2x" width="20" height="20">

En attendant, l'algo est fait pour interpréter directement les sorties de modèles du GFS (ou autre)...

Tout ce que vous avez a faire, c'est initialiser (a l'aide de votre langage serveur favoris) le tableau nomé "t" avec les valeurs que vous avez extraites de votre fichier GRIB, lui donner les niveaux de séparations entre les courbes, les couelurs en fonction des niveaux et le tour est joué.

Le code en question :

Il y a la 2 implémentations différentes : la version en fil de fer (désactivée car mise en commentaire) et la version coloriée. Curieusement, la version coloriés est bien plus rapide. Surement quelques optimisation a voir avec le stroke().

Si vous voulez tester, rien de plus simple ! copier/coller le code suivant dans un fichier HTML entre les balises Body et double cliquez sur votre fichier. Pour tester le comportement de l'appli, vous pouvez modifier les valeurs du tableau t (la ou y'a ecrit "//ceci est une grille de test").

Voilà, j'espère que ce petit extrait de code pourra rendre service a ceux qui veulent fabriquer leurs propres petites cartes à base d'isobarres sur leur site sans entrer dans une ingénérie monstrueuse.

Le code est évidemment totalement libre de droit, mais il est toujours appréciable si vous le modifiez (en mieux) de nous faire part de vos modifications.

Vos commentaires sont bienvenus (même les critiques).

EDIT : Ajout de la balise fermante a la fin du code sans laquelle le copier/coller ne marcherai pas ^^