Jean-Pascal M.

La meilleure façon de ne pas avancer est de suivre une idée fixe (J. Prévert)

Archive for mai 2017

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

Posted by Jean-Pascal sur 14 mai 2017

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.

DataArt3

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.

WA1WA2WA3WA4WA5WA7WA6

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 :

Mais aussi :

 

Publicités

Posted in Design Génératif | 3 Comments »

Data Art (2/3) – De la data visualization au data art

Posted by Jean-Pascal sur 5 mai 2017

 

WA3Cliquez sur l’image pour voir la météo à Paris

« Data is the new soil » – David McCandless

Je suis convaincu de l’utilité de mettre en forme, de façon esthétique, une grande quantité de données, telle qu’on peut le voir en datavisualisation. On trouve facilement des argumentations détaillées comme celle de Hans Rosling dans son Ted « The best stats you’ve ever seen« . Hans Rosling présente des outils de visualisations qui permettent de comprendre le monde (mieux que ne le feraient des singes !), grâce à la mise en relation de nombreuses sources de données, pour l’ONU.

La logique de la dataviz est simple : à partir d’informations, un algorithme propose une interprétation de ces données brutes pour les rendre signifiantes du point de vue de l’analyste. Ensuite, un second algorithme produit une mise en forme imagée qui vise à rendre les données plus simples à comprendre, à appréhender, à comparer, à qualifier, pour un public donné.

DataArt1

La DataViz et le Data Art suivent le principe du schéma ci-dessus, mais leurs objectifs diffèrent. Le premier vise à rendre intelligible, quantitativement et qualitativement, l’information, de manière à objectiver l’information pertinente. A contrario, le second recherche le plaisir de la mise en scène, quitte à déformer l’information, à la subjectiver, à l’esthétiser, de manière assumée, de façon personnelle.

Dans l’exemple qui suit, j’ai choisi d’exploiter des informations fournies en temps réel, telles que des données météorologiques. Ces données météorologiques seront mises en scène sous des formes originales , toujours en mouvement.

DataArt2

Si l’on se concentre sur le point de départ et celui d’arrivée, voici ce que je voudrais faire. Passer de données temps réel fournies par un service en ligne à un dessin 2D :

DataArt4

Je me suis imposé plusieurs objectifs pour ce projet :

  • travailler avec des informations live.
  • créer des animations en évolution constante.
  • pouvoir diffuser facilement le résultat.
  • obtenir un résultat rapidement, sans y consacrer tout mon temps libre !

Initialement, je voulais le faire avec Blender, en utilisant des scripts Python, mais ne je voyais pas comment diffuser le résultat en temps réel. Heureusement, il existe une version de Processing pouvant être exécutée dans nos bons vieux navigateurs web : P5.js ! 

Les exemples de réalisation en P5.js sont très convaincants. Le code est toujours court, et la pédagogie qui accompagne Processing et P5.js est fantastique. Merci au contributeurs, et à ceux qui inspirent comme Daniel Schiffman !

Pour conclure, dans la catégorie de la plateforme technique de data art la plus simple, les gagnants sont P5.js et JSON. Bravo.

La suite dans un prochain article !

Pour aller plus loin :

 

Posted in Design Génératif | 3 Comments »