Le site du virtualpark de Mozilla :
http://virtualpark.mozilla.org/

Un peu d’information sur le projet des parcs de la Fondation Mozilla :
http://www.mozilla.org/parks/

Je ne connaissais pas cette initiative de la Fondation Mozilla : un parc virtuel nommé « Tumucumaque » (dérivé de l’amazonie brésilienne) qui se traduirait par « forêt de l’information » est créé entièrement en html/css/Svg par chaque tweet d’utilisateurs. Pour la petite histoire, le nom était également le nom de code des projets de versions de Firefox ou Thunderbird. Un choix qui se retrouve également dans une aide pour le WWF. Tout se recoupe!

En fonction du tweet posté par chacun, de l’eau, des arbres, des lézards, ou grenouilles issue de l’Amazonie « irl » (si je puis dire) apparaissent et évoluent sur la carte.

Un projet qui m’amuse bien, même si je le trouve encore un peu rigide en terme d’animation.

Des jeux aux graphismes évolués
Certes ! je ne reviendrais pas sur les démos précédemment vues, mais ajoutons à cela le support de la webcam, la prise en charge des écrans tactiles, des périphériques de jeux comme les manettes Xbox ou PS3… c’est un magnifique terrain de jeux que s’offre là Adobe !

Les interfaces de visualisation et de représentation
La visualisation de centaines voire de milliers d’éléments en même temps… dans la même interface… mais ce n’est qu’un exemple (d’ailleurs visible ici : http://reelworld.com/molehill/ ). Ce sont des interfaces ayant la capacité d’afficher réellement et avec fluidité ce que l’on veut : je pense aux sites de e-commerce qui avaient tenté le coup de la 3D pour certains comme Amazon, mais faute de performances, ils avaient abandonné…

Toutefois, ne partez pas en courant lorsque l’on vous parle d’interface et de 3D.. je pense sincèrement que les expériences démesurées d’interface en Papervision3D / flash 10 ont servi de leçon.. et ont été bénéfique à une certaine culture et conception de l’interface avec la 3D.. pour plus d’ergonomie avant tout !

La réalité augmentée

ENFIN !!! enfin la réalité augmentée va sortir de son carcan sur le web « markêteux » qui n’a pas franchement fait que du bien à ce domaine.. Regardez les dernières expérimentations d’Eugene : http://blog.inspirit.ru/?p=482 et dites vous bien que la détection et l’affichage vont pouvoir commencer enfin à être sérieux !! Moins de limitations, plus de fluidité et de liberté, c’est ce que l’on en attendait.. Et c’est sans compter l’apport du leader dans le domaine sur le sujet, Total Immersion, on l’espère très fort…

ASFEAT | real world light system for AR from Eugene Zatepyakin on Vimeo.

La créativité
La vidéo suivante me rappelle une artiste numérique dont j’ai oublié le nom depuis dans les années 1998-2000 qui créaient de petites formes en 3D végétales et animales… des heures de calcul, des interactions et des boucles à créer sous Director.. Tout cela se fait désormais en 3D et en temps réel dans le navigateur, avec toutes les APIS des réseaux sociaux pouvant venir en aide..

Par créativité, j’entends également les artistes partis sur Processing (ou Unity3D) notamment pour réaliser ce qu’ils voulaient, parce que Flash à l’époque n’étaient pas capable de tout afficher.. et même en 2D, aujourd’hui, les performances suivent :

M2D tests from Terry Paton on Vimeo.

Créativité donc…

Rhizopods – Molehill 3D Experiment for Adobe Flash Player from Resn on Vimeo.

http://www.pica-pic.com/

Ô joie de retrouver les jeux de notre enfance, voire très lointaine enfance, et de pouvoir y rejouer… C’est une dizaine de petites consoles portables de l’époque, qui faisaient même parfois réveil (!! waah!) qui sont jouables via pica-pic. Profitons-en…

http://weavesilk.com/

Une expérience… en html5 bien sympathique qui aurait pu vous servir pour la Saint Valentin d’ailleurs : Esquissez un motif de soie en couleur et à la souris. Fluide et simple, l’expérience n’en est pas moins hypnotisante.

Trouvé dans un fourre-tout d’expériences plus ou moins connues ici

@quasimondo : « Here’s a little FreiChen webcam demo: »
http://www.quasimondo.com/examples/freichendemo/

Transformer le réseau ferroviaire de New York en instrument à corde poétique, c’est chose faite.

http://mta.me/

http://blog.chenalexander.com/2011/conductor-mta/

http://timelinedream.jp/

(Précision : vieux billet de 2010). Une petite cinématique avec vos tweets à découvrir en se logguant via Twitter sur ce site, lancé par KDDI. A la limite du kitsch et un design un peu pauvre (ou spécial, c’est selon), mais on sent que la période de fête approche approchait, juste avant la période faste des cartes de voeux.

(Précision : vieux billet de 2010) : NeuroProductions n’en est pas à son coup d’essai en matière de generative art, pourtant les dernières expérimentations avaient une approche plaisante. A découvrir.

http://www.neuroproductions.be/generative-art/a-take-on-generative-art

http://wonder-wall.com/scr/

Le projet Wonderwall est un dispositif mettant en scène le contenu d’une exposition d’un studio de design d’interieur, Wonderwall, installé au Japon. La version web ici présente tisse un fil (de laine) dont chaque couleur est tirée de chaque photographie de travail exposé, formant le mot « wonderwall ».

Vous vous souviendrez sans doute d’un autre travail qui avait eu un bon écho lors de sa sortie, qui était celui de leur site web. Si vous ne les connaissez pas, sachez que l’agence est l’origine des (bonnes) campagnes de Uniqlo comme UTLoop, des travaux pour Issey Miyake, des dernières campagnes de MUJI ou du Eye Project. J’ai l’impression de ne revoir que des travaux dont j’ai déjà parlé ici depuis des années et qui m’ont fasciné. Ces gens sont des magiciens ! Allez voir d’urgence les travaux réalisés ces dernières années sur leur site, tous surtout ! Bonne visite :)

