Un réseau de neurones 3D vivant — galaxie, ADN, tore, arbre neuronal — qui pulse, se connecte et morphe d’une forme à l’autre au son de votre voix.
Vue d’ensemble
Neural Network affiche un réseau de nœuds et de connexions en 3D, généré selon six formations possibles — sphère cristalline, double hélice, arbre neuronal, tore, galaxie, icosphère — que l’on peut faire morpher les unes vers les autres en douceur. Le micro alimente en direct l’application : les basses pilotent la taille des nœuds, les médiums la vitesse de flux le long des connexions, et le volume général l’intensité du halo lumineux (bloom).
Un pic de basses suffisant déclenche seul une onde de pulsation au centre de l’écran, et chaque clic ajoute sa propre onde qui se propage radialement. Un curseur de densité permet d’élaguer le réseau pour l’alléger ou le densifier, et un mode plein écran sans interface permet une présentation totalement épurée.
Fonctionnalités
- Six formations génératives — sphère cristalline, double hélice, arbre neuronal, tore, galaxie, icosphère, chacune un graphe de nœuds propre.
- Morphing fluide entre formations — interpolation image par image en easing quadratique, avec fondu de la géométrie des connexions au passage.
- Réactivité vocale en direct — basses → taille des nœuds, médiums → vitesse de flux des connexions, volume → intensité du bloom.
- Détection de rythme automatique — un pic de basses déclenche seul une onde de pulsation au centre de l’écran.
- Pulsations au clic — jusqu’à 3 ondes simultanées, qui se propagent radialement depuis leur point d’origine.
- Contrôle de densité — un curseur élague le réseau par facteur de densité, plafonné à 70 nœuds.
- Mode plein écran sans interface — pour une présentation épurée, sans aucun panneau à l’écran.
Sous le capot
Le pipeline de rendu enchaîne une scène Three.js, un EffectComposer avec RenderPass puis UnrealBloomPass et OutputPass — le bloom tourne en demi-résolution et ajuste sa force selon le niveau de l’appareil et le niveau audio du micro. Les nœuds sont des THREE.Points avec un shader vertex/fragment sur mesure, lisant un objet d’uniforms partagé pour leurs effets de pulsation ; les connexions sont des THREE.LineSegments dont chaque segment est subdivisé en 20 sous-segments, positionnés dans le vertex shader à partir d’une courbe de bézier et d’un bruit simplex de « wobble ».
Le morphing entre formations interpole les positions des nœuds côté JavaScript, image par image, avec un easing quadratique ; une fois la transition terminée, la géométrie des connexions est remplacée par celle de la formation cible pré-générée (elle ne peut pas s’interpoler de façon cohérente), avec un uniform de fondu qui gère l’opacité pendant le croisement. Côté audio, un AnalyserNode Web Audio est branché sur le micro sans jamais rejoindre la sortie — pour éviter tout effet Larsen — et analysé à chaque frame pour nourrir les basses, médiums et volume général.
Stack technique
- Three.js — scène 3D, rendu WebGL
- OrbitControls — navigation caméra
- EffectComposer / UnrealBloomPass / OutputPass — post-traitement bloom
- Web Audio API — AnalyserNode branché sur le micro
- Shaders GLSL personnalisés — vertex/fragment pour nœuds et connexions (bruit simplex, bézier)
- Vanilla JS — ES module unique, zéro framework, zéro build
Cas d’usage
Pensé comme une démonstration portfolio et un fond visuel génératif pour ambiance musicale ou installation réactive à la voix : parler ou chanter devant le micro suffit à faire vivre le réseau, sans aucun contrôleur à manipuler.
Un réseau qui respire — chaque mot que vous prononcez redessine ses connexions.
