• Porteur(s) du projet : Damien MUTI (Prof. de Numérique)
• Date : 15/03/2018
• Licence : libre !
• Contexte : projets Mars en Baroque et Frac (2017/2018)
• Fichiers :
  • comment_fabriquer_une_affiche_interactive.pdf
  • comment_fabriquer_une_affiche_interactive.pptx
  • Nouvelle version Processing (2020-…) : affiche_interactive_1.zip
  • Intégration d'un programme quelconque comme animation du programme des affiches interactives (ici Pong multiballes): Affiche_interactive_2_0
  • Ancienne version (2017-2020, incluant la version Raspbery) : exemple_programme.zip
• Lien :
  • AFFICHE TACTILE CUIVRE
  • raspberry

Ce tutoriel vous permets de concevoir de A à Z une affiche interactive du câblage à la programmation des interactions sous Processing en utilisant un PC ou un Mac.

Une version des programmes pour Raspbery est aussi proposée.

Makey-Makey :https://makeymakey.com/

Scotch de cuivre adhésif : https://www.gotronic.fr/art-cuivre-adhesif-cu155ad-20730.htm

Ordinateur + Processing : https://www.processing.org/

ou

Raspbery : http://www.raspberrypi-france.fr/

• comment_fabriquer_une_affiche_interactive.pdf
• comment_fabriquer_une_affiche_interactive.pptx

vous pouvez télécharger tous les programmes Processing sur les liens suivant :

• version 2020 : affiche_interactive_1.zip
• version 2018-2020 : exemple_programme.zip

ATTENTION, pour faire fonctionner le programme, il convient de suivre la procédure suivante:

