Parce qu’il y’a tant de choses à vous souhaiter : Bonne santé, bon voyage, bonne pêche, bonne mine, bonnes récoltes, bon appétit, … et bonheur en 2012 !
Et parce qu’il y’a 1000 façons de sortir d’un labyrinthe : filer droit, tourner à droite, tourner à gauche, revenir sur ses pas, éviter les impasses, sauter par dessus les haies.
Voici une série de 50 labyrinthes génératifs, à découvrir et à élucider.

Labyrinthe 35/50 – Beaux tricots :

Labyrinthes générés avec Processing

Découvrez tous les labyrinthes ici : antoineetjuliette.com/extra/2012

En 2012, on s’est promis aussi de poster sur ce blog plus d’articles qu’il n’y en a eu en 2011, bonne résolution A bientôt!

—

Les Ferrofluides de Sachiko Kodama

Le ferrofluide est un étrange liquide de synthèse utilisé en 1060 par la NASA, puis plus tard par les industries. Ce liquide est composé de nanoparticules d’oxydes de fer devenant magnétique au contact d’un champs magnétique extérieur. Dans certains cas, et si le champ magnétique est suffisant, il se hérisse de pointes dont la topologie varie selon les paramètres du champ.

Sachiko Kodama est une artiste japonaise.
Elle entame son travail sur les ferrofluides en 2001 avec l’installation interactive Protrude Flow. Des micros captent les sons environnants. Les sons sont convertis en force electromagnétique et transforment la structure du fluide. En 2008, elle présente une nouvelle sculpture de ferrofluides, intitulée Morpho Tower qui réagit cette fois au rythme d’une musique. Les pointes de ferrofluide dansent autour de 2 spirales en fer et oscillent selon la force du champ magnétique. L’animation des fluides est scotchant, un comportement entre artificielle et naturelle.

Protrude, Flow 2008 (2008) Sachiko Kodama

Cliquer ici pour voir la vidéo.

Morpho Tower / Two Standing Spirals (2007) Sachiko Kodama

Fleur magnétique – Sculpture cinétique de Laurent Debraux

Une autre sculpture cinétique, intitulée Fleur Magnétique et présentée fin mai 2010 aux portes ouvertes des ateliers d’artistes de Belleville, à Paris par Laurent Debraux.
Plexiglass, Aimants, Moteur, Liquide ferro-magnétique.
Prises de vues et Montage : Guillaume TAVERNE / Musique : Sylvia Howard – I wanna go somewhere.

Cliquer ici pour voir la vidéo.

Fleur Magnétique (2010) Laurent Debraux

Unsichtbar – sichtbar

(Traduction : Invisible – Visible). Et voici un Drawing robot réalisé par Eva Merckling, Dania Vifian, Sarah Villiger, à l’Institute of Media Art, FHNW, en 2007, dans le cours de  »Robotics and Automats » de Andres Wanner.

Cliquer ici pour voir la vidéo.

Drawing Robot (2007) Eva Merckling, Dania Vifian, Sarah Villiger

Avis aux amateurs : on peut trouver du ferrofluides sur ebay pour 10 dollars, …

Je profite donc de ce plongeon geekesque pour faire la présentation de différentes installations interactives toutes plus épatantes que les autres. La première partie porte sur les installations interactives haptiques. L’haptique désigne la science du toucher.

—

Mesa de arena / SieteMedia

La première installation est mexicaine. La Mesa de arena « table de sable » est une des nombreuses tables interactives conçues par l’agence SieteMedia de Mexico. Elle est présentée dans la partie Futuro de Campus party, au côté de Stop-it. L’installation se compose d’une table lumineuse entièrement recouverte de sable, et d’un écran de projection. Le public s’installe autours de la table et esquisse dans le sable une première forme lumineuse. Pendant ce temps, le dessin est projetté à l’écran, en temps réelle et subit plusieurs effets kaléidoscopiques.
L’expérience est vraiment très agréable, presque instinctive, primitive… c’est un vrai plaisir de dessiner avec du sable et de la lumière!

