Diplômé du MIT Media Laboratory, Golan Levin est un des artistes contemporains du monde numérique, celui que je citerai en exemple la prochaine fois que je devrai expliquer à ma famille la voix dans laquelle je me dirige… les nouvelles formes de création, utilisant le code informatique autrement dit les « œuvres interactives ».
Il créée donc des applications, des outils à but esthétique ou non, manipulables ou non, des projets simplement surprenants.
Les infos en français sur ses œuvres : fondation-langlois
Le site de Golan Levin : www.flong.com

J’ai trouvé une interview de Golan Levin, très riche, à propos de l’interactivité, l’aléatoire, l’art génératif…

Les «œuvres d’art générées à partir d’un logiciel » («generative software art»), comme on les comprend habituellement aujourd’hui, sont le produit d’une pratique artistique qui utilise des algorithmes mathématiques pour produire automatiquement ou semi-automatiquement des expressions dans des formes artistiques plus conventionnelles. (…)

Avec cette définition, « faire du Multimédia » prend alors tous son sens, un moyen et un support englobant tous les arts.

(…) C’est une chose d’être capable d’apprécier la beauté surgissant de résultats inattendus, mais nous devons aussi réaliser que nos algorithmes sont également capables de froideur et de laideur, ou nous n’apprendrons jamais rien.(…)

Il pose un regard très juste sur le potentiel du numérique sur la quantité et la qualité, la fascination de l’artiste ou du spectateur devant l’œuvre générative.

(…) À une époque, j’évitais presque religieusement de recourir à l’aléatoire dans mes œuvres, et j’en étais fier. Mais il s’est produit un tournant, un jour alors que j’étais étudiant au Media Lab. J’avais été invité à faire une démonstration de mon logiciel devant le premier ministre de l’Autriche. C’était un homme énorme et très grand, avec une solide poignée de main et jouissant d’une indéniable autorité. Comme je lui faisais la démonstration de mon logiciel, j’ai insisté sur le fait qu’il n’y avait aucun caractère aléatoire dans les algorithmes : tout ce qu’il voyait était entièrement en fonction directe des mouvements qu’il imprimait à la souris avec sa main. Il s’est tourné vers moi et m’a demandé: « mais qu’y a-t-il de mal dans l’aléatoire ? La vie elle-même est aléatoire. » J’ai pensé que c’était d’une grande sagesse. Ainsi, après tout ce que j’ai pu dire, j’admets aujourd’hui de manière un peu embarrassée que j’emploie effectivement l’aléatoire, particulièrement sous la forme de bruits statistiques à haute fréquence et basse amplitude. C’est en fait essentiel pour générer toutes sortes de textures organiques. Sans cela, la plupart des systèmes génératifs sembleraient sans vie, trop réguliers, et ennuyeux.

ET mes 2 coups de coeur:

- Messa di Voce (Golan Levin & Zachary Lieberman)
- Interstitial Fragment Processor

-

Donc maintenant reste à savoir ce que c’est exactement!
Attention, quand on est graphiste ou illustrateur, les mots qui vont suivre risque de faire peur !

PROCESSING ?
Processing est un projet open source initié par Casey Reas et Benjamin Fry (tous deux issus du fameux MIT,Massachusetts Institute of Technology et à l’époque étudiants de John Maeda). Ce projet est basé sur le language de programmation Java et en exploite les possibilités graphiques.
Il faut avant tout comprendre que Processing a été conçu pour des artistes, par des artistes.
Il permet donc très rapidement de générer des images sur ordinateur sans trop se prendre la tête (du moins au début).

L’utilisateur n’a pas à connaitre le language Java pour utiliser Processing puisqu’il a été conçu pour faciliter la création. On n’a donc pas à lire des dizaines de livres de Java pour pouvoir dessiner une ligne à l’écran et l’enregistrer en PNG ! Ouf!

L’environnement de Processing est archi-simple : un champ de texte pour écrire le programme et un bouton « play » pour jouer l’image dans une petite fenêtre.
Ces « petites fenêtres » peuvent être mises sur le web très facilement, lues par le plug-in Java (installé sur la plupart des ordinateurs).

EXEMPLES ET LIENS :
Quelques exemples de travaux et/ou de personnes travaillant avec Processing :

Les 2 fondateurs :

.1 Ben Fry est à la base de Processing et il travaille beaucoup à partir du code génétique et des statistiques :

.2 REAS, autre fondateur du projet, dont voici quelques travaux :