1. Décompresser le dossier que vous avez téléchargé sur le lien suivant : exemple_programme.zip.
2. Placer le dossier “Affiche_interactive” dans votre dossier de travail.
3. Afficher le programme “Affiche_interactive.pde” dans l'interface de développement de Processing:
4. Si elle ne sont pas déjà installée sur votre machine, télécharger et installer les librairies suivantes: Video et Sound. Pour cela aller dans Sketch > Importer une librairie > Ajouter une librairie. La fenêtre suivant s'ouvre :
5. Taper “Video” dans le champ “Filter” (voir image ci-dessus), puis sélectionner la librairie “Video” à installer (normalement l'avant dernière de la liste), et enfin cliquer sur “Install”:
6. Faire de même pour l'installation de la librairie “Sound” :
7. Le programme “Affiche_interactive.pde” est désormais prêt à fonctionner correctement.

1. Lorsque le programme “Affiche_interactive.pde” est affiché dans l'interface de développement de Processing, appuyer sur la flèche (bouton “play”): une fenêtre noire apparaît.
2. Avec la sourie, cliquer sur cette fenêtre pour la rendre active.
3. Le programme est conçu pour lancer une vidéo ou un son lorsqu'on appuie sur les touches “UP”, “DOWN”, “LEFT”, “RIGHT” du clavier.

Le programme est le suivant :

/**  Affiche tactile interactive - 
*  Quand on appuie sur une touche, cela lance une image, une vidéo, une annim, un son, etc...
*/
/// librairies
import processing.sound.*;
import processing.video.*; 


// variables globales
PImage im; // une image
SoundFile son; // un son
Movie vid; // une vidéo

// bouton son image active ?
boolean image_active = false;

// bouton son actif ?
boolean son_actif = false;
float tempsDebutSon = 0; // temps du début de la musique a été joué

// bouton video active ?
boolean video_active = false;
   
void setup() {
  size(500, 500);
  noStroke();
  background(0);
  
  // initialisation des variables globales
  im = loadImage("images/chien.jpg");
  
  // chargement du son
  son = new SoundFile(this, "sons/beat.aiff");
  //println(son.duration());
  
  // chargement de la video
  vid = new Movie(this, "videos/affiche.mp4"); 
 
}

void draw() { 
 
  // gestion du son ////////////////////////////////////////
  // test du temps pendant lequel le son est joué
  //debug
  println("son_actif = "+ son_actif);
  // fin debug
  
  if (son_actif){
    float tempsEcoute = millis() - tempsDebutSon ;

   // debug 
    println("tempsDebutSon = " + tempsDebutSon);
    println("tempsEcoute = " + tempsEcoute);
    println("durée du son " + son.duration());
    // fin debug
    
    if ( tempsEcoute >= son.duration()*1000){ // si le son est fini
      son_actif = false; // bouton son_actif off
    }
  }
  
    // gestion de la vidéo ////////////////////////////////////////
    if (video_active){
      image(vid, 0, 0, width, height);
    }
    else{
      background(0); // fond noir
    }
     
     // gestion de l'image
     if (image_active){
       float x = 30 + random(-20,20); // random sur la position
       float y = 30 + random(-20,20);
       image(im,x,y,200,200);
     }
  
}

void keyPressed() {
  if (key == CODED) {
    if (keyCode == RIGHT) { // son
      if (son_actif==false){ // le son ne joue pas
        // arrêter l'autre son qui tourne éventuellement
        son.stop();
        // chargement du son 1
        son = new SoundFile(this, "sons/beat.aiff");
        son.play();
        tempsDebutSon = millis();
        son_actif = true; // bouton son_actif on
      }
      else { // le son joue
        son.stop();
        son_actif = false;
      }
    }
    if (keyCode == LEFT) { // son 2
      if (son_actif==false){ // le son ne joue pas
        // arrêter l'autre son qui tourne éventuellement
        son.stop();
        // chargement du son 1
        son = new SoundFile(this, "sons/Armstrong.wav");
        son.play();
        tempsDebutSon = millis();
        son_actif = true; // bouton son_actif on
      }
      else { // le son joue
        son.stop();
        son_actif = false;
      }
    }
    
    if (keyCode == UP) { // video 1
      if (video_active == false){ // la vidéo 1 ne tourne pas
        // chargement de la video 1
        vid = new Movie(this, "videos/affiche.mp4");
        vid.loop();
        video_active = true;
      }
      else{
        vid.stop();
        clear();
        video_active = false;
      }
    } 
    
    if (keyCode == DOWN) { // video 2
      if (video_active == false){ // la vidéo 2 ne tourne pas
       // chargement de la video 2
        //vid = new Movie(this, "videos/transit.mov");
        vid = new Movie(this, "videos/ArmstrongAlunissage.mp4");
        vid.loop();
        video_active = true;
      }
      else{
        vid.stop();
        clear();
        video_active = false;
      }
    }
  }
  if (key == ' ') { // image
      image_active = !image_active;
   } 
}

void movieEvent(Movie movie) {
  vid.read();  
}

Il est possible de rajouter des touches qui lancent des vidéos ou des sons dans la fonction keyPressed(). pour cela voir la documentation sur:

• La méthode keyPressed() : https://www.processing.org/reference/keyPressed_.html.
• L'argument key : https://www.processing.org/reference/key.html.
• Ainsi que l'argument keyCode : https://www.processing.org/reference/keyCode.html

Il est aussi possible d'introduire une animation dans le code du programme qui serait lancée lorsqu'on appuie sur une touche.

Un exemple est proposé par des étudiants de BTS DG2 en 2017-2018, Mai Quynh Nguyen, Emma BAYLION et Anaïs Aubert pour le projet FRAC 2018:

emma_mai_ana_s_frac_glmovie_2.rar.

Un autre exemple est proposé par des étudiants de BTS DG2 en 2017-2018, Mai Quynh Nguyen, Emma BAYLION et Anaïs Aubert pour le projet Mars en Baroque 2018:

affiche_interactive_mb18_mai.zip

}

Lors du câblage de l'affiche, il est important de bien choisir le coin dans lequel vont sortir les connexion des boutons.

Sur l'image précédente, les connexions sont sur le coin inférieur gauche de l'affiche (ici, sur le coin inférieur droit lorsque l'affiche est retournée).

En effet, il convient de prévoir la position de l'affiche par rapport à l'ordinateur sur lequel est connecté le Makey-Makey, afin que les câbles de connexion entre le Makey-Makey et l'affiche ainsi que le câble de connexion USB entre le Makey-Makey et l'ordinateur ne soient pas trop courts, ne passe pas au milieu de l'affiche, ou ne soient pas esthétiquement dérangeants.

Dans le cadre d'un projet conduit avec la bibliothèque de l'Alcazar en décembre 2018, avec Mme Cleyet-Merle et M Muti Desgrouas, une borne en bois contenant un ordinateur et des haut-parleurs a été placé à gauche de l'affiche. La connexion a donc été effectuée dans le coin inférieur gauche de l'affiche.

Quelques photos du projet : Câblage de l'affiche:

Positionnement de l'affiche par rapport au meuble contenant l'ordinateur et par rapport à l'image projetée par le vidéo-projecteur:

Connexion de l'affiche avec le Makey-Makey:

Positionnement final de l'affiche:

Le programme associé à cette affiche est donnée dans la partie “Exemples de programmes” ci-dessous. Il prend en compte la taille de la vidéo par rapport à la taille de la fenêtre d'affichage.

Voici un exemple de programme réalisé par Mai Quynh Nguyen, Emma BAYLION et Anaïs Aubert pour le projet FRAC 2018, en BTS DG2:

• emma_mai_ana_s_frac_glmovie_2.rar

Un autre exemple est proposé par des étudiants de BTS DG2 en 2017-2018, Mai Quynh Nguyen, Emma BAYLION et Anaïs Aubert pour le projet Mars en Baroque 2018:

• affiche_interactive_mb18_mai.zip

Voici l'ensemble des programmes développés par Sevan Papazian, alors étudiant de BTS DG2 en 2017-2018, sur les projets Frac 2018 et Mars en Baroque 2018:

• mars_en_baroqe_.zip
• affiche_interactive_sevan_1.zip

Dans le cadre d'un projet conduit avec la bibliothèque de l'Alcazar en décembre 2018, avec Mme Cleyet-Merle et M Muti Desgrouas, une affiche interactive a été développée sur la thématique de mai 68. Le programme proposé permet de gérer la différence de taille entre la fenêtre d'affichage et la vidéo. Il permet entre autre d'ajuster la taille de la vidéo à la taille maximale de la fenêtre d'affichage, si la taille de la vidéo est plus grande que celle de la fenêtre d'affichage. Il permet aussi de centrer la vidéo si celle-ci a une taille plus petite que celle de la fenêtre d'affichage. Le programme est le suivant :

• affiche_interactive_3.zip

Dans le cadre de son Macro Projet, Margot Goutières propose d'associer un son aléatoire et une vidéo aléatoire à chaque bouton. Chaque bouton est donc associé à un ensemble de son et de vidéo qui sont lues et mémorisé et mémorisé de façon automatique. Lorsqu'on appuie sur un bouton, le programme sélectionne aléatoirement un son et une vidéo dans les ensembles précédents et les joue.

Le programme correspondant est le suivant :

• Affiche_Interactive_Poesie_Marseille_Freebox_Damien
• Affiche_Interactive_Poesie_Marseille_GD

Un programme Processing (sketch) est une classe particulière de Processing. Il est donc possible de l'intégrer dans n'importe quel programme. Pour cela il est nécessaire de bien comprendre les équivalences suivantes :

• Les variables globales d'un sketch représente les attributs de la classe correspondante
• La méthode setup() d'un sketch représente le constructeur de la classe correspondante. En effet, c'est dans le setup() que les variables globales (donc les attributs de la classe) sont initialisées. ATTENTION : il faudra éliminer toutes les commande d'initialisation des paramètres d'affichage notamment size().

Une fois la classe (MonAnim) définie dans le programme Affiche_Interactive, il suffit de:

• un nouvel objet “monAnimation” de type MonAnim, dans les variables globales du sketch principal.
• Il faut ensuite instancier la classe dans le seutp() du sketch principal.
• Il faut enfin appeler la méthode draw() du nouvel objet monAnimation précédemment créé, lorsqu'une touche particulière est appelée.

Le programme suivant donne une proposition d'intégration du programme Pong multiballes dans le programme des affiches interactives :

• Affiche_interactive_2_0

La transposition du programme sous Raspbery n'est pas immédiate. En effet, la librairie classique “Video” de Processing, ne fonctionne pas sur le système d'exploitation Raspbian (2018) du Raspbery. Les versions suivante de Processing sur Raspbian le permettront sans doute, mais actuellement, ce n'est pas le cas. Il est donc nécessaire d'utiliser une librairie spécifiquement développée pour le raspbery : GLVideo, qui est encore à la version béta. Voir : https://github.com/gohai/processing-glvideo .

Pour afficher une vidéo en utilisant la librairie GLVideo le raspbery, il convient d'utiliser une vidéo très légère (moins d'1MO) avec une taille d'image réduite, sans certitude de succès.