Video

Dessin de sable et de lumière, Mesa de Arena (SieteMedia)

Relief / Daniel Leithinger, Adam Kumpf, Hiroshi Ishii, tangible media group MIT

Je poursuis avec une autre interface malléable, qui d’ailleurs me rappelle ce drôle de jouet composé de petits clous métalliques sur lequel on appuyait notre visage.

Relief est un projet récent (2009), mené par le Tangible Media Group (MIT), sur le rendu d’animation 3D d’un relief en mouvement. Voici donc une table circulaire à la surface évolutive… composée de 120 «axes» motorisées. Le tout est recouvert d’un tissus en lycra sur lequel un paysage est projeté. Chaque axe est capable de répondre individuellement aux mouvements des utilisateurs et/ou aux données géospatiales envoyées par ordinateur (capteur / actionneur). Deux actions possible : tirer ou pousser.

Pour + infos et pour les éloctro-bricoleurs : Afin de minimiser les coûts et la complexité du système, toutes les parties de la table ont été construites à partir de composants disponibles dans le commerce (Potentiomètres, Arduino, moteurs DC, moteur Ladyada) et les logiciels utilisées sont des logiciels libres (Processing).

De futures versions sont prévues : différentes tailles et forme, sculpture d’outils, controleur de musique, versions connectés pour des collaborations à distance, etc.

Le projet était exposé au Ars Electronica Festival, 2009

Cliquer ici pour voir la vidéo.

120 axes en aluminium, Relief (2009)

Le public interagit sur le relief de la surface, Relief (2009)

peg block / Ben Piper, Matthew Karau, Beto Peliks and Hiroshi Ishii, tangible media group MIT

Un deuxième projet des génies du Tangible media group, plus ancien cette fois (2001). Il est basé sur le prototype d’un projet d’élève Ben Piper, réalisé en classe de physique du MIT Media Lab et se défini comme un moyen de communication à double sens utilisant le toucher.

Peg block est en faite un ensemble d’interfaces tactiles, toutes identiques : un tableau en bois dans lequel est enfoncé des chevilles. Tous les tableaux sont reliés en réseau. Chaque utilisateur dispose d’un tableau et peut manipuler les chevilles, les faisant glisser d’avant en arrière. Le mouvement est converti en électricité et reconverti en mouvement vers la cheville d’un des tableaux du réseau. Chaque cheville peut donc agir selon 2 modes :  produire de l’électricité à partir d’un mouvement, et reconvertir l’électricité en mouvement.

Download

Echanges entre 2 tableaux, Pegblocks (2001)

L’expérience est à la fois ludique et didactique. J’ai trouvé justement un article à ce sujet où PegBlocks est utilisé comme un jouet éducatif pour illustrer certains principes de base de physique aux élèves du primaire.

SCENARIO Un groupe d’enfants de maternelle et leur enseignant s’asseoient autour d’une table de classe. L’enseignant distribue un ensemble de jouets en bois PegBlocks et les dépose sur la table. Ensemble, les enfants et leur enseignant mettent en réseau les blocs en utilisant un ensemble de câbles électriques. Lorsqu’un réseau est complet les enfants manipulent alors les PegBlocks et peuvent observer comment l’énergie cinétique qu’ils mettent dans le système est redistribué sur le réseau. Grâce à ce genre de jeu interactif les enfants commencent à développer une compréhension plus intuitive d’un certain nombre de principes de physique abstraite.

Tensión superficial / Crowe, Rusjan & Wloch

Tension superficial est une installation interactive présentée en Argentine durant l’exposition «estados del agua». A la présence de visiteur, la surface de l’eau réagit, tremble, se resserre…

Cliquer ici pour voir la vidéo.

Liens vers Jorge Crowe

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é.