Neural Net Viz
Un graphe en quatre colonnes de 3, 5, 4 et 3 nœuds, chaque nœud relié à tous ceux de la colonne suivante : les 47 liaisons pulsent en épaisseur et en opacité, les 15 nœuds gonflent et s'illuminent chacun à son rythme — canvas 2D net sur Retina, graphe toujours entier quelle que soit la taille du cadre, boucle arrêtée hors écran, image fixe si l'utilisateur réduit les animations. Des pulsations décoratives : aucun calcul de réseau de neurones.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Liquid comprend 31 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le cadre .fx-0413-root fait 300 px de haut sur toute la largeur et le canvas s'y cale (display: block, 100 % × 100 %). Taille interne = taille affichée × devicePixelRatio, dessin en pixels CSS par setTransform : mesuré à densité 2, 1280 × 600 pour 640 × 300. Les positions des nœuds sont gardées en fractions du cadre et converties en pixels à chaque image : colonnes à 20, 40, 60 et 80 % de la largeur, nœuds d'une colonne de n à (i + 1) / (n + 1) de la hauteur. Un ResizeObserver suit le cadre ; réduit à 360 px de large, le graphe tient entre 62 et 298 px (mesuré dans Chromium 151, Firefox 153 et WebKit 26).
Chaque liaison reçoit au départ un poids au hasard entre 0 et 1, qui ne sert qu'à décaler sa pulsation : son intensité suit (sin(2 l + 10 × poids) + 1) / 2, d'où une opacité de 0,1 à 0,4 et une épaisseur de 0,5 à 2 px, en indigo rgb(99, 102, 241). Chaque nœud a sa propre phase : son rayon va de 6 à 12 px et son dégradé radial passe du violet rgb(139, 92, 246) presque opaque au centre à un indigo à 10 % au bord. Le temps l avance de 0,02 par image : une liaison pulse en 2,6 s environ à 60 images/s, un nœud en 5,2 s. Le canvas est effacé à chaque image ; le fond est celui de la racine.
Le graphe se lit de gauche à droite parce que les liaisons ne relient que deux colonnes voisines : le tableau [3, 5, 4, 3] suffit à décrire toute la structure, et les colonnes se répartissent seules si vous en changez le nombre. La boucle requestAnimationFrame s'arrête dès qu'un IntersectionObserver voit le canvas sortir de l'écran (mesuré : 0 image par seconde hors écran contre 120 à l'écran) et repart à son retour.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, le graphe est dessiné une fois, nœuds et liaisons à des intensités différentes, et ne bouge plus ; il est redessiné seulement si le cadre change de taille. Mesuré dans les trois moteurs : 0 % de pixels changés en 500 ms. - Le schéma doit se lire en texte : le canvas n'a pas de nom accessible. Si le graphe décrit une vraie structure (un cours, un réseau de chaleur, un câblage), écrivez les colonnes et leurs éléments en HTML, comme les légendes des exemples, ou dans une liste juste après.
- Contraste : les liaisons les plus faibles descendent à 10 % d'opacité sur le fond sombre ; ce sont des traits d'ambiance. Si une liaison précise doit se voir, dessinez-la à part, plus épaisse et pleine.
- Vitesse liée à l'écran : le temps avance par image ; à 120 Hz, les pulsations vont deux fois plus vite.
Compatibilité navigateur
Canvas 2D + 2,6 Ko de JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : mêmes pulsations, taille interne doublée à densité 2, hauteur stable après 20 redimensionnements, graphe entier à 360 px de large, boucle à l'arrêt hors écran, image fixe sous mouvement réduit. Coût mesuré : 0,1 ms de JavaScript par image dans Chromium, environ 1 ms dans Firefox. ResizeObserver existe depuis Chrome 64, Firefox 69 et Safari 13.1.
Sans JavaScript, le cadre reste noir bleuté, sans graphe : gardez les légendes en HTML pour que le schéma reste compréhensible. Sans IntersectionObserver, la boucle tourne aussi hors écran ; sans ResizeObserver, le graphe suit le redimensionnement de la fenêtre seulement.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0413-root">
<div class="ai-neural-container">
<canvas class="ai-neural-canvas" width="393" height="280"></canvas>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Colonnes (JS — const a = [3, 5, 4, 3]) |
4 colonnes de 3, 5, 4 et 3 nœuds | [2, 4, 4, 2] ou [3, 6, 6, 6, 2] : les colonnes se répartissent seules sur la largeur et chaque nœud est relié à tous ceux de la colonne suivante. Au-delà de 8 nœuds par colonne sur 300 px, les nœuds se touchent. |
Couleur des liaisons (JS — rgba(99, 102, 241, …), deux endroits) |
indigo | Changez les trois premiers nombres dans la liaison et dans le bord des nœuds ; l'opacité qui suit est calculée, ne la remplacez pas. |
Couleur des nœuds (JS — rgba(139, 92, 246, …)) |
violet | Le centre du dégradé radial ; une couleur claire (94, 234, 212) donne des nœuds lumineux. |
Taille des nœuds (JS — 6 + 6 * t.activation) |
6 à 12 px de rayon | 4 + 3 * t.activation pour un schéma plus discret, 8 + 10 * t.activation pour des nœuds qui respirent fort. |
Épaisseur et opacité des liaisons (JS — .5 + 1.5 * a et .1+.3*a) |
0,5 à 2 px, 10 à 40 % | .2+.5*a pour l'opacité rend toutes les liaisons lisibles, même au plus bas. |
Rythme (JS — l += .02) |
0,02 par image : liaison en 2,6 s, nœud en 5,2 s à 60 images/s | 0,01 ralentit tout de moitié. Le facteur 2 * l fait pulser les liaisons deux fois plus vite que les nœuds. |
Hauteur (CSS — .fx-0413-root { height: 300px }) |
300 px | Le graphe s'étire avec le cadre ; les nœuds gardent leur taille en pixels. |
FAQ
left: 20%, top: 25%) : elles restent alignées à toutes les tailles, comme dans les trois exemples.(Math.sin(2 * l - 1.5 * o.layer) + 1) / 2 dans le calcul de a fait partir la pulsation de la gauche et la décale d'une colonne à l'autre. L'effet reste décoratif, mais se lit alors comme un flux qui traverse le graphe.
