Introduction
Je participe depuis son lancement à la formation Learning Creative Learning donnée par le MIT Medialab. Dans le cadre de cette formation il nous a été demandé d’animer un cours, sur le sujet de son choix.
Il se trouve que j’avais participé la semaine précédente à une formation Kawenga intitulée Interactivité Temps Réel / Initiation à Processing (formation animée par Zandrine CHIRI).
J’ai choisi de présenter une application simple de l’interaction temps réel avec Processing, façon « Creative Coding » : dessiner avec un clavier de piano.
Creative Coding et Processing
De façon générale le « Creative Coding » consiste à utiliser la programmation d’un ordinateur dans un but artistique, pour créer des effets visuels ou sonores, des jeux, des installations interactives, …
Il existe plusieurs outils dans ce domaine :
- par programmation : processing, openFrameworks, PureData
- outils graphiques : Isadora, Max MSP, Usine, SuperCollider, Scratch
J’ai fait le choix de travailler avec Processing, sur lequel je m’étais personnellement auto-formé depuis quelques temps.
« Processing est un langage de programmation Open Source et un environnement pour les gens qui veulent créer des images, des animations et des interactions. » J’ajouterais aussi « du son ».
Processing tourne sur PC/Mac/Linux, il est gratuit.
Prérequis
Pour cet exercice, côté matériel, nous aurons besoin :
- d’un clavier MIDI,
- d’un convertisseur MIDI USB,
- d’un câble MIDI,
- d’un ordinateur.
Côté logiciel :
- du logiciel Processing
Un programme Processing est toujours composé des éléments suivants :
- import de librairies
- déclaration de variables globales
- une fonction setup() : initialiser tout ce qui doit l’être au début du programme
- une fonction draw() : cette fonction est appelée en permanence par Processing, c’est ici qu’on dessine
- une ou plusieurs fonctions callbacks de capture d’événements : souris, clavier, appui sur une touche de piano
Dessiner avec un piano
Règles du jeu
On démarre avec une scène blanche.
Lorsqu’une touche de piano est enfoncée :
- on dessine un signe à un endroit aléatoire de la scène
- la taille du signe dépend de la pression sur la touche
- on dessine une ligne entre le signe précédent et le nouveau signe
2 enfants – 2 côtés du piano – 2 côtés de la scène
Pour rendre le jeu un peu plus attrayant pour mes 2 petits j’ajoute la règle suivante :
- si la touche est frappée côté gauche du piano, le signe est dessiné côté gauche de la scène
- inversement, si la touche est frappée côté droit du piano, le signe est dessiné côté droit de la scène
Messages MIDI
Tout est expliqué ici : MIDI Messages.
Le clavier MIDI envoie des messages à chaque fois qu’une touche est enfoncée.
Un message MIDI est composé :
- d’un statut (sur 1 octet)
- de données additionnelles (sur 2 octets)
Le seul message qui nous intéresse se nomme « Note On » :
- Statut = 10010000 (canal 0) = 0×90 (héxadécimal)
- La note et la puissance sont stockées dans les 2 octets de données additionnelles
C’est parti
A partir de là on dispose de toutes les informations utiles pour programmer le jeu.
Le code Processing se trouve ici.
Aller plus loin
Ce petit exemple montre comme il est simple de connecter un instrument et un ordinateur et de les faire interagir.
Voici quelques idées pour aller plus loin :
- raffiner le dessin (courbes de Béziers, images, couleurs)
- plus de joueurs
- capturer d’autres types d’événements (clavier, souris, caméra, son, …)
- dans l’autre sens : faire jouer le piano en dessinant
- se connecter à d’autres personnes par internet
- le faire en live ! (concerts, spectacles)
Je découvre les possibilités d’interactions temps-réel de Processing et suis intéressé par tout retour si vous avez vous-même connecté un instrument de musique, ou autre.
