Data Art (3/3) – Information, interprétation, représentation

Dans cette troisième partie, je présente tous les éléments pour réaliser du Weather Art. Le code source est téléchargeable à la fin de l’article. Le résultat est visible en ligne.

1/ Information : obtenir des informations météorologiques en temps réel.

Il existe de nombreux services fournissant des informations à jour via des API gratuites. Wikipedia en dresse une liste (très) partielle. Pour cette première expérience, je me suis appuyé sur l’API d’Open Weather Map,simple et gratuite. Les données sont riches et il est même possible d’accéder à des informations de pollution (CO, O3, SO2, NO2).

Open Weather Map impose de s’inscrire pour obtenir une clef. Ensuite, l’appel à une URL comme celle qui suit suffit à faire une requête pour la météo à Paris.

http://api.openweathermap.org/data/2.5/weather?q=Paris,FR&APPID={code API ici}

Les données sont obtenues par un appel à une URL et un JSON est retourné immédiatement. Des exemples parlants sont proposés dans la documentation. Le résultat est très immédiatement parlant. Voici un exemple à Paris :

{
  "coord":
     {"lon":2.35,"lat":48.85},
  "weather":[
     {"id":800,"main":"Clear","description":"clear sky","icon":"01d"}
   ], 
   "base":"stations",
   "main":
     {"temp":279.81,"pressure":1006,"humidity":70,
     "temp_min":279.15,"temp_max":280.15},
   "visibility":10000,
   "wind":{"speed":2.6,"deg":160},
   "clouds":{"all":0},
   "dt":1488524400,
   "sys":
     {"type":1,
     "id":5615,
     "message":0.0104,
     "country":"FR",
     "sunrise":1488522466,"sunset":1488562671
   },
   "id":2988507,
   "name":"Paris",
   "cod":200
}

2/ Représentation

J’aime beaucoup les formes générées grâce à du bruit Perlin. Des nombreux exemples « classiques » en design génératif utilisent cette fonction mathématique, pour produire des espaces 2D ou 3D plutôt naturels.

Voici deux exemples tirés du site http://genekogan.com/code/p5js-perlin-noise/

L’idée est de faire se déplacer des particules sur un espace 2D réalisé en bruit Perlin. Voici ce que l’on peut obtenir (exemple également tiré du site de genekogan) après quelques secondes de déplacement des particules. Le résultat est juste beau !

Daniel Schiffman, dans son émission Youtube « the coding train » explique tout ce qu’il est bon de savoir sur le principe d’utiliser des centaines de particules se déplaçant dans un champ Perlin.

3/ Interprétation

Revenons au schéma précédent, mis à jour avec les éléments connus.

Je vous propose quelques règles simples de transformation des données en particules :

• La température => la couleur, températures chaudes = couleurs chaudes, températures basses = couleurs froides.
• L’humidité => lorsque l’humidité augmente, la trainée des particule se réduit, comme si l’eau lavait le dessin.
• la pression atmosphérique => la dynamique globale, une pression faible entrainant plus de facilité dans les mouvements, dans les angles de rotation.
• Le vent => les particules sont influencées par le vent, en direction et en vitesse.
• La pollution => la taille des particules augmente avec la pollution. De plus, le fond rougeoie.

Voici ce que l’on obtient sur la base de ces principes. Les informations nécessaires à la production de chaque image sont en haut à gauche.

Vous pouvez télécharger le code P5.js complet.

Pour la suite, je crois que je vais me lancer dans la réalisation d’une sculpture en 3D. Pour se mettre l’eau à la bouche, de nombreux exemples ici : http://dataphys.org/list/tag/3d-printing/

Autres parties de cet article :

• Data Art (partie 1/3) : Open Data + Design Génératif
• Data Art (2/3) – De la data visualization au data art

Mais aussi :

• Mes autres articles sur le design génératif