Jean-Pascal M.

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

Posts Tagged ‘processing’

Data Art (partie 1/3) : Open Data + Design Génératif

Posted by Jean-Pascal sur 20 mars 2017

weatherart12

Exemple de météo parisienne, avec un temps qui se refroidit, pas de pollution détectée peu de vent et une pression assez basse.  

We can’t make meaning out of enormous statistics […] We need visual langage so data can be felt. – Chris Jordan.

Je présente dans cet article une réalisation simple de Data Art. Cette réalisation sera expliquée en détail dans les articles suivants (Data Art, parties 2 et 3). Le résultat (visible ici) est construit à partir de données météo obtenues en temps réel, et mises en forme automatiquement, pour produire ce qu’on pourrait appeler du « Weather Art ». L’objectif est de proposer une peinture originale dépendant des conditions climatiques et évoluant dynamiquement selon ces conditions climatiques. La peinture change selon le tracé généré par des centaines de particules dont les mouvements ressemblent à des grains de poussières flottants au gré du vent.

WA3

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

De nombreux raccourcis sont proposés :

  • Barre d’espace pour afficher les informations météo/pollution
  • touche « V » pour voir les vecteurs du champ de force
  • touches 1 à 6 pour lancer des scénarios de test
  • touches 7 à 0 pour changer les conditions de pollution.

Voici des exemples de rendus possibles :

Les particules changent de couleur ou de forme selon la température, l’humidité ou le taux de pollution aux particules fines. Le mouvement des particules dépend de la température, de l’humidité, de la pollution, de la pression atmosphérique et du vent.

Le data art, un mouvement ?

J’ai fait un tour du côté de Wikipedia sans trouver d’article sur le data art. Voici le résultat, quelque peu absurde, de cette recherche. Le noeud Data Art est isolé à droite.

Data-Art

De nombreux artistes ont déjà exploré cette voie, et j’apprécie particulièrement le travail de Nathalie Miebach dont la démarche est autant artistique qu’artisanale. Elle produit des sculptures physique à partir de mesures réalisées par ses soins !

 

D’autres exemples sont présentés par Manuel Lima qui présente les mérites de ce qu’il nomme « Networkism », un mouvement artistique mettant en forme des graphes.

Plus digital, on peut admirer le travail de Refik Anadol présentant les vents de Boston sous la form de Data Painting :

Pour aller plus loin :

Posted in Design Génératif | Tagué: , , , , , , | 2 Comments »

Cartographier Wikipedia avec Processing

Posted by Jean-Pascal sur 2 juin 2016

Dans cet article, je propose une approche originale pour aborder un nouveau domaine tel que l’Art Génératif.

Que signifie l’expression « Art Génératif » ? Faut-il s’en tenir à la définition, où avant de plonger en apnée dans ce domaine, faire un détour par les termes ou expressions proches ? Je pense par exemple à Design Génératif, Art Algorithmique, Computer Art, Infographie, Data Visualization…

Quelle méthode utiliser pour trouver la relation entre ces termes, et trouver par exemple les artistes, les méthodes ou les logiciels de référence de ce domaine ?

Hélas, le web est un océan dans lequel nous, minuscules internautes, naviguons à vue, inlassablement, toujours fasciné par son infinité.