Une alternative consiste à transformer la vidéo/gif qui doit être affichée en sa séquence d'images correspondante, puis à charger et afficher de façon récursive chaque image les une après les autres dans la boucle draw() de Processing qui tourne généralement à 30 images/seconde.

Plusieurs logiciels permettent de réaliser cette opération:

• After Effect (propriétaire).
• Avidemux (libre) : http://www.commentcamarche.com/download/telecharger-34055660-avidemux. Sous LInux, il est possible d'installer ce logiciel via le Gestionnaire de logiciel.
• VirtualDub (libre) : http://www.virtualdub-fr.org/telechargement
• VirtualdubMod (libre) : http://www.clubic.com/telecharger-fiche45486-virtualdubmod.html
• ffmpeg (Libre) : https://www.lemondedustopmotion.fr/news/voir/7/Transformer_une_squence_dimages_en_une_vido_avec_ffmpeg

Enfin, une dernière possibilité est d'utiliser le programme processing suivant “fait sur mesure” :

/* Programme permettant de convertir une vidéo en une séquence d'image au format .jpg.
D'autre formats sont disponibles (TIFF, TARGA, et PNG). Voir l'aide en ligne de la méthode save() de la classe PImage (https://www.processing.org/reference/PImage_save_.html).
Précaution d'emploi: il faut placer la vidéo à déployer dans le dossier "data" du sketch et remplacer le fichier d'exemple "transit.mov" par votre fichier vidéo à la ligne 19.

*/

import processing.video.*;

int indiceImage = 0; // numéro de l'image à enregistrer issue de la vidéo


Movie movie;

void setup() {
  size(640, 360);
  background(0);
  // Load and play the video in a loop
  movie = new Movie(this, "transit.mov");
  movie.play();
}

void draw() {
 
  image(movie, 0, 0, width, height); // affichage de l'image en cours issue de la vidéo

  String nomImage = "data/Sequence/image_"+indiceImage+".jpg"; // nom de l'image à enregistrer
  movie.save(nomImage); // sauvegarde de l'image
  indiceImage ++; // incrémentation de l'indice de l'image issue de la vidéo
  
}

void movieEvent(Movie m) {
  m.read();
}

le programme et les fichiers vidéo de cet exemple sont téléchargeable ici :

video2sequenceimages.zip

L'utilisation d'un Raspbery Pi est très cohérent dans la médiation de l'affiche interactive dans un lieu d'exposition (musée, bibliothèque, etc.). En effet, le Raspbery tient peu de place et peut être facilement disposé de façon discrète comparé à une tour d'ordinateur fixe ou un ordinateur portable…

Comme nous l'avons vu dans la partie précédente, le programme de gestion des interactions utilisant un programme Processing sur un Raspbery Pi 3B prend énormément de ressources et est lent à l'exécution. D'autre part, la vidéo est très difficilement gérable. Une des solutions est de programmer l'algorithme d'interactivité sous Python qui est un langage particulièrement adapté pour le Raspbery…

Convention : On appelle “média”, une image, un son, une vidéo, ou une animation à jouer/afficher.

L'enjeu de l'algorithme est de détecter les interactions “clavier” (c'est-à-dire lorsqu'on appuie sur une touche du clavier). Ainsi, lorsqu'on appuie sur une touche, il faut :

• stopper toutes les médias (son, vidéo, image affichée) qui sont en train de jouer.
• identifier le média correspondant à la touche:
  • Si le média est déjà en train de jouer, alors stopper le média,
  • sinon, jouer le média.

Kivy est une bibliothèque libre et open source pour Python, utile pour créer des applications tactiles pourvues d'une interface utilisateur naturelle. Cette bibliothèque fonctionne sur Android, iOS, GNU/Linux, OS X et Windows. Elle est distribuée gratuitement et sous licence MIT. Pour plus d'information, voir l'article sur la librairie Kivy de Wikipaedia.

un tutoriel succinct est disponible sur les liens suivants :

• Site officiel
• Uko

