Thème 4 : Créer une oeuvre interactive

Maintenant que nous avons découvert la technique permettant de créer des animations, serait-il possible d'aller plus loin ? De tenter de dépasser ce que réalisent de grands artistes comme Hayao Miyazaki avec Mon voisin Totoro ou encore Michel Ocelot avec Kirikou ?

Probablement oui, comme l'ont déjà exploré les créateurs de jeux vidéos, qui dès le début ont construit des mondes qui prennent vie grâce aux animations, mais aussi et surtout où le joueur peut interagir avec des éléments de ce monde. Ainsi, la programmation nous permet de proposer une dimension inaccessible au 7ème art (le cinéma ;)): l'interactivité !

Avec processing, de multiples possibilités d'interactivité sont possibles, justement parce que ce logiciel a été développé pour faciliter la création d’œuvres hybrides, souvent des performances mêlant informatique et monde réel comme l'illustre ces vidéos:

N'ayant pas de salle blanche avec système de vidéo-projection sous le coude, nous allons nous rabattre sur des interactions un peu plus simples à utiliser avec un simple ordinateur: la souris et le clavier :)

Gestion de la souris

La souris est un périphérique fantastique (merci M. Engelbart !) qui permet de savoir où le regard de l'utilisateur se fixe sur l'écran … sans avoir besoin d'un dispositif complexe appelé occulométrie (ou //eye tracking// in english) qui est cependant devenu maintenant courant depuis que les ordinateurs (portables et smartphones) embarquent des caméras. Mais du temps de M. Engelbart, les ordinateurs étaient bien moins véloces, et le principe de la souris (l'objet matériel que vous manipulez avec votre main) et du pointeur (la représentation de la position de la souris sur l'écran) a permis le développement des interfaces graphiques, bien plus agréables pour les utilisateurs que la ligne de commande :)

Prototype de souris de D. Engelbart
Prototype de souris de D. Engelbart (1968)   Principaux éléments d'une souris optique

La souris est un périphérique permettant de multiples interactions:

  • on peut la déplacer sur son support pour déplacer le pointeur à l'écran,
  • on peut appuyer sur ses nombreux boutons (droite, gauche, parfois même central),
  • et l'on peut parfois même faire défiler (scroll) une petite molette.

Avec processing, il est possible d'obtenir ces informations sur l'état de la souris et de les utiliser pour influencer notre dessin et/ou notre animation. Dans l'exemple ci-dessous, nous allons nous intéresser dans un premier temps au déplacement de la souris. Pour cela, on dispose des instructions mouse.x et mouse.y, qui comme l'intuition le laisse penser permet de récupérer la coordonnée en x et en y où se trouve actuellement la souris :)

Vérifions cela à l'aide du petit programme suivant:

Comme vous le constatez, parce que l'on a placé les instructions dessinant le carré à l'intérieur de draw, à chaque déplacement de la souris, une nouvelle image est calculé et un nouveau carré est ajouté au tableau.

Faisons quelques modifications pour expérimenter un peu:

  1. si l'on ajoute l'instruction background(0) au tout début de draw. Que se passe-t-il ? Pourquoi ?
  2. et si l'on ajoute maintenant l'instruction rect(y, x, 20, 20) juste en dessous de l'instruction rect(x, y, 20, 20) … amusant, non ?

Œuvre 5 : Black Cross par John McCracken

Tableau original Objectif Ré-interprétation interactive
Pour cette nouvelle œuvre, nous allons revisiter un tableau intitulé 23 créé par John McCracken en 1964.

Dans un premier temps, l'objectif consiste à reproduire le tableau tel qu'il est, c'est-à-dire une image fixe.
Afin de vous aider un peu, un squelette est proposé pour vous faciliter la tâche :)

Dans un second temps, nous allons utiliser les coordonnées de la souris pour faire varier la couleur
des formes noires dans l’œuvre initiale ! Appuyez sur le bouton Run à droite et déplacez
la souris sur l’œuvre pour voir ce qu'il se passe …

Pour déterminer la couleur, voici une proposition: mouse.x en composante rouge, mouse.y en composante verte et (mouse.x + mouse.y) % 255 en composante bleue. L'opérateur % est appelé modulo et même si cela ne vous dit peut-être rien, vous le connaissez déjà :) Cela correspond au reste de la division entière. Exemple: 10/2 = 5 et cela tombe juste, donc il ne “reste rien”. Par contre, 10/3 donne 3, mais il reste un petit quelque chose lorsque l'on pose la division (1). L'opérateur modulo permet de calculer directement ce reste. Mais dans notre cas, on s'en sert juste pour que la somme ne soit jamais supérieur à 255 …

Maintenant que nous savons utiliser la position de la souris pour rendre nos œuvres interactives, intéressons-nous à ses boutons. De la même manière qu'il est possible de savoir où se trouve la souris, on peut tester si un bouton de la souris est actuellement appuyé (mouse.pressed) et si c'est le cas, déterminer quel bouton (mouse.button) est activé (LEFT ou RIGHT).

Regardons tout cela avec le petit exemple ci-dessous qui réagit au clic de souris en dessinant différentes figures à l'endroit où se trouve la souris au moment du clic:

Œuvre 6 : Mondrian

Tableau original Objectif Ré-interprétation interactive
Voici un morceau d'un tableau de Mondrian. Dans un premier temps,
essayons de reproduire le même dessin. Ensuite, nous utiliserons
la souris pour changer la couleur du rectangle rouge, en vert ou
bleu en fonction du bouton utilisé.

Petite synthèse :)

Nous avons vu dans cette séance que pour créer une animation, il est nécessaire de fabriquer au fur et à mesure des images fixes qui en étant affiché à grande vitesse, créent l'illusion d'une animation. Ainsi, à partir de maintenant, nos programmes seront maintenant organisés en deux parties: le setup dans lequel on effectue tous les réglages initiaux pour notre tableau et le draw dans lequel on explique comment créer une image. Ensuite, processing appelle automatiquement un très grand nombre de fois draw qui recalcule une nouvelle image lors de chaque appel. Il est possible de régler la vitesse de raffraichissement à l'aide de frameRate(nbImages)nbImages correspond au nombre d'images calculées par seconde (plus ce nombre est grand, plus l'animation est fluide … sauf si vous avez beaucoup de calcul pour créer une image !).

Le second point très important exploré aujourd'hui concerne la gestion de l'interactivité, c'est-à-dire de la prise en compte de ce que fait l'utilisateur. Nous nous sommes concentrés dans un premier temps sur la gestion de la souris en découvrant qu'il est possible de savoir où elle se trouve précisément sur le tableau (mouse.x et mouse.y) et si l'utilisateur est en train d'appuyer sur l'un de ses boutons (mouse.pressed, puis LEFT ou RIGHT pour déterminer quel bouton est sollicité). Ces nouvelles informations nous ouvrent de nombreuses possibilités pour créer des tableaux dynamiques (grace à l'animation) et interactifs (grace à la gestion de la souris) :)

Expérimentez ces nouveaux pouvoirs de création en réalisant ce que vous souhaitez dans l'oeuvre libre ci-dessous: