{"partition": "head_middle", "source_domain": "www.faitmain.org", "digest": "sha1:EM5XLXUQT7RAGOTHQ4RDQ7CQGKDYTQ4J", "path": "/lustre/fsn1/projects/rech/qgz/uzq54wg/processed_redpajama/base_processing/output/fr/2016-26/000_00004.parquet"}
The Midst ?
Art | informatique Niveau: Vulgarisation Bérenger Recoules
Un arbre récursif The Midst est un projet de art-game se jouant en ligne : comme cela arrive
souvent aux personnages principaux de jeux vidéo, la petite-amie de Héro s'est
fait enlever ; cette fois ci ce sont de méchants pixels blancs qui ont fait le
coup (the white meanies) ; en conséquence Héro est condamné à errer dans un
labyrinthe de fenêtres pop-up en noir et blanc truffé d'obstacles, dans le but
de dénicher une sortie et d'alors pouvoir peut-être retrouver sa dulcinée. Ce jeu se décline aussi en un atelier et une série de ressources en ligne
permettant de découvrir les technologies à l’œuvre : beaucoup de processing.js pour la création graphique et l'animation, une
généreuse portion de Webpd pour la
synthèse sonore en temps réel, un soupçon de HTML5 et une pincée de jQuery pour faire en sorte que tout cela fonctionne dans une
page web. C'est du coup l'occasion de comprendre comment implémenter une
succession de petits jeux simples allant du pong au casse-brique ... Le code complet du jeu est disponible et consultable en ligne à cette adresse :
https://github.com/b2renger/TheMidst Au programme et en vrac : système à particules, physique et vecteurs pour
l'animation, interaction, tweening ,
collisions non orthogonales, synthèse sonore, musique générative... Du point de vue des technologies on utilise des outils libres et gratuits et
qui disposent d'une large communauté d'acteurs internationaux. Cet article va
se concentrer sur webpd qui n'est pas encore complètement documenté alors que
processing.js , lui, dispose déjà d'une communauté vibrante et d'une multitude
d'exemples de code en ligne. Pour rappel, Processing est un langage de
programmation apparu en 2001 au MIT, qui a pour vocation de faciliter
l'apprentissage de la programmation objet en l'appliquant au dessin, à
l'animation, à l'interaction et à la visualisation de données. Aujourd'hui il y
a une très large communauté internationale et le langage permet aussi bien de
développer pour des ordinateurs, que pour des téléphones Android ou encore des
navigateurs web. Pure Data est un langage de
programmation visuelle né en 1996, il est la résultante d'une partie des
travaux de Miller Puckette à l'IRCAM : c'est le petit frère libre et gratuit de
MAX/MSP. Il permet de créer du code en reliant des boîtes entre elles à l'aide
de fils : c'est un langage de programmation très utilisé pour la création
sonore, mais aussi graphique ainsi que pour l'interaction. La Structure du jeu et du code ¶ Le code du jeu est structuré de manière assez simple. Pour chaque fenêtre nous
avons recours à un canvas html qui va exécuter un sketch processing ainsi qu'un
patch Pure Data. Deux pages html sont présentes, index.html et
level-template.html qui font appel a différents scripts JavaScript
permettant d'aller chercher les fichiers level*.pde (pour l'animation) et
level*.pd (pour le son). Écran d'accueil Lorsqu'on clique sur le bouton "start" une fenêtre pop-up va s'ouvrir : c'est
le premier niveau incarné par la fenêtre "level-template.html" : à partir de ce
moment là toutes les ressources seront chargées dans cette même fenêtre de
200x200 pixels. On se déplace ainsi de niveau en niveau en cherchant où sont
les murs et où sont les passages vers les cases adjacentes. La case de début du jeu. La base de code produite au niveau un permet d'avoir une ellipse (notre
personnage principal), qui est animée de deux façons : la première consiste à
modifier la largeur et la hauteur de cette ellipse en fonction de son
éloignement de la souris et la seconde animation consiste à permettre à ce
personnage de se déplacer dans l'espace de chaque case à l'aide de
l'application de lois physiques. Le personnage à une masse, une position, une vélocité ainsi qu'une
accélération. Une force de friction a aussi été implémentée. Lorsque l'on
clique quelque part, le personnage va alors subir une modification de son
accélération qui va donc se répercuter sur sa vitesse puis sur sa position. La
relation est tout simplement une addition de vecteurs : pour obtenir le nouveau
vecteur de vélocité on lui ajoute le vecteur accélération; pour obtenir le
nouveau vecteur de position on y ajoute le vecteur de vélocité etc. A partir de là tout est permis. L'avantage d'utiliser Processing dans ce
contexte se situe dans le fait que l'on peut avoir accès à des notions de
programmation objets, il est donc possible de structurer sont code à l'aide de
classes et du coup de gagner une certaine flexibilité. De plus procession offre
tout un tas de primitives de dessin dont la syntaxe est grandement simplifiée. Le moteur audio : webpd ¶ Webpd est une librairie JavaScript qui permet de faire de la synthèse audio en
temps réel. Pour ceux qui connaissent déjà Pure-Data, s'en est un port partiel
pour JavaScript : cela veut dire que vous pouvez faire tourner certains patchs
directement dans votre navigateur. Pour ceux qui ne connaissent pas Pure-Data
je vous invite à lire la suite... Le hello world de Pure Data. The midst présente une particularité au niveau du gameplay et de
l'implémentation du moteur audio. J'ai choisi volontairement de conserver la
même fenêtre pour tous les niveaux, cela signifie qu'à chaque fois qu'on l'on
quittera une case une nouvelle page va se charger (un canvas avec un sketch
Processing et un patch Pure Data). J'ai donc choisit de créer l'ambiance sonore
de chaque case à l'aide d'un "drone" audio, c'est à dire un accord tenu le
temps que l'on reste dans la case, mais cet accord est modulé par la position
du héros dans sa case ainsi que par son animation. La source audio. L'accord est formé de deux sons : un oscillateur, et un phasor (forme d'onde
en triangle), on utilise la convention MIDI pour choisir la fréquence à
laquelle vont osciller ces deux sources, l'objet [mtof] permet la conversion
de notes midi en fréquences. Une première enveloppe contrôlée par l'animation du personnage. Une seconde enveloppe contrôlée par la position du personnage dans la case. La sortie audio : l'objet [dac~] représente les haut-parleurs de votre
ordinateur. Il reste maintenant à dupliquer ce code quatre fois (et changer la valeur de la
note midi jouée à chaque fois pour former un accord) puis à interfacer le code
de notre ambiance sonore avec notre code processing.js qui régit l'animation de
notre personnage principal, c'est à dire permettre à notre code processing.js
d'envoyer des messages à webpd pour moduler le son de notre synthétiseur en
temps réel. L’interfaçage d'un seul drone avec processing JS. En ce qui concerne le son de collision on peut se servir d'un bruit blanc qui
va être modulé par une enveloppe maison. La source sonore est cette fois un bruit blanc [noise~]. L'enveloppe "maison" : un enveloppe attack (1ms) decay (10ms). Les deux parties assemblées. Pour jouer ce son, on pourra maintenant envoyer un message de type : patch.send(&quot;pjstick&quot;,&quot;bang&quot;);
Il ne nous reste alors plus qu'à tout assembler, pour obtenir la base du moteur
audio du jeu : Le moteur audio au complet Nous ne sommes bien sûr pas du tout obligés de synthétiser tous les sons ! Il
est possible de charger des sons et de les jouer comme on le souhaite (une
fois, en boucle, ou alors juste des bouts à droite à gauche). Si vous y
arrivez, le dernier niveau vous permettra de découvrir une première approche de
la musique générative pour le web. L'avantage de Pure Data et qu'il existe une
large communauté de musiciens qui l'utilisent, ceux-ci seront à même de mettre
en place un moteur audio complet et interactifs pour le web. The Midst ... ¶ Comme je le mentionnais au début ce jeu est aussi un atelier dont la première
édition aura lieu du 16 janvier au 20 février à Stereolux à Nantes , sous forme de six séances de deux heures, qui
permettront à leurs participants de se familiariser avec ces technologies mais
aussi de développer une case du jeu. J'espère qu'avec le temps le jeu
s'étoffera que le labyrinthe s'étendra... alors si vous souhaitez contribuer
n'hésitez pas à me contacter ! Réagissez sur cet article . Recherche
La Structure du jeu et du code
Le moteur audio : webpd
The Midst ...
Flux Atom
Faites un don!
Lectrices Burda? Par ici!
© 2013 FaitMain