L'installation de kivy n'est possible que si “python3” est installé sur le Raspbery. Normalement, sur le système d’exploitation Raspbian, Python3 est installé par défaut. Sinon, taper dans un Terminal la ligne de commande suivante :

 sudo apt-get install python3 

Il existe énormément d'éditeur pour coder. Mu-editor est un des environnement les plus pratiques. La procédure d'installation de Mu-editor sur Raspbian est disponible sur le lien suivant :

• How to install Mu on a Raspberry Pi

Sinon, taper directement dans un Terminal la ligne de commande suivante:

sudo apt-get install mu-editor

De manière générale, vous pouvez installer la librairie Kivy sur le site officiel en sélectionnant votre système d'exploitation :

• Kivy/Download

Dans le cas du Raspbery Pi, il faut choisir le système d'exploitation “Raspbery Pi” :

Le manuel d'installation se trouve sur le lien suivant :

• https://kivy.org/doc/stable/installation/installation-rpi.html

Vous pouvez aussi lancer les lignes de commandes suivantes dans un Terminal :

sudo apt install python3-pip build-essential git python3 python3-dev ffmpeg libsdl2-dev libsdl2-image-dev libsdl2-mixer-dev libsdl2-ttf-dev libportmidi-dev libswscale-dev libavformat-dev libavcodec-dev zlib1g-dev
sudo apt install libgstreamer1.0 gstreamer1.0-plugins-base gstreamer1.0-plugins-good
sudo pip3 install ffpyplayer
sudo pip3 install cython
sudo pip3 install git+https://github.com/kivy/kivy.git@master

Plus simplement :

1. Télécharger et décompresser le fichier suivant : install_kivy_on_rpi.sh . Vous retrouvez ce fichier sur la plateforme GitHub d'Olivier Boesch.
2. Enregistrer install_kivy_on_rpi.sh dans votre dossier de travail sur le Raspbery Pi.
3. Ouvrir un terminal et changer le chemin d'accès pour vous placer dans votre dossier de travail dans lequel se trouve le fichier install_kivy_on_rpi.sh. Par exemple :

    cd Documents/Damien/Python_Olivier_Boesch/affiche-interactive-master/ 

4. lancer la commande d'installation de toutes les dépendances détaillées dans le script ci-dessus en tapant dans la console :

    sh install_kivy_on_rpi.sh 

Le code Python permettant de gérer les interactions clavier et de lancer un media grace à la librairie kivy a été développé par Olivier Boesch, professeur de Physique et Informatique au lycée Saint-Exupéry à Marseille. Le code est disponible sur la plateforme GitHub sur le lien suivant :

• https://github.com/olivier-boesch/affiche-interactive/

Télécharger l'ensemble du projet en cliquant sur “Clone or Download” :

Après avoir décompressé le dossier “affiche-interactive-master”, aller dans le sous dossier “src” (source): Ce dossier est composé de :

• main.py : programme principal en Python à lancer
• afficheinteractive.kv : script kivy permettant le prototypage de l'interface visuelle
• key_inspector.py : programme en Python permettant de visualiser la touche qui est pressée. Ce programme est utile car la librairie Kivy est conçue pour les claviers QWERTY et permet d'être certain du code de la touche qui est véritablement détecté…
• media : dossier contenant les images, les sons et un fichier config.json

Un fichier JSON (JavaScript Object Notation) est un format de données textuelles dérivé de la notation des objets du langage JavaScript. Il permet de représenter de l’information structurée. Pour plus d'information voir les liens suivants :

• Wikipedia
• json.org

Dans le cas présent, ce fichier JSON permet d'associer à une touche donnée (“a”, “down”, “up”, etc.), un type de média (vidéo, son, image), via la variable media_type, et un chemin d'accès dans la mémoire de l'ordinateur (“media/star_trails.mp4”) via la variable src :

{
    "a": {"media_type": "video",  "src": "media/text.mp4"},
    "z": {"media_type": "image",  "src": "media/len_full.jpg"},
    "e": {"media_type": "sound",  "src": "media/yeah.mp3"},
    "up": {"media_type": "sound",  "src": "media/ohno.mp3"},
    "down": {"media_type": "image",  "src": "media/ada.jpg"},
    "left": {"media_type": "video",  "src": "media/sample.mp4"},
    "right": {"media_type": "video",  "src": "media/star_trails.mp4"},
    "r": {"media_type": "image",  "src": "media/hud.png"}
}

