Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

wiki:ecoles:lclc:2017:seance4 [2019/12/03 10:38] (Version actuelle)
Ligne 1: Ligne 1:
 +====== 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 [[https://​fr.wikipedia.org/​wiki/​Hayao_Miyazaki|Hayao Miyazaki]] avec [[https://​fr.wikipedia.org/​wiki/​Mon_voisin_Totoro|Mon voisin Totoro]] ou encore [[https://​fr.wikipedia.org/​wiki/​Michel_Ocelot|Michel Ocelot]] avec [[https://​fr.wikipedia.org/​wiki/​Kirikou_et_la_Sorci%C3%A8re|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:
 +
 +| {{youtube>​daQZ5J5YbQg width=250}} | {{youtube>​HyWkB1SYDMs width=250}} | {{youtube>​HB5nJB9R8Qw width=250}} |
 +
 +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 [[https://​fr.wikipedia.org/​wiki/​Douglas_Engelbart|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é [[https://​fr.wikipedia.org/​wiki/​Eye_tracking|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 :)
 +
 +|   ​{{https://​upload.wikimedia.org/​wikipedia/​commons/​c/​cc/​SRI_Computer_Mouse.jpg?​width=400|Prototype de souris de D. Engelbart}} ​  ​| ​  ​{{http://​ssi-tpe-souris.e-monsite.com/​medias/​images/​s.png?​width=600}} ​  |
 +|   ​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:
 +
 +{{url>​https://​trinket.io/​embed/​python/​9b9d43e4ab 100%,450px noscroll noborder}}
 +
 +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:
 +  - si l'on ajoute l'​instruction ''​background(0)''​ au tout début de ''​draw''​. Que se passe-t-il ? Pourquoi ?
 +  - 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 =====
 +
 +|< 100% 300px - 300px >|
 +^ Tableau original ^ Objectif ^ Ré-interprétation interactive ^
 +|{{ :​wiki:​ecoles:​lclc:​2017:​img:​blackcross-johnmccracken.jpg?​300 |}} | Pour cette nouvelle œuvre, nous allons revisiter un tableau intitulé //23// créé par [[https://​en.wikipedia.org/​wiki/​John_McCracken|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 ...\\ | {{url>​https://​trinket.io/​embed/​python/​5b95206282?​outputOnly=true&​runOption=run 100%,250px noscroll noborder}} |
 +
 +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 ...
 +
 +{{url>​https://​trinket.io/​embed/​python/​f711f3f09c 100%,470px noscroll noborder}}
 +
 +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:
 +
 +{{url>​https://​trinket.io/​embed/​python/​cdecbcb305 100%,560px noscroll noborder}}
 +
 +
 +===== Œuvre 6 : Mondrian =====
 +
 +|< 100% 300px - 300px >|
 +^ Tableau original ^ Objectif ^ Ré-interprétation interactive ^
 +| {{ :​wiki:​ecoles:​lclc:​2017:​img:​mondrian.png?​300 |}} | 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é. | {{url>​https://​trinket.io/​embed/​python/​fbd594c29f?​outputOnly=true&​runOption=run 100%,400px noscroll noborder}} |
 +
 +{{url>​https://​trinket.io/​embed/​python/​2ab4f9077f 100%,510px noscroll noborder}}
 +
 +===== 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)''​ où ''​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:
 +
 +{{url>​https://​trinket.io/​embed/​python/​e2f8fac9c6 100%,420px noscroll noborder}}
 +