Le réseau

Pourquoi ça évoque l'intelligence artificielle

Le cliché visuel de l'IA, c'est le dégradé rose et violet étalé sur toute une page. C'est un raccourci marketing, et il est listé comme anti-pattern dans le catalogue de design que j'ai utilisé pour cette page. Ce site l'a porté pendant un jour, avant de le perdre.

Le site est pourtant bleu, violet et vert aujourd'hui. La différence n'est pas la couleur, c'est où elle est posée : ici aucune surface n'est teintée, seulement des traits d'un pixel et des liserés. Le fond reste noir, le texte reste blanc. Une couleur qui distingue trois plans de profondeur porte une information ; la même couleur étalée en dégradé derrière du texte n'en porte aucune. C'est la nuance que j'avais ratée en écrivant ce paragraphe la première fois.

Ce qui évoque vraiment l'IA, c'est autre chose : l'organisation qui apparaît sans que personne ne la dessine. Aucun trait de ce fond n'est écrit dans le code. Je n'ai décrit qu'une règle — « si deux points sont assez proches, relie-les » — et la figure se forme, se défait, se reforme, sans jamais se répéter. C'est très exactement la manière dont un réseau de neurones fonctionne : des unités simples, une règle locale, et un comportement d'ensemble que personne n'a spécifié.

À toi de régler

Les deux valeurs qui déterminent tout. Bouge-les : le fond de cette page réagit en direct, pas seulement l'aperçu ci-dessous.

La portée change la nature de l'objet. En dessous de 60 px, des points isolés qui se frôlent. Au-dessus de 200 px, une toile dense où tout est relié à tout — et le processeur commence à souffrir. La valeur du site est 132 : assez pour que des figures se forment, assez peu pour qu'elles se défassent.

Le calcul, et l'économie qu'il fait

Chaque image, le code compare chaque paire de points. Avec 100 points, ça fait 4 950 paires, soixante fois par seconde — près de 300 000 comparaisons par seconde. C'est là qu'un détail compte :

var dx = a.x - b.x, dyy = a.y - b.y;
var d2 = dx * dx + dyy * dyy;
if (d2 > DIST * DIST) continue;      // on compare des carrés
var f = 1 - Math.sqrt(d2) / DIST;    // racine seulement si utile

La distance entre deux points demande une racine carrée. Mais pour savoir si elle dépasse un seuil, comparer les carrés suffit — et une multiplication coûte bien moins cher qu'une racine. On ne calcule la vraie distance que pour les paires effectivement reliées, une petite minorité. C'est le genre d'économie qui ne se voit pas sur un ordinateur de bureau et qui décide si le site est fluide sur un téléphone.

Trois précautions qui ne se voient pas

• La densité, pas le nombre. Le code ne pose pas « 100 points » mais « un point par 22 000 pixels carrés », plafonné à 110. Un nombre fixe donnerait une bouillie sur téléphone et un désert sur grand écran.
• L'onglet caché. Un visibilitychange arrête la boucle quand tu changes d'onglet. Sans ça, le site continue de calculer 300 000 comparaisons par seconde dans le vide, et vide la batterie d'un portable.
• Le mouvement réduit. Si le système est réglé sur « animations réduites » — un réglage d'accessibilité, pour les gens que le mouvement rend malades — le réseau est dessiné une fois et ne bouge plus jamais.

Le bug qui m'a coûté une version

À la première mise en ligne, le réseau était invisible. Pas d'erreur, pas de message : rien. Le canvas mesurait 300 × 150 pixels, coincé en haut à gauche de l'écran.

La cause : <canvas> est un élément remplacé, comme <img>. Sur une <div> ordinaire, position: fixed avec inset: 0 étire l'élément sur tout l'écran. Sur un élément remplacé, non : il garde sa taille intrinsèque par défaut. Et comme la densité se calcule sur la surface, il y avait exactement deux points dans ce petit rectangle.

#reseau {
  position: fixed;
  top: 0; left: 0;
  width: 100%;      /* indispensable — inset: 0 ne suffit pas */
  height: 100%;
}