Pour adapter le programme à l'interactivité prévue pour votre affiche, il faut inclure dans le dossier “media” vos images, vos vidéos et vos sons :

Supposons que j'inclue une vidéo intitulée “ma_video.mp4” et que je souhaite l'associer à la touche “up”. Il faudra que j'inclue ou que je modifie la ligne suivante dans le fichier config.json :

{ ...
    "up": {"media_type": "video",  "src": "media/ma_video.mp4"},
  ...
}

On procède de la même manière avec les autres médias.

Le code est composé de 2 parties :

• main.py : Programme en Python permettant de gérer l'interactivité via les touches. Son rôle est de lancer un média (vidéo, son, image) lorsqu'une touche donnée est pressée.
• affiche interactive.kv : Programme en langage Kivy permettant d'organiser l'interface graphique dans lequel sont affichés les médias.

le programme main.py est composé des classes suivantes :

• class MediaManager(Widget): Permet de capturer chaque événement clavier. Analyse le fichier config.json et associe la touche détectée au media (image, son, vidéo) correspondant. La classe transmet ensuite le chemin d'accès du média (image ou vidéo) à son “widget” correspondant. Il s'agit d'une “étiquette” le caractérisant de façon unique. Le son est, quant à lui, joué directement.
• class VideoScreen(Screen): Permet d'afficher les vidéos.
• class ImageScreen(Screen): Permet d'afficher les images
• Builder.load_file('afficheinteractive.kv'): permet de charger le fichier Kivy (kv) permettant d'organiser l'interface graphique dans lequel sont affichés les médias. Remarque: il s'agit d'une instruction, mais pas d'une classe…
• class AfficheApp(App): Classe principale du programme. Elle appelle dans le bon ordre les classes précédentes pour gérer de façon correcte le lancement des médias lors des événements clavier.
• if name == 'main': AfficheApp().run(): Permet de lancer l'application.

Pour lancer le programme, il faut :

• ouvrir un Terminal :
• se placer dans le dossier contenant le fichier main.py :

    cd Documents/Damien/Python_Olivier_Boesch/affiche-interactive-master/src/   

• lancer l'application en tapant l'instruction suivante :

   python3 main.py    

Le programme précédent, basé sur la librairie “Kivy” est très fonctionnel. Il nécessite, cependant, d'avoir une très bonne maîtrise du code pour être totalement compris.

Il existe des librairies plus simples d'utilisation pour développer sous python l'algorithme de gestion des événements liés à l'affiche interactive. La librairie “Pygame”, qui a été implémentée pour développer des jeux vidéos en 2D, est une librairie très simple d'utilisation. Elle est largement utilisée au lycée pour des applications multiples. Généralement, les programmes associés sont effectués sur une interface de développement (IDE) très pédagogique appelé “Edupyhthon”.