L’approche de Reas m’a l’air plus tourné vers l’art que les pures data de Fry.

Mais aussi :

.3 Flight 404 qui s’est fait connaître grâce à cette vidéo réalisée pour un concours lancé par Radiohead :

Explications ici.
Son blog est une vraie mine d’or !

.4 Daniel shiffman

Il a récemment écrit un livre sur Processing et participe activement au développement du projet.
Il tient à jour ce très bon site, avec des tutoriaux et des exercices sur Processing : learningprocessing.com.
Son blog est aussi rempli de cours en ligne, d’un niveau plus élevé.

.5 Dans les sites importants à noter : Openprocessing.org est une communauté de partage de scripts, le code source est fournit et certains exemples sont vraiment fortiches!

.6 En France, 2Roqs est un collectif bordelais qui fournit des liens bien utiles et quelques slides de leur workshop.
Ils ont développé plusieurs librairies pour Processing et ont lancé un nouveau projet qui à l’air très très fort : GRAVITY

Lien Vimeo vers Gravity de 2Roqs sur Vimeo.

.7 Pour comprendre les bases et toujours en français, les cours de l’école d’Art d’Aix-en-provence sont très pratiques et très bien faits :
http://www.ecole-art-aix.fr/rubrique81.html.

Enfin, une liste de livres sur Processing pour ceux qui veulent avoir mal à la tête et par ce que c’est Noël héhéhé :

Fry, Ben. Visualizing Data: Exploring and Explaining Data with the Processing Environment.

Greenberg, Ira. Processing: A Programming Handbook for Visual Designers and Artists.

Igoe, Tom. Making Things Talk: Practical Methods for Connecting Physical Objects

Reas, Casey, and Ben Fry. Processing: A Programming Handbook for Visual Designers and Artists

Shiffman, Daniel. Learning Processing: A Beginner’s Guide to Programming Images, Animation, and Interaction

A noter que la version pour téléphone portable de Processing existe : mobile.processing.org

Le lieu investit pour l’occasion :

Stop-it c’est quoi ?

Le principe est simple : composer des boucles musicales grâce à des post-it que l’on colle sur un panneau.
La hauteur du post-it sur le panneau détermine la note jouée et la couleur du post-it  détermine le type de son joué.
A l’écran, chaque post-it joue une animation à la lecture du son afin de créer des sortes de paysages sonores.

Les nouveautés :
Le lab a présenté une installation largement remaniée par rapport à la version vue aux portes ouvertes des Gobelins avec une réactivité et une simplicité d’utilisation assez bluffante.
Au menu des nouveautés : des fonds qui évoluent dans le temps, de nouvelles animations, des accidents visuelles et une meilleur gestion de la captation des post-it.

Et maintenant, des photos plutôt que des mots :

(ça profite de l’open bar )

Visuellement, les animations étaient  projetées sur le mur du fond, chaque graphiste ayant créé son lot d’anims.

C’est donc dans une ambiance bon enfant que les convives (pour la plupart tiré à quatre épingles) purent manipuler du post-it fluo.
Les gens comprenaient vite l’idée et étaient très réactifs même si les mélomanes se font plus rares !

Le site du lab 212 : lab212.org

Les membres de l’équipe Stop-it :

Juliette Champain (ce prénom doit vous dire quelque chose)
Cyril Diagne (éminent membre de Shapeflow)
Simon Doury pour le le design sonore
Nicolas Guichard
Tobias Muthesius
Pierre Thirion (le mec à la coupe et à la chemise)

Une question me brule les lèvres : « A quand la prochaine soirée Stop-it ? »

Area 17 est une petite structure basée à Paris et New York qui se démarque par la qualité de ses travaux.
Ça fait plaisir de voir de telles images en France, pour une agence qui se revendique de travailler dans le multimédia et le web.
Les grilles et le style sont strictes,  propres, maîtrisés pourtant c’est un esprit de liberté qui ressort des images.

Parmis les images affichées, on peut retenir celles qui concernaient l’événement « Never Ending Friending » de Myspace, l’identité du magasine Asylum ou Good Magasine.

Les aficionados de ffffound n’ont pas pû manquer ces quelques affiches :

Aussi, Area 17 a dévoiler son nouveau site Internet, visible comme œuvre à part de l’expo.

Et puisque c’est la principale activité de l’agence, voici des exemples de sites Internet, privilégiant le html et le « design au pixel » :

nove.biz :

Goodmagazine.com :

MadameFigaro.fr :