Page du projet : http://tha.jp/1557

Infinite Creativity from Second Story on Vimeo.

http://secondstory.com/portfolio/works/infinite-creativity

Un projet réalisé par SecondStory pour Adobe avec leur participation destiné à l’origine pour le techmuseum : un mur interactif multitouch dans la plus pure veine de l’art génératif ou des travaux d’Eric Natzke. Des formes s’affichent sur le mur principal à la verticale, et les utilisateurs disposent de 4 petits écrans à plat multipoints pour interagir avec. Chaque écran a un menu radial pour changer la forme générée aléatoirement, et l’ensemble des interactions graphiques vient s’afficher sur le mur principal. Réalisé en Air, cette interface a un très bon répondant, et il faut plus de 10 doigts pour commencer à la faire ralentir. Graphiquement, c’est absolument superbe !

Cette installation dans le hall d’entrée de Max a eu une nouveauté : elle était interactive avec une application sur Android. (Je n’ai pas pu la tester, étant sous Iphone4..)

La Galerie Flickr

Petite démo en vidéo :

Une autre démo vidéo issue du channel MaxEvent :

Si vous faites du flash et que vous ne connaissez pas Erik Natzke, c’est une énooooorme lacune que je me fais un plaisir de combler au travers de ce résumé de présentation qu’il a faite à l’Adobe Max. Artiste programmeur, il travaille en maître sur flash depuis des années et a fait l’ouverture de la première Keynote avec la séance de livecoding. Pour commencer, une ou deux vidéos montrant le cadre de son travail, celle-ci issue d’une commande pour Wired :

Démarche, origine et intention

« Toujours garder un carnet de croquis sous la main » Il utilise énormément les temps de pause pour explorer des idées, dessiner des formes, en écrivant même le code parfois sur la feuille, manipuler les chiffres, cela l’aide à mettre en forme des structures, sous un aspect géométrique ou mathématique.

Dans sa pratique de flash, il allait jusqu’à tout créer sur la timeline à ses débuts. Il lui arrivait d’avoir une centaine de layers et de keyframes, il ne connaissait pas l’actionscript à l’époque mais pour lui l’important était de parvenir au résultat qu’il voulait.

Peindre avec des chiffres

Et petit à petit, en approchant l’actionscript, il a commencé à donner vie à ses formes : prendre des objets et leur donner des valeurs, jouer avec, ajouter des variables, pour leur donner du mouvement, changer les valeurs, leur rajouter des variations aléatoires, ajouter des duplications…

Il insiste sur le côté itératif de son travail, il revient régulièrement sur un ancien travail qu’il a pu faire dans le passé, mais en le faisant ensuite évoluer.

Inspiration et nature

Une des choses les plus importantes à ses yeux : il faut sortir dehors, explorer la nature, l’observer, et comprendre ce que l’on veut capter et en retenir. Il faut regarder les formes, les structures, couleurs autour de soi. Erik prends beaucoup de photos (beaucoup de macro de fleurs, de plantes, avec des flous de couleurs en arrière plan), avec son oeil de photographe, et observe la nature avec ses effets de matières, pour capter juste des choses qui vont l’inspirer

La deuxième étape est de faire rentrer tout ce qu’il voit et retient dans sa propre matrice, dans les maths, ces formes vectorielles, en tentant d’extraire ces couleurs pour les réinjecter dans son travail : redessiner ces formes, les adapter, les mélanger, les superposer, les et peindre avec, mélanger les couleurs, faire des itérations, les faire évoluer, revenir en arrière et faire évoluer le tout.

