Jean-Pascal M.

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

Archive for juin 2016

Variations de formes avec Blender et Sverchok

Posted by Jean-Pascal sur 23 juin 2016

Un des bénéfices qui découlent de l’usage d’un ordinateur vient de sa capacité à ne (presque) jamais s’épuiser quelle que soit la longueur de la liste de tâches qu’on lui donne. Il est donc facile d’obtenir, par répétition, un effet global intéressant. Souvent, l’on attend du nombre qu’il renforce l’impression de vérité par la force qu’il démontre.
Le principe est connu des artistes et, lorsqu’il faut dénoncer la société de consommation, l’accumulation devient démonstration, comme le fit Andy Wharol avec ses 32 Campbell’s Soup Cans.
Andy Warhol. Campbell’s Soup Cans. 1962. Synthetic polymer paint on thirty-two canvases, each canvas: 20 x 16" (50.8 x 40.6 cm). The Museum of Modern Art, New York. Partial gift of Irving Blum. Additional funding provided by Nelson A. Rockefeller Bequest, gift of Mr. and Mrs. William A. M. Burden, Abby Aldrich Rockefeller Fund, gift of Nina and Gordon Bunshaft in honor of Henry Moore, Lillie P. Bliss Bequest, Philip Johnson Fund, Frances R. Keech Bequest, gift of Mrs. Bliss Parkinson, and Florence B. Wesley Bequest (all by exchange), 1996. ©2015 Andy Warhol Foundation/ARS, NY/TM Licensed by Campbell's Soup Co. All rights reserved
Ce qui est étonnant dans cette série, c’est qu’elles ont été peintes à la main : chaque peinture est très légèrement différentes des autres. Pourquoi cette démarche fastidieuse ? Je pense que la copie mécanique, en générant des éléments strictement identiques, n’a pas le même impact, chaque élément n’ayant pas de poids propre. Andy Wharol, pour sa série de variations autour de Maryline Monroe, utilisa une méthode opposée puisque chaque image varie fortement, alors que le procédé de reproduction est mécanique…
Installation view of Andy Warhol: Campbell's Soup Cans and Other Works, 1953–1967 at The Museum of Modern Art, April 25–October 12, 2015. Photo: Jonathan Muzikar. © 2015 The Museum of Modern Art, New York.Shown:  Andy Warhol. Marilyn Monroe. 1967. Portfolio of 10 screenprints, each composition and sheet: 36 x 36″ (91.5 x 91.5 cm). The Museum of Modern Art. Publisher: Factory Additions, New York. Printer: Aetna Silkscreen Products Inc., New York. Edition: 250. The Museum of Modern Art, New York.Gift of Mr. David Whitney, 1968. © 2015 Andy Warhol Foundation for the Visual Arts/Artists Rights Society (ARS), New York

Prenons maintenant l’exemple des colonnes de Buren. 260 colonnes de tailles variables envahissant une des cours du Palais Royal fascinent les piétons de passage.

J’ai tenté de reproduire cet agencement en utilisant Blender et une de ses extensions, Sverchok. Blender permet de modéliser en 3D tous types de formes et d’en proposer un rendu graphique. Sverchok, quant à lui, permet en agençant graphiquement des nœuds, de composer des formes et de jouer avec des paramètres choisis.

Dans l’exemple qui suit, Sverchok a permis de générer 256 colonnes de tailles variables. Le point de vue, l’éclairage et les matières sont réalisés par Blender.

Colonnes de Buren

256 Colonnes de Buren – Jean-Pascal Martin

Voici le schéma Sverchok réalisé dans Blender pour réaliser cette image :

Sverchok Buren[1]

Comme on peut le voir sur ce schémas, le nombre de lignes et de rangs est déterminé par deux variables situées tout à gauche du schéma. Et c’est bien le fait de pouvoir jouer avec des paramètres qui donne toute sa puissance à un tel schéma. Il est par exemple possible de relancer la distribution aléatoire de toutes les hauteurs en modifiant un seul paramètre (le paramètre seed du composant random).

Et ce qu’on aime avec les paramètres, c’est de les « pousser » un peu ! Ainsi, Buren pourra remercier le design paramétrique d’avoir augmenté un peu son budget 😉

colonnes de Buren x 8000 - ortho

Et pourquoi ne pas faire autant de colonnes que de soldats d’argiles de l’empereur Qin ! Une matrice de 80×100 fera l’affaire.

Et voici prêt de 8000 blocs d’argile qui attendent d’être scultés… au boulot !

colonnes de Buren x 6400

colonnes de Buren x 8000 - experimental

Bien sûr, il est possible de jouer avec nombre d’autres paramètres et d’en ajouter en enrichissant le schéma Sverchok. Cette façon de procéder, dite de conception paramétrique, est naturellement adaptée pour « jouter » avec les notions de répétition et de variation !

Voici un schéma Sverchok permettant de réaliser à partir d’une forme 3D une matrice de variations.

SV-Repetition-5---schema

Une sphère est déformée aléatoirement, puis copiée en tournant autour de l’axe Z :

Pour la suite, je tenterai d’empiler quantité de formes !

 

 

Consultez tous les articles sur le Designe Generatif.

Publicités

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

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 »