Le site de l’agence : Area 17

Et puis je vous laisse avec ces pépites de webdesign, je dois finir « Vertigo » de Hitchcock, dont j’ai acheté l’affiche de Saul Bass avant de voir le film !

Je ne vais pas ici rentrer dans la guerre classique entre site flash ou pas flash mais simplement tenter d’expliquer dans quel mesure un site développé en html+css permet un design tout aussi intéressant qu’un site en flash, avec ses différences, ses points négatifs et ses points positifs.
Et enfin, quelques sites html pour le plaisir des yeux.

Let’s get ready to rumble !

Pourquoi le html ?

Première chose importante, il semblerait que la question du référencement d’un site en flash est en train de subir quelque bouleversements (en savoir plus chez Etienne Mineur ou chez Google). Il serait bon que les sites en flash deviennent aussi bien référencés que les sites html. Personnellement je doute qu’un moteur de recherche puisse référencé intelligemment un site en flash, en s’y retrouvant dans la structure clip, sous-clip d’un fichier flash qui diffère d’un site à l’autre.

La structure mon bon monsieur

Un fichier html est structurant et c’est là pour moi une grande force du couple html+css. Développer un site en html revient à créer naturellement des niveaux de lectures reconnaissables par l’utilisateur (et les moteurs de recherche). En flash, sur un site important comportant un grand nombre de pages, il faut être très rigoureux pour maintenir une cohérence, surtout lorsque l’on a beaucoup de textes dynamiques à gérer.
Le principe des feuilles de style permet aisément d’organiser son information tandis qu’en flash la gestion des textes dynamiques est plus complexes mais pas impossible. Aussi, les basiles html créées naturellement des blocs ce qui évite tout flottement. Là encore, en flash il faut être rigoureux car il est possible de positionner des éléments d’interface sur des dixièmes de pixels (éhéhé).
Le nouveau site de Mozilla est un bel exemple de structuration intelligente et de gestion des niveaux de lectures dans un site où il faut gérer beaucoup de textes.
En contrepartie, flash permet d’utiliser facilement n’importe quelle typographie (d’où l’utilisation de typographies non optimisées pour écran ), chose qui peu-être possible en html via le système sifr (Scalable Inman Flash Replacement), pour les titres de ce blog par exemple.

Des sites dynamiques c’est bien

Un site Internet sera visité par des gens si son contenu évolue régulièrement. Et il est toujours plus simple de créer un site dynamique en php qu’en flash (sinon les blogs seraient développés en flash).
Fin de l’argumentation.

L’expérience interactive

En terme d’expérience de navigation, les deux technologies ne sont pas comparables, le flash permettant de gérer animations, sons, vidéos et maintenant 3D avec un fluidité toujours plus bluffante. Du côté du html, des frameworks javascript (YUI ou prototype) permettent aussi leurs lots d’effets bling bling sans pour autant rivaliser avec les tweens et la gestion des comportements dans flash (notamment celle des boutons).

On veut des images !

Pour finir sur cette rapide et complètement subjective comparaison, voici quelques sites html à voir et qui sont pour moi de bons exemples de sites html offrant une expérience riche et une gestion intelligente des contenus :

Letters-numbers – De très beaux travaux et une navigation fine.

Ilovetypography – Magnifique blog sur la typographie

loewydesign – Découpage de l’espace et très bonne gestion de rollover, rollout pour le portfolio de ce studio new yorkais.

volll – gestion des gifs animés très marrantes

spacecollective – principe de visionnage de contenu très bien pensé

hi-res – ou quand l’une des plus importante boîte spécialisée dans les sites en flash fait son portfolio en html

wearebuild – portfolio du studio Londonien

faub - navigation originale et portfolio plein d’humour (lien trouvé sur gobz.org)

Si vous avez d’autres pépites n’hésitez pas à linker !

(ps : Pour ceux qui veulent du gros site en flash, voyez celui de kikko qui mérite grandement le détour et j’attends avec impatience le nouveau alma&vogler !)

« Le problème, c’est que nous voulons à la fois que les objets soient plus simple et faciles à utiliser et qu’ils accomplissent les tâches les plus complexes… »

Voilà un livre qui aspire à une vie plus simple et qui changera surement votre regard sur la technologie.
John Maeda analyse le design et le comportement de l’homme, pour élaborer une méthode d’apprentissage de la simplicité. 10 lois qui marquent l’histoire du design. et nous questionnent sur notre environnement cybernétique .

