OSCemote ( à prononcer “Ah-ski-mote”) est un outil permettant de connecter un Iphone avec différents types de périphériques numériques, le transformant en télécommande. On se souvient d’Arduino, Wiiflash ou Flartoolkit, des outils permettant d’étendre les capacités de flash ou de connecter des périphériques insolites à flash.

La vidéo suivante montre brièvement un Iphone connecté avec un PC qui fait tourner un flash en AS3 gèrant le multitouch. Sans nul doute un outil qui pourrait être utilisé pour des bornes interactives à bas coût ou pour des présentations un peu plus interactives qu’un powerpoint. Il existe d’autres exemples intéressants sur le blog d’OSCemote.

OSCemote to ActionScript 3.0 Multi-Touch Demo from uranodai on Vimeo.

Mæve installation @ Venice Biennale 2008 from Maeve installation on Vimeo.

On parle toujours de Microsoft Surface que l’on tarde depuis le temps à voir en France tandis que de multiples tables similaires interactives font surface (désolé pour le jeu de mots). En voici une autre, à la Biennale de Venise, c’est le projet Maeve, avec une démo en vidéo.

Après les jeux en réalité augmentée sur consoles, la Sekai caméra présentée récemment, sur mobile, cette fois.

Autre exemple ? La Nintendo DS qui devrait avoir des éléments permettant de s’amuser de la même manière, annoncé dernièrement.

Dernière expérimentation, qui dit nouvelles interactions, dit aussi nouveaux capteurs. Voici une vidéo de démo de Toshiba qui à peu de choses près, travaille sur la détection de position… sans contrôleur : en gros, jouer à la wii sans wiimote, avec seulement le poing fermé.

Un gros travail signé Bestiario à qui l’on doit déjà l’interface vidéo de TED notamment, qui vient de finaliser pour BerkmanCenter une interface de visualisation de vidéos issue de leur dernière conférence. Navigation par tags, liens sémantiques qui relient les sujets entre eux - folksonomies - , et vidéos récupérables sur youtube, la consultation des vidéos se fait en profondeur dans le contenu.

Plongez-vous dans ces interviews, certains interviewés sont de véritables visionnaires d’internet, ont créé des communautés de plusieurs milliers d’internautes ou ont changé la face du web à jamais. Passionnant.

L’interface : http://www.bestiario.org/harvard/b10/
Un lien sur le process : http://thames2thayer.com/blog/?p=140

(merci Jose! c’est toujours un plaisir !)

Si vous aimez la visualisation de données, le volume 1 de Visualisation Magazine vient de sortir.

Présenté à la Game Convention 2008, Eyepet est un jeu à la webcam de réalité augmentée prévu sur la console de Sony, la PlayStation 3. Dans la continuité des jeux ludiques possibles dont je parlais précédemment, c’est un animal virtuel avec lequel le joueur va s’amuser.. le diriger, le caresser, jouer avec.

Le jeu sortira d’abord en Europe, et en 2009.

Voir le contenu du communiqué sur maxconsole.

Chesscube est une interface en flex magnifique pour les amateurs de jeux d’échecs. Ce type de jeu est trop souvent réservé à un public de passionnés sur des interfaces en Java assez pauvres graphiquement mais cette interface donne vraiment envie de jouer. Un système de réputation, et de chat selon les pays permettent de se gérer son profil. Les différentes parties d’échecs (Blitz etc..) sont possibles avec des durées de jeu variables, avec un moteur de recherche très bien pensé, par niveau de joueur. Le site n’est pas avare de fonctionnalités et comblera aussi bien les habitués que les novices.

Je lisais dernièrement une interview à propos d’une solution de passage de site html en 3D, et l’un des arguments - hormis le côté ludique - était d’avoir un espace plus ‘ergonomique’… ergonomique, la 3D ? Lorsqu’un ergonome met à l’épreuve certaines navigations, le résultat n’est parfois pas bien brillant. Cela m’a donné envie de lister les différentes manières de naviguer (attention, pas de représenter) dans un espace en 3D dans un navigateur.

J’ai trié selon 4 critères les systèmes de navigation :

1/ La vue à la première personne = une caméra virtuelle qui se déplace
2/ La scène qui se déplace avec une caméra virtuelle fixe ou aimantée sur un objet
3/ La vue à la 3ème personne où l’on guide un avatar (l’utilisateur), avec une caméra qui suit celui-ci
4/ Les systèmes d’interactions : clic maintenu, utilisation de la roulette, de l’interaction dans un décor en 3D ou avec un menu traditionnel en 2D.