Son travail sur les rubans est disponible ici : http://www.natzke.com/source/

Travail sur la destructuration des photos.
Ce ne sont pas des objets générés abstraitement, mais selon un vrai système. Il choisit également ses couleurs, il les fait fleurir dans ses compositions.

Démarche et travail commercial

On peut selon Erik même apprendre d’un projet commercial comme celui une bannière usant de 3D, qui est devenue un vrai travail personnel car il a expérimenté de nouvelles notions en 3D. Il veut juste au final juste s’exprimer, et approfondir sa propre démarche même au travers de ses travaux de commandes.

« Ce que vous avez fait est ce que vous ferez » : ce qu’il a retenu de ses travaux commerciaux, c’est que pour un travail avec un client, d’autres viendront lui demander la même chose. La difficulté lorsqu’il a travaillé pour Nokia a été d’estimer la valeur de son travail pour une campagne. Toute une démarche.

Challenges techniques hors du flash

Ses premiers essais en flash consistaient à produire seulement des vecteurs et des couleurs simples dans un petit écran mais sortir ses compositions sur des millions de pixels en 300 DPI pour un très grès grand format (affichage, poster…), cela est devenu un vrai challenge. Faire 25 fois, ou 60 fois plus grand, ou créer une vidéo en HD ou chaque composition lui prendrait 2 semaines de calcul pour chaque exposition à produire. Des challenges à résoudre qu’il n’avait pas prévu. Surtout qu’il veut toujours recréer la même émotion produite avec le print qu’avec l’écran.

Ses expérimentations:
http://play.natzke.com/
Ses travaux sur Vimeo
http://vimeo.com/natzke
Sur Flickr :
http://www.flickr.com/photos/natzke/sets/

Petite performance entre Erik Natzke à la peinture virtuelle, un DJ à l’audiotool et Joa Ebert au livecoding sur la dernière API 3D de flash avec Flash Builder. Une intro très forte qui démarre tout doucement mais plutôt impressionnante vers la fin

Ce qui a donné cela à la fin de la performance :

Des travaux d’école, des best use case, des créations originales. Un bon tremplin pour les créatifs, un bon outil de visibilité pour les logiciels bien sûr. Voici les gagnants et leurs travaux, dans les diverses catégories (je reviendrais sur les autres non gagnants, il y a de très bonnes choses de part et d’autre) exposés par ailleurs dans l’entrée de l’AdobeMax :

Browser Based Design: winner Tiago Cabaco imagined an experimental font called “Kalvika” http://goo.gl/VVQF

Case Study Klavika from ADAA Gallery on Vimeo.

Non-Browser Based Design:  winner Anthony Mattox’s “The List List,” a collaborative, open platform: http://goo.gl/uRRc

The List List from ADAA Gallery on Vimeo.

Winners A. Mahon & Z. Shore’s VoxPop summarizes online discourse from @nytimes: http://goo.gl/uCSd

VoxPop from ADAA Gallery on Vimeo.

Installation Design: 3.5K blank books + 16 book covers = Marco Werner’s  winning concept, Buchmesse. http://goo.gl/WTuN

Buchmesse 2009 from ADAA Gallery on Vimeo.

Mobile Design: Heart telemonitoring system developed for patient-athletes at high altitudes by  winner Laura Bordin

Animation:  winner Napatsawan Chirayukool wants to know, « What Makes Your Day? http://goo.gl/ruhB

Live Action:  winner Victor Aloji created a commercial to combat sexual abuse of children: http://goo.gl/7AMa

Motion Graphics: “29,” Edeline Bernal’s -winning video : http://goo.gl/tQ28

29 from ADAA Gallery on Vimeo.

Monyo+Moji  winner for Print Communications http://flic.kr/p/8MNcnx

Print Communications:  winner Chiharu Tanaka’s typeface “MONYO+MOJI” fuses Japanese ornamentation & Roman alphabet: http://goo.gl/4rEO (Celui là va plaire à graphism.fr hein Geoffrey ;) )

Photography:  winner Natalia Luzenko’s series called “to wait and see” about her affinity for tea: http://goo.gl/fsML

Packaging: Analog 120 film is not dead—see  winner Linna Xu’s innovative packaging for Ilford #film: http://goo.gl/2mxS

Illustration:  winner Soonku Jang created illustrations of World Cup players 4 Korean children w/out PC &TV access: http://goo.gl/Jkq5

http://www.floweroscope.com/kaleidoscope/new

En parlant de html5, une application fort sympathique qui me rappelle des choses en flash il fut un temps, entre autre pour une campagne d’Ericsson (dont j’ai oublié le nom :/ ). Très chouette en tout cas !

via @lazyheart

Démo de Tonfall – Voir le billet explicatif directement sur soulwire

Petite démo pour un framework musical créé pour Flash 10 tout spécialement : Tonfall créé par Andre Michelle.