Utilisez par exemple The Internet Map (http://internet-map.net/). Cette carte positionne les 350.000 sites les plus visités au monde en 2011. Ceux-ci sont figurés par des disques  qui s’attirent et se repoussent subtilement, comme si les URLs qui les unissent étaient des ressorts. L’exemple qui suit montre bien la cohérence des liens associés au site lemonde.fr :

The Interne Map - le monde

Mais cette carte a plusieurs défauts. L’interactivité est limitée, les liens ne sont pas montrés, les disques représentent des sites et les informations sont bien trop nombreuses !

Alors comment utiliser le web pour découvrir un domaine nouveau ? Pour ma part, le premier compagnon de toutes mes recherches est Wikipédia. A la différence du web en général, Wikipédia offre une synthèse structurée et encyclopédique des connaissances humaines. Structurée vous dites ? Oui, les pages sont reliées entre elles grâce à des liens typés, et elles sont même rangées dans des catégories assez générales !

clusterball

source Infosthetics.com  (site génial)

Heureusement, le language Processing va combler ces manques grâce à un code fourni par les auteurs de Generative Design (http://www.generative-gestaltung.de) dont j’ai parlé dans l’article précédent.

Les codes sources sont librement accessibles en ligne et nous allons utiliser un exemple fournit à la fin du livre dans le chapitre M 6.4.1 Structures de données dynamiques, placement par champ de force.

Voici une vidéo montrant le code en fonctionnement. C’est juste magique !

M_6_4_01_TOOL from Generative Design on Vimeo.

Hélas, j’ai rapidement buté sur une des limites de l’application : je souhaitais l’utiliser pour comprendre le domaine du design génératif, mais en cliquant à gauche et à droite, je n’arrivais pas à trouver les liens qui relient les termes de base entre eux. On s’y perd très vite !

Comment faire pour trouver le(s) chemin(s) le(s) plus court(s) qui les relie(nt), deux articles Wikipedia ? Comment apréhender rapidement le contexte autour d’un ou plusieurs articles ?

Comment obtenir, par exemple, à partir des termes « Infographics » et « Generative Art » le chemin suivant (il existe) :

160531_162010

Je ne voulais pas pour autant coder une heuristique de recherche de chemins, mais plutôt m’appuyer sur la représentation très visuelle offerte par le code développé par Generative Design, et sur nos capacités naturelle d’exploration.

J’ai donc apporté plusieurs modifications au code afin de pouvoir :

  1. Initialiser le graph avec plusieurs termes
  2. Demander l’ouverture de tous les nœuds du graphe d’une pression de touche (touche E : « expansion »)
  3. Demander la suppression de tous les nœuds n’ayant moins de deux liens (touche C : « Compression »)

Reprenons l’exemple des connexions entre les articles « Generative Art » et « Infographics » ?

J’ai initialisé le programme avec ces deux valeurs, en modifiant le code l.67 :

String [] startKeywords = {"Infographics", "Generative Art "};

J’ai ensuite utilisé le menu (touche “m”) et réglé le paramètre “Result Count” à 34.

J’ai ensuite demandé l’expansion du graphe : Touche « E ». On obtient un graphe à 78 noeuds.

Comme il n’y avait pas de lien commun, j’ai à nouveau pressé la touche E, puis une troisième fois. Le nombre de nœuds augmente considérablement pour remplir tout l’écran !

160531_132806

C’est beau, mais peu exploitable, alors j’ai ensuite pressé « C » afin de supprimer tous les nœuds ayant moins de 2 connexions.

160531_133215

Le résultat est bien plus parlant. Il est possible de commencer à travailler sur cette map.

On constate l’apparition de grands domaines, tels que les statistiques avec leurs représentations graphiques (Histogram, Boxplot, Barchart…), les probabilités, les groupes de données (séries temporelles), les systèmes d’information géographiques (SIG), bref des concepts plus ou moins lointains mais inspirants. Je supprime néanmoins ces nœuds de la carte, et je presse « C » pour nettoyer.

160531_134352

On trouve aussi beaucoup de noms propres ou de lieux tels que le Victoria and Albert Museum, que je supprime aussi de la carte, mais que j’ajoute dans ma liste des musés à visiter :). On trouve aussi des termes comme les « dark data ». Voici un sujet pas inintéressant qui mériterait d’être cartographié… On trouve des nœuds faisant le carrefour entre des concepts, sans valeur ajoutée, tels que « List of engineering branches », ou « International Standard Book Number ». Je les supprime et je presse « C ».

De nombreux noms d’artistes sont maintenant bien visibles. Plus proches du nœud « Art », on trouve Miguel Chevalier, Pascal Dombis, Sonia Landis Sheridan, Frank Popper, Joseph Nechvatal… J’accède à leurs articles Wikipepia (double clic droit) pour les découvrir, c’est si simple.

160531_134352

Plus proche du nœud « Infographics » : Charles Joseph Minard, Nigel Holmes, Thomas A. Defanti, Jacques Bertin qui semble composer un groupe, mais aussi James Joseph Sylvester

160531_135602

J’ai ensuite retiré ces noms pour obtenir une carte assez intéressante du domaine.

160531_140821

J’ai enfin retiré quelques notions trop vagues (timeline, Latin) ainsi que les noms propres pour ne trouver que les domaines parlants et une carte simplifiée.

160531_150547

Je m’arrête ici dans cette recherche. Cette navigation m’a beaucoup appris, car j’ai parcouru plusieurs dizaines d’articles wikipedia (double clic-droit).

Le code pour réaliser cette navigation est disponible en téléchargement. Pour l’utiliser, il suffit de le télécharger, de le dézipper et de l’ouvrir avec Processing 3+. N’hésitez pas à changer les paramètres d’initialisation pour mettre vos propres termes !

 

Consultez tous les articles sur le Design Génératif.

 

Posted in Design, Design Génératif, Interaction Homme Machine | Tagué: , , , , , , | Leave a Comment »

Processing et le Generative Design

Posted by Jean-Pascal sur 17 mai 2016

Connaissez-vous le Design Génératif ? Je propose d’aborder ce sujet régulièrement sur ce blog, à travers les (petites) incursions que je pourrais faire dans ce domaine fabuleux. Commençons par une sélection d’images du web :

L’envie est venue d’un livre magnifique, croisé par hasard (par hasard, vraiment ?) dans la bibliothèque du centre George Pompidou.

Ce beau livre, Generative Design: Visualize, Program, and Create With Processing, bien qu’un peu coûteux, vaut l’investissement. La première de couverture illustre le principe qu’il défend : il est possible de créer des œuvres, généralement numériques, généralement visuelles, à partir d’une logique exprimée principalement sous la forme d’un code informatique. Ainsi, la couverture représente le sommaire de l’ouvrage, et le visuel est calculé directement depuis l’analyse du texte !

Le sommaire est consultable sur Amazon.

Je n’aurai pas acheté ce livre si je n’avais eu à l’esprit de me remettre à la programmation, avec un langage plaisant, simple, immédiatement rémunérateur des efforts qu’on y place. Ayant développé en Java, SmallTalk, C#, Delphi… et même en assembleur, je m’étais arrêté au Flex il y a 5 ans de cela. Le Flex (Flash en action script 3) m’avait apporté de nombreuses satisfactions du fait de son incroyable portabilité (les temps ont changé) et de sa capacité à produire du beau et de l’interactif. Je cherchais donc un langage encore plus simple, et surtout avec une courbe d’apprentissage la plus favorable possible : je n’avais pas de temps à consacrer à l’installation d’un environnement de développement complexe aux librairies infinies. J’ai constaté qu’il fallait parfois compter plusieurs jours pour installer un environnement complet de développement à un développeur rejoignant une équipe !

Bref, le livre Generative Design s’appuie sur le langage Processing (https://processing.org/), permettant à partir de codes courts (des sketchs) de générer des images bluffantes. Il est possible de faire bien plus avec Processing : de la 3D pour la réalité virtuelle, pour l’impression 3D, du traitement vidéo en temps réel, des installations interactives… J’en donnerai des exemples dans de futurs articles. Vous trouverez sur le site d’Olivier Evrard plusieurs exemples de réalisations physiques de cette logique générative.

Evidemment, la notion de design génératif n’est pas nouvelle et date d’avant l’informatique, bien entendu. Je vous recommande à ce propos cette introduction au concept de base et la présentation d’artistes majeurs du 20ème siècle ayant mis en pratique cette démarche, avec les mains 😉 : http://arts-numeriques.codedrops.net/Le-design-generatif

Avant de conclure, je voudrais préciser que j’ai recherché d’autres outils permettant cette approche « Generative Design ». Je présenterai par la suite Blender, Sverchok et Rhino/Grasshopper.

Voici pour conclure cette introduction avec un site de référence pour le partage de codes :

www.openprocessing.org

Le code processing peut être exécuté dans un navigateur en activant l’extension java, ou en javascript s’il s’appuie sur la librairie P5.js. Voici un exemple java :

http://openprocessing.org/sketch/11232

Pour le code Javascript, j’adore le travail de Daniel Schiffman dont le livre « Nature of Code » est entièrement accessible en ligne :

http://natureofcode.com/book/chapter-9-the-evolution-of-code/

On peut voir sur ce chapitre du code Processing s’exécuter et démontrer que les algorithmes génétiques fonctionnent réellement (cf l’exemple Improvement #1: Obstacles) !

Pour la suite, je vous montrerai mes réalisations. A bientôt !

 

Posted in Design, Design Génératif | Tagué: , , , , | 1 Comment »