Dans quel espace en 3D j’évolue et pourquoi ?
Et finalement, cela peut se résumer en une question simple : suis-je moi-même la caméra qui évolue dans un contenu ou bien suis-je un acteur fixe qui manipule un objet dans l’espace ? Cette approche dépend aussi du type de contenu que l’on met en avant : s’il s’agit d’un décor complet, je vais guider ma vue comme une caméra, et s’il s’agit d’un ‘petit’ objet (un globe terrestre) je vais le manipuler, ma vue ne change pas. Je vais donc me déplacer dans un grand espace, mais je vais déplacer un petit objet. Il y a toujours des variations… puisque lorsque je regarde un objet dans la réalité, j’ai tendance à pencher la tête… donc déplacement léger de la caméra

Les navigations vont d’un statut passif pour l’utilisateur “je clique et je regarde l’animation” jusqu’à un statut pro-actif : “je clique, je déplace ma souris pour regarder, je cherche l’interaction avec l’objet”. C’est aussi un effort pour l’utilisateur, et l’on pourra se demander jusqu’où cet effort est envisageable.

Les 9 donc :

1 - Navigation grâce au clic sur des flèches dans l’espace
Sans doute la navigation la plus vieille et la plus évidente : l’utilisateur dispose de grandes flèches apparentes directement dans la scène. Il n’a qu’à cliquer dessus pour aller de droite ou de gauche, et changer la vue.
exemple : shopping life et certains panoramiques à 360°

2 - Navigation grâce au clic maintenu dans l’espace pour bouger la caméra
Description : Clic gauche maintenu : rotation autour d’un objet central. Clic droit maintenu : zoom sur l’objet. Deux clics en même temps maintenus : translation de la caméra en haut bas et gauche droite.

Elle correspond à la navigation classique d’une scène 3D… habituellement hors d’un navigateur. Les solutions 3D avec plugins l’utilisent beaucoup, héritage parfois des logiciels de création 3D, mais n’est-elle pas trop ardue à manipuler ?
Exemples : de manière générale, tous les systèmes de 3D par plugin dédié.

3 - Caméra virtuelle aimantée autour d’un objet cliquable (rotation)
Description : c’est sans doute l’une des mises dans l’espace la plus classique dans les sites en flash, qui a du s’inspirer de la navigation précédente en la simplifiant grâce à la prise en compte de la position de la souris dans l’espace. La mise en place technique est facile à réaliser et l’effet saisissant quoique limité.
exemple : L’exemple de la vache ou plus complexe Screenvader, Tiltviewer… etc…

4 - Vue à la 3ème personne et en 3D isométrique
Description : Navigation grâce au clic pointé pour aller là où l’on veut ou avec les flèches du clavier.
La caméra suit l’avatar. La vue rappelle les jeux vidéos, où elle a émergé dans Sim City, ou Populous il y a bien longtemps, la navigation suit ainsi les codes de jeux vidéos.
exemple : yoowalk ou smallworlds

5a - Un menu en 2D évident qui déclenche une animatique 3D
Un type de navigation très utilisé sur les sites en flash et qui permet de ne pas perdre trop l’utilisateur : un menu très clair, qui déclenche une animation ou une transition en 3D sans avoir de menu trop complexe avec des éléments à cliquer dans une perspective impossible.
exemple : Cristof Echard ou Galaxy ou MCBD

5b - L’interaction devient complexe et déclenche une animatique 3D : déplacement caméra + objets dans la scène
L’extension de la navigation précédente, on rajoute à cette navigation un déplacement des éléments en fonction de la position de la souris tout en intégrant dans l’espace des éléments de navigation cliquables. Cela donne un effet de mise en place d’éléments dans l’espace saisissant mais qui peut très vite perdre l’utilisateur dans les interactions possibles.
Exemple : UFC ou EMlab

6 - Parcours imposé de la caméra
Un peu plus difficile à saisir, la caméra qui suit un parcours imposé qui défile en fonction de la souris de la souris ou des éléments sur lesquels on clique. Reste à cliquer sur les éléments du décor.
Exemple : http://www.brinkdieckmann.de ou la campagne absolut Iaaw ou christian lacroix pour la redoute

7 - Changement de position de la caméra
Description : Dès que la caméra bouge en fonction des éléments sur lesquels on clique, le scénario devient plus complexe. Le clic sur le fond devient un moyen de revenir à la position de départ, c’est nouveau.
Exemple : tiltviewer ou Canon

8 - Le glissement pour faire bouger un objet - (caméra fixe + clic maintenu)
Description : à l’ère de la navigation tactile, le clic maintenu semble être une navigation intéressante et très pratique dans certains cas d’utilisation, même si elle ne fait pas parti des codes classiques de navigation. C’est l’inverse de la navigation en 2./ puisque la caméra ne bouge pas. Toutefois, le clic et le survol sont parfois nécessaires.
Exemples :ecodazoo ou twittearth , ou Taggalaxy