Dans les premières versions de Pygame, la vidéo était prise en charge. Cependant, les dernières mises à jour de cette librairie ont évacué la gestion de la vidéo dans les années 2015 (voir le lien suivant sur le forum d'OpenClassroom).

Par conséquent, le programme proposée dans cette partie ne gère que :

• l'affichage d'une image et
• le lancement d'un son,
• éventuellement le lancement d'une animation (en utilisant les fonctionnalités de Pygame, mais qui nécessite un niveau de programmation relativement élevé comparé à ce qui existe sous Processing). Il y a aussi la possibilité d'appeler sous Python une librairie Processing qui permet de réinvestir les programmes développés sous Processing.

La page de présentation officielle de la librairie Pygame est accessible sur le lien suivant :

• Pygame.org

Vous y trouverez :

• Les dernières mises à jour,
• La documentation (voir après),
• La procédure d'installation (voir partie ci-dessous),
• Un certain nombre de tutoriels et d'exemple d'utilisation,
• etc.

La procédure d'installation est disponible sur le lien suivant :

• installation de Pygame

L'installation de Pygame sus un Rapsbery s'effectue en langage Shell dans une console de commande. Il vous suffit de suivre scrupuleusement les instructions données pour :

• Installer Python 3. Normalement, cette procédure est inutile car la distribution du système d'exploitation Raspbian (dérivée de Debian) inclue déjà Python 3.
• Installer “pip”, un utilitaire très pratique pour installer et inclure des librairies python. Vous pourrez installer pip en suivant le tutoriel suivant:
  • pip installation
• Installer la librairie Pygame à l'aide de l'utilitaire “pip”.

Une documentation très complète des différentes fonctionnalités de la librairie Pygame est donnée sur le site officiel sur le lien suivant :

• Documentation Pygame

Vous y trouverez des explications sur :

• l'installation de Pygame (déjà abordée dans la partie précédente),
• des tutoriels et des exemples,
• le détail de toutes les fonctionnalités de la librairie :
  • gestion de l'affichage de l'espace de dessin (idem que Processing)
  • gestion de l'affichage des images
  • gestion de la couleur
  • gestion des événements clavier, d'un joystick,
  • etc.

Un tutoriel sur l'utilisation de la librairie Pygame est proposé (par Johan Segura, Pr. de Maths et moi-même) sur le site “MathSoup” dans le lien suivant :

• Documentation Pygame

Convention : On appelle “média”, une image, un son (au format .wav), ou une animation à jouer/afficher. Attention :Nous excluons ici l'utilisation de la vidéo.

L'enjeu de l'algorithme est de détecter les interactions “clavier” (c'est-à-dire lorsqu'on appuie sur une touche du clavier). Ainsi, lorsqu'on appuie sur une touche, il faut :

• identifier le média correspondant à la touche:
  • Si le média est déjà en train de jouer, alors stopper le média,
  • sinon, jouer le média.

Le code en Python est le suivant :

#importer les librairies
import pygame, sys
from pygame.locals import *
#from pygame import *
from pygame import mixer
#from pygame import music

#initialiser tous les modules de la librairie pygame
pygame.init()
#pygame.mixer.pre_init(44100, 16, 2, 4096) #frequency, size, channels, buffersize
#pygame.mixer.init(44100, -16, 2, 2048)
pygame.mixer.init()




## variables globales
image_active = False #gestion des images
son_actif=False #gestion du son
son_isPlaying = False # le son est en train de jouer

# charger le nom des sons
nomDuSon = []
nomDuSon.append("data/Sons/wav/ohno.wav")
nomDuSon.append("data/Sons/wav/tiouh.wav")
nomDuSon.append("data/Sons/wav/Kassav - Sye bwa.wav")

#charger le son i
son = pygame.mixer.Sound(nomDuSon[2])

#Ouverture de la fenêtre Pygame
fenetre = pygame.display.set_mode((640, 480))

#Chargement et collage du fond
fond = pygame.image.load("data/Images/background.jpg").convert()
fenetre.blit(fond, (0,0))

#Chargement et collage du personnage
perso = pygame.image.load("data/Images/perso.png").convert_alpha()

#Rafraîchissement de l'écran
pygame.display.flip()

#BOUCLE INFINIE
continuer = 1
while continuer:
    #afficher l'image du fond
    fenetre.blit(fond, (0,0))
    #tester tous les événements clavier
    for event in pygame.event.get():
        if event.type == QUIT: # croix ou "Stop"
            continuer = 0
            pygame.display.quit()#ferme la fenêtre
            sys.exit() #arrête le programme

        if event.type == KEYDOWN:
            if event.key == K_UP:#lancer/éteindre un son
                print("K_UP")
                print(son_isPlaying)
                if son_isPlaying == False : # si le son ne joue pas : lancer le son et mettr ela variable son_isPlaying à "True"
                    son.play()
                    son_isPlaying = True
                else :
                    son.stop()
                    son_isPlaying = False

            if event.key == K_DOWN: #affichage des images
                image_active = not image_active
                print("image_active",image_active)
                print("KEY_DOWN")

    if image_active : #teste si on doit afficher l'image
        fenetre.blit(perso, (10,10))

    #Rafraîchissement de l'écran
    pygame.display.flip()

    #vérifier si un son joue
    son_isPlaying = pygame.mixer.get_busy()

Vous pouvez le télécharger directement sur ce lien, comprenant aussi tous les médias nécessaires à son bon fonctionnement: affiche_interactive_python_tonerkebab.zip