1. Réduction, 2. Organisation, 3. Temps, 4. Apprentissage, 5. différences, 6. contexte,7. Emotion, 8. confiance, 9. Echec, 10. Loi cardinale

Vous pouvez retrouver les 10 lois sur le blog dédié crée par John Maeda lawsofsimplicity.com ou en achetant son livre!

John Maeda est un artiste reconnu, ses œuvres numériques sont régulièrement exposés dans le monde entier. Il a enseigné les arts et les sciences numériques au Laboratoire de Mass-média MIT et vient d’être nommé président de la Rhode Island School of Design..
Pour en savoir plus sur la Rhode Island School et un lien vers son site : maedastudio.com

L’artiste développeur expérimente et programme des compositions d’algorithmes et de mathématiques, une nouvelle forme de poésie est née!!!.

« …le but de tout ceci est de créer de la poésie. Donc, j’aime parler de poésie algorithmique. Un poème est un texte qui vous procure de la poésie si vous le lisez. Le code que j’essaie d’écrire est un texte qui vous procure de la poésie si un ordinateur le lit pour vous…. »

A travers la création du CD-Rom « Alphabet », édité par dadamédia et lauréat du prix möbius international 2000, frédéric Durieu montrait et démontrait toute la poésie présente dans l’alliance du langage informatique et des illustrations de Kveta Pacovska. Bon malheureusement il est en rupture de stock.
Mais on peut retrouver sur son site d’expérimentations interactives beaucoup d’autres belles choses!
Tout est possible… un cheval qu’on manipule dans tous les sens… un moustique qui nous tourne autours et qu’on essaye d’écrabouiller sans bien que mal ..Un monde où la gravité et l’anatomie n’existent que de manières très relatives. Ne cherchez pas, vous êtes dans Puppettool:

PuppetTool, 2002-2003

Puppettool est, comme son titre l’indique, un outil pour marionnette. C’est un site web où l’on peut manipuler en ligne, tel un marionnettiste, les habitants d’un zoo, contrôlant grâce à de nombreux paramètres les mouvements des membres d’un cheval, d’un crabe, etc. Le visiteur peut également enregistrer sa séquence alors visible par d’autres.

Oeil pour oeil pour oeil, 2000

Il collabore très régulièrement avec l’artiste multimédia Kristine Malden ou avec le musicien Jean-Jacques Birgé.

Une fois le modèle finalisé, on peut le récupérer n’importe où. Motion Portrait a participé au projet RecYou de Sony (et une vidéo très théâtrale ici) qui permet de synchroniser son visage en 3D avec de la musique même si ça ne sert pas à grand chose à priori!

Le principe apparait comme tout sauf neuf mais la démo mise en ligne est assez flippante, surtout en fullscreen!

(elle a pas les yeux un peu rouges ?)

La démo :cubo.cc

Il fabrique donc des miroirs mécaniques composés de multiples pièces identiques, en diverses matières : bois, billes de métal, disques, etc. Ces petites pièces se placent pour recomposer le reflet du spectateur en jouant avec la lumière.

Derrière ce mécanisme, une webcam et un programme informatique enregistrent image par image le déplacement du spectateur et retranscrivent en plusieurs zones de lumière son image. Le miroir prend alors des allures de peinture impressionniste.

Daniel Rozin vit et travaille à New York.

Des images d’une installation située au 52ème étage de la Mori Tower de Tokyo :

Hereafter (le nom de l’installation) n’est pas un miroir classique, l’installation questionne sur la présence humaines, la mémoire des lieux, le thème du souvenir…

Voir d’autres projets :

Images d’une installation pour le Oyane Plaza à Tokyo :

Pour cette installation, UVA a créé un sol qui réagit aux mouvements des visiteurs. Les formes sont générées dynamiquement. Elles évoluent entre elles, ont une physique et un comportement propre.
Les formes sont constituées de pixels bien distincts (une esthétique récurrente dans leurs travaux) et les couleurs se veulent en adéquation avec l’environnement extérieur.

Portfolio :

Leur travail est basé sur des principes de design génératif, l’installation évolue dans le temps au grès des interactions avec le public ou les artistes.
Et petite apparté, au risque de paraître hors sujet : voici un petit lien vers des cours en Processing et en français, pour ceux que ça intéresse : Ecole d’Aix en Provence – Processing.

Et toujours au sujet d’UVA:
Je consulte leur portfolio régulièrement, à la fois motivant et agaçant .
Les photos sont magnifiques, et zou l’url : www.uva.co.uk