9 - Navigation au clavier qui déplace un objet ou la scène
Description : Utilisation des flèches du clavier pour évoluer dans un espace en 3D ou pour faire bouger un objet. Dans le cadre de la visite virtuelle, c’est le challenge le plus difficile à résoudre : comment naviguer autrement qu’au clavier, sans perdre complètement en lisibilité ? La souris reste nécessaire.
Exemples : Ecws.pl ou Playsmart

Finalement…
Là où les interfaces cherchent à standardiser leur comportement, la 3D dans flash provoque des bouleversements de navigation : compréhension du site, retours en arrières, objets réactifs…

Beaucoup utilisent une caméra fixe et déplacent des éléments dans l’espace. Le déplacement de la caméra reste peu utilisé au final, (certains exemples vont jusqu’à être incompréhensibles dans la navigation). Les types d’interaction se multiplient : on peut cliquer sur le fond d’une scène pour revenir au début de sa course (ce qui n’existait pas auparavant), utilisation de la molette, du rollover/clic maintenu et glissé (en html, cela était attribué à un drag & drop, du bouble clic, de la position de la souris… bref, autant de raisons d’avoir une navigation originale que brouillon !

Petit retour sur l’actualité de Source Binder, qui est un outil de création de code visuel en temps réel. Cet outil n’inclut pas seulement les librairies 3D mais aussi la gestion de la wiimote ou une librairie de gestion de la physique. Dans le même genre, nous avions vu aussi Gnero.

J’en reparle puisque quelques démos sont apparues depuis, ce qui permet de tester un peu l’outil d’édition de code en temps réel. J’éprouve un malin plaisir à modifier visuellement sans le moindre effort une scène dont la construction s’additionne tristement en ligne de code colorée. Rapide démo vidéo, je vous invite à le tester vous-même pour en tester l’efficacité :

Source Binder demo from Galdric on Vimeo.

Edit : cela s’appelle de la synchronisation, ils viennent d’en parler ce matin sur le blog de papervision…

Je viens de lire sur AsiaJin un exemple de logiciel nouveau avec la webcam + 3D. Attention, ce n’est pas du flash cette fois (peut-être à la portée de flash 10 ?).

Geisha Tokyo vient d’annoncer pour la fin d’année un nouveau logiciel de Cyber Maid : Cyber Figure Alice. La charmante demoiselle apparaitra sur des cubes sur lesquels des petits dessins sont collés. Je ne relèverais pas tout ce que l’on peut faire avec, il s’agit là d’un module de compagnie virtuelle pour les Otaku. On peut imaginer -au delà de cet exemple de réalité augmentée qui arrive sur le bureau - un ensemble de petits animaux virtuels par exemple ( comme Pet-Iz ou virtualDog , avec des options de personnalisation (habits, accessoires…), voire même des jeux.

Si les outils qui permettent le faire vous intéressent, vous trouverez par ailleurs sur la page projets d’ARToolkit une liste de réalisations avec ce moteur open source.

Dans le jeu, l’expérience n’est pas nouvelle puisqu’il y en déjà eu quelques uns sur consoles, ou sur PC comme celui-ci, ou des expérimentations assez riches dans les universités de recherche, voire sur mobile (et je ne parle pas de l’Iphone qui n’en est qu’au prototype).

Alors bien sur, cet exemple semble un peu primaire. Toutefois, croisons le avec l’expérience du même type en flash 9 que j’avais vue, ces mini-jeux pourraient bien se multiplier rapidement. Il existe d’autres exemples du même type sans flash mais avec une webcam et un PC avec cette vidéo de la BBC. Flash 8 avait rendu possible son lot de jeux interactifs à la webcam, qui sait vers quoi nous tendons dans les prochains mois avec Flash 10. Point d’installation coûteuse, beaucoup ont des webcams et un navigateur internet… reste à voir si l’usage qui en est fait se démocratise !

Il n’est pas indispensable d’aller à l’autre bout du monde pour trouver de l’inspiration, pourtant, parfois, cela fait du bien de voir ce qu’il se passe sur d’autres sphères. Sélection de widgets amusants, ou innovants sur la sphère marketing japonaise. Les exemples cités peuvent être originaux ou juste distrayants et si j’ai le temps, je ferais un comparatif avec d’autres widgets des 4 coins du monde. Je vous invite à lire ou relire les billets suivants pour compléter votre lecture, qui cite quelques très bons exemples qui n’ont pas été repris ici :

- Un widget détonnant pour un jeu DS
- Un widget qui fait pousser des plantes sur votre site.
- Un widget en vidéo chez Uniqlo
- La campagne de Nike Jasari.

Pour les exemples suivants, je les ai classé par ordre d’intérêt, du plus original/technique au plus classique. Lire la suite pour voir les widgets sélectionnés.

Lire la suite