Nuage granulaire

Enregistrez trois secondes de n’importe quel son, puis promenez-vous dedans à la souris : chaque point du nuage est un minuscule morceau de votre son.


Vue d’ensemble

Nuage granulaire part d’un son très court : votre voix, un claquement de doigts, une porte qui grince, un verre qu’on frappe. L’application le découpe en environ 250 grains de quelques centièmes de seconde et pose chacun d’eux dans l’espace, comme une étoile. Les grains qui se ressemblent se retrouvent voisins, si bien qu’une voyelle tenue forme une grappe, un souffle une autre, un choc une troisième.

On joue en promenant la souris dans le nuage. Le rond qui suit le curseur fait sonner les grains qu’il couvre, en boucle et en désordre, et le son se transforme à mesure qu’on avance d’une grappe à l’autre. Là où il n’y a pas de points, il n’y a pas de son. Un clic pose une ancre qui continue de jouer toute seule pendant qu’on explore ailleurs, et plusieurs ancres font une nappe à plusieurs voix. L’expérience fait le pont entre les deux familles du site : elle commence au micro et finit en instrument.

Deux façons de ranger le nuage

La disposition Timbre range les grains selon ce qu’ils évoquent à l’oreille : de gauche à droite, du plus sombre au plus brillant, et de bas en haut, du son tonal (une voyelle, une note) au son bruité (un souffle, un choc). La disposition Temps remet le son dans l’ordre, du début à gauche à la fin à droite : en glissant lentement, on l’entend au ralenti, sans que sa hauteur change. On passe de l’une à l’autre avec la touche T, et les points migrent doucement vers leur nouvelle place.

Dans les deux cas, la couleur d’un point dit où il se trouve dans le son (bleu au début, ambre à la fin), sa taille dit son volume, et un trait très pâle relie les grains qui se suivent. En bas de l’écran, la forme d’onde du son garde la trace des grains joués : chaque grain qui sonne y laisse un éclat à sa place dans le temps.


Fonctionnalités

  • Un enregistrement guidé : le micro s’ouvre, un décompte 3, 2, 1 laisse le temps de se préparer, puis l’enregistrement démarre avec un compteur et une bordure rouge. L’application garde les trois secondes qui suivent votre premier son, ce qui pardonne un départ un peu tardif.
  • On vérifie avant de garder : la prise s’affiche sous forme d’onde, on peut l’écouter, la recommencer autant de fois que nécessaire ou la valider. Le micro est coupé dès la fin de la prise.
  • Trois sources : le micro, un fichier audio déposé dans la page (ses trois premières secondes sonores) ou un son d’exemple fabriqué dans la page, qui enchaîne une voix, un souffle, des coups de bois et deux cordes pincées. L’exemple permet de jouer sans micro.
  • Une taille de curseur réglable : petit, il isole presque un seul grain ; grand, il mélange toute une grappe. Elle se règle dans le panneau, à la molette ou avec les touches [ et ].
  • Jusqu’à six ancres, qui continuent de jouer quand l’onglet passe en arrière-plan. Un clic sur une ancre la retire.
  • Des réglages de musicien : taille des grains (de la poussière de 15 ms aux gouttes de 400 ms), densité (de 3 à 100 grains par seconde), hauteur (deux octaves vers le grave, une vers l’aigu), flottement de hauteur pour un effet de chœur, part de grains joués à l’envers, espace (réverbération) et volume. Les réglages sont gardés d’une visite à l’autre.
  • Le son entier reste accessible : un bouton à gauche de la forme d’onde, ou la barre d’espace, rejoue les trois secondes telles quelles. Un clic sur la forme d’onde lance l’écoute depuis ce point, et les points du nuage s’allument au passage de la tête de lecture.
  • La promenade s’enregistre : le bouton Capturer enregistre ce que vous entendez et le télécharge en fichier audio.
  • Au doigt aussi : sur téléphone ou tablette, on pose le doigt dans le nuage pour jouer et on touche deux fois pour poser une ancre. Le plein écran fonctionne aussi sur iPhone.

Sous le capot

Le son est analysé dans la page, sans bibliothèque : un grain tous les 11 millisecondes, une fenêtre de Hann et une transformée de Fourier écrite en JavaScript. Pour chaque grain, l’application mesure le niveau, la brillance (le centroïde spectral, sorte de centre de gravité des fréquences) et le caractère bruité (la platitude spectrale, qui vaut presque zéro pour une note pure et se rapproche de un pour un souffle). Les grains silencieux sont retirés : survoler un silence ne jouerait rien. Les positions mêlent le rang de chaque grain et sa vraie valeur, pour que le nuage occupe l’écran sans effacer les vrais écarts entre les sons.

Chaque grain joué est une petite lecture du son enregistré, enveloppée d’une courbe de Hann qui l’empêche de claquer. Un ordonnanceur prépare les grains 120 millisecondes à l’avance, sur une horloge tenue par un Web Worker, ce qui permet aux ancres de continuer quand l’onglet est caché. Le grain choisi est tiré au hasard parmi ceux que couvre le curseur, les plus proches ayant plus de chances. Le volume est compensé selon le recouvrement des grains et le nombre de voix, les grains faibles sont un peu remontés, et la position horizontale règle le placement dans la stéréo. La réverbération vient d’une réponse impulsionnelle calculée dans le code, et un compresseur garde le tout sous contrôle.

Rien n’est envoyé nulle part. Le son enregistré reste dans la page et disparaît à sa fermeture, et l’interface ne fait aucun bip : on n’entend que vos grains.


Contrôles

Touche / gesteAction
Survoler le nuageJouer les grains sous le curseur
ClicPoser ou retirer une ancre
Molette, [ et ]Taille du curseur
EspaceÉcouter le son entier
Clic sur la forme d’ondeÉcouter depuis ce point
REnregistrer un nouveau son (décompte 3, 2, 1)
TDisposition Timbre ou Temps
↑ et ↓Hauteur d’un demi-ton (avec Maj : d’une octave)
← et →Taille des grains
CRetirer toutes les ancres
ECapturer la promenade, puis la télécharger
OOuvrir un fichier audio
SRéglages
HMasquer l’interface
FPlein écran
Pendant la vérificationEspace : écouter la prise, R : recommencer, Entrée : valider, Échap : annuler
Au doigtDoigt posé : jouer ; double toucher : poser ou retirer une ancre

Stack technique

  • Vanilla JS en modules ES6, aucune dépendance, aucun build, aucune police externe
  • Web Audio : AudioWorklet pour la prise de son, un AudioBufferSourceNode par grain avec enveloppe de Hann, panoramique, réverbération par convolution générée dans le code, compresseur, MediaRecorder pour la capture
  • Analyse spectrale maison : FFT, centroïde et platitude spectrale
  • Horloge Web Worker pour l’ordonnanceur des grains
  • Canvas 2D : points lumineux en mélange additif, particules, forme d’onde

Cas d’usage

Un mot prononcé devient une texture qu’on étire et qu’on transpose ; un tintement de verre, posé en ancre deux octaves plus bas, fait une cloche lointaine. On peut aussi s’en servir pour comprendre ce qu’est un son : en survolant la grappe d’une voyelle puis celle d’une consonne, on entend ce qui les sépare. Et la promenade capturée fait un bon point de départ pour un morceau.

Trois secondes de rien du tout, et tout un paysage à parcourir.


Expérience précédente

Expérience suivante

Autres expériences