Jean-Pascal M.

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

Posts Tagged ‘generative design’

Perfume Lifeform : Les coulisses

Posted by Jean-Pascal sur 25 octobre 2016

Perfume Lifeform ; Réalisation, Design paramétrique, Sound Design, ASMR : Jean-Pascal Martin. Motion tracking : Perfume

J’ai décidé de réaliser ce tout premier film d’animation après avoir été fasciné par le travail de Tobias Gremmler dans sa vidéo Kung Fu Motion Visualization. La mise en forme hypnotisante et les étapes de transformations m’ont amené à apprécier les formes étranges comme si elles étaient des organismes vivants. Elles n’ont pourtant rien de crédible, rien de réaliste, mais les mouvements qu’elles opèrent sont plus que plausibles, comme les ombres projetées au fond de la caverne de Platon. On « sent » bien qu’il y a tromperie, mais on est envahi par une sensation de présence dont l’étrangeté inquiète ou fascine.

Les enfants, très tôt, dès qu’ils accèdent à la parole, comprennent intuitivement qu’une voiture n’est pas vivante, pas plus que le feu ou la mer, alors qu’un escargot immobile l’est. Comment font-ils la différence ? D’un autre côté les japonais s’évertuent à engendrer la confusion à travers des robots mimant la forme et les comportements humains. Je trouve pour ma part que ces derniers échouent à être convaincants, alors qu’une simple animation, en stop-motion de pâte à modeler, peut me plonger dans un univers aux contours crédibles, tangibles. De plus, dans les vidéos de Tobias Gremmler les formes sont visiblement de nature mathématiques. Pire, il joue avec le temps ajoutant ainsi une dimension surnaturelle, impossible

He oui, les films d’animation (comme le théâtre d’ombre) réussissent parfois à nous tirer une larme, car c’est souvent la profondeur de la narration qui fait la différence. Mais ici il ne s’agit que d’une danse… Pas de quoi s’imaginer à la place du danseur (pour ma part c’est clairement impensable ;).

Bien sûr, ce sont les mouvements qui apportent la vie, ou, pour reprendre les idées de Buckminster Fuller (voir mon article précédent), ce sont les processus (de transformation) qui font sens, plus que toute forme statique.

Les films d’animation nous montrent bien que nous pouvons percevoir de la vie dans une forme animée dès lors qu’elle bouge de manière convaincante. Dans Princesse Mononoké, le Dieu Sanglier malade attaquant le village me terrorise toujours. L’empathie du spectateur envers le dessin est naturelle, et même envers toutes formes abstraites dès lors qu’elles bougent comme la vie, dès lors qu’elles se manifestent à la manière d’un processus vivant.

film_171

Mais de là à pleurer en regardant un carré perdre sa nature profonde (quatre côté égaux & des angles droits) pour devenir un cercle ? Et trouver cela injuste ?

Dans Perfume Lifeform, j’ai tenté plusieurs approches, toutes basées sur le mouvement et, après avoir tenté de danser moi-même (et « motion-capturé » les mouvements sous Blender), j’ai recherché des fichiers BVH prêts à l’emploi. Merci à Perfume – un groupe techno-pop japonais – d’avoir apporté l’élan à ce projet en partageant sous forme de fichier BVH ses mouvements capturés.

Perfume 7.png

Au centre de la scène, une enveloppe génère des odeurs dans un univers olfactif. L’enveloppe ressemble à deux pans de tissus, chacun reprenant un côté d’un corps dansant. Des mains, quatre, s’agitent et projettent leurs parfums. Autours, des molécules (cycliques comme tout ce qui a une odeur) flottent.

La transformation des positions en 3D des bras, des pieds, des genous, des hanches, de la tête et de la poitrine se fait via un schéma Sverchok (ci-dessous).

Il faut tout d’abord importer le fichier BVH dans blender, puis créer autant de Empty que de positions intéressantes. Ajouter ensuite une contrainte pour que les Empty copient la position des tracks.

Il faut ensuite importer les Empty dans un schéma Sverchok, grace aux noeuds Object_In.

sv-perfume-in

 

Afin de récupérer la position des Empty, il faut utiliser un noeud Matrix Out qui propose en sortie une localisation.

Les noeuds sont répartis à gauche et à droite pour former les deux pans de robe, en les joignant. Les formes sont construites et positionnées comme sur le schéma qui suit.

Perfume Sverchok Screenshot.png

De nombreux effets ont été ajoutés : flou, systèmes de particule, vecteurs de force…

La bande sonore a été réalisée très simplement, à la manière des vidéos amusantes d’ASMR (Autonomous sensory meridian response) qui tentent de vous faire parvenir à un orgasme non sexuel (!) : avec des gants de latex, de la mousse et une anche de saxophone. Un synthé analogique génère une basse fréquence en phase avec l’aura protégeant l’enveloppe.  Quelques nappes plus aigües apportent de la brillance.

Je travaille pour la suite à une version en 360° stéréoscopique. Cette version, bien que plus courte, nécessitera un temps de calcul considérable (des semaines ?) si je ne m’équipe pas de plusieurs GTX 1080… Nous verrons bien, c’est tout nouveau pour moi.

N’hésitez pas à liker (si c’est le cas) la vidéo sur YouTube. C’est encourageant !

J-Pascal

Posted in Composition musicale, Design Génératif, DIY, Musique, parametric design | Tagué: , , , , , , , | Leave a Comment »

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.

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 »

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 »