← travaux
L'interface de Nubecula sur un fond pastel animé, rose et bleu : la barre avec le titre, le volume général et les réglages, et les cartes Vagues, Forêt, Pluie et Feu de cheminée, trois d'entre elles en lecture.

● projet perso▸ 01Anov. 2023 — mars 2026

Nubecula

rôle
Conception et développement
outils
  • React
  • Material UI
  • p5.js
  • GLSL

L'idée

Une page pour se créer une atmosphère calme : douze ambiances (vagues, forêt, pluie, feu de cheminée, oiseaux, grillons, vent, guitare, baleine, bol tibétain, piano, grenouilles), chacune avec son propre volume, à mélanger librement. Le projet est né sous le nom de Relax, mon premier projet React ; je l'ai repris en 2026, et il est devenu Nubecula, « petit nuage » en latin.

Des boucles sans couture

Une boucle audio qui recommence s'entend : un petit saut, un silence, et l'illusion tombe. Chaque son joue donc deux copies. Avant la fin de l'une, l'autre démarre, et les deux se croisent en fondu pendant 2,8 secondes, avec une courbe en cosinus pour que la somme reste douce.

Le fondu enchaîné : le gain de la première copie descend pendant que celui de la seconde monte, en cosinus, sur 2,8 secondes (1,2 seconde au minimum) avant la fin de la boucle.

Un son qui respire

Un son trop régulier finit par sonner faux. En option, le volume de chaque ambiance dérive lentement, au hasard et indépendamment des autres, de 5 à 50 % autour de son réglage. La pluie forcit, le vent retombe, comme dehors.

Un fond qui bouge

Le fond est un shader GLSL rendu par p5.js : des encres chaudes et froides qui se mélangent lentement par des modes de fusion. Ses six couleurs se règlent dans le panneau des réglages, et sont gardées dans le navigateur, avec le volume général et les options audio. Le mode immersif cache l'interface et ne laisse que le fond et le son.

Le panneau des réglages ouvert à droite : fondu enchaîné, oscillation du volume et son intensité, puis les six couleurs du fond.
Les réglages : l'audio et les six couleurs du fond.
Le mode immersif : rien que le fond animé, des nuages de rose, de pêche et de bleu sur un blanc chaud.
Le mode immersif : rien que le fond et le son.
Nubecula sur téléphone : la barre de commandes en haut, puis les cartes Vagues et Forêt l'une sous l'autre.
Sur téléphone.

Ce que j'en retiens

Deux versions du même projet : d'abord, des lecteurs audio et des curseurs ; en 2026, des boucles invisibles, un son vivant et un fond en shader. C'est la mesure du chemin parcouru, et la preuve qu'un petit projet personnel vaut d'être repris.