Salut

Je suis tombé sur ce site : https://www.adultswim.com/toonami/

Et je trouve que l'effet du curseur qui ondule comme une vague + le découvrement furtif de puce informatique très jolie. Mais je n'ai absolument aucune idée de comment c'est produit.

Vous avez des pistes pour réussir à reproduire ces effets ?

Hello !
L'effet dans sa globalité est un peu complexe dans le sens ou il y a plusieurs couche superposée légèrement décalé sur l'axe Z pour produire un effet parallax lorsqu'on oriente la caméra.

La partie qui vous intéresse n'est pas très compliqué dans le principe mais ce n'est pas simple à réaliser.
Dans les grandes lignes, lorsque vous bougez la souris vous "gommez" l'image qui se trouve en dessus. Cette image est en fait le résultat d'un shader, et le rôle de ce shader est de remplir progressivement les espace vide par accrétion (c'est à dire par couche successive jusqu'à remplir complètement l'image).

Pour qu'on comprenne moins ce qui se passe, au lieu de simplement donner un coup de gomme brut, on gomme en utilisant un degradé radial allant d'une couleur opaque a une couleur transparente et on ne retient que les pixels translucide dans l'action de gommage. Le résultat est utilisé comme un masque sur l'image situé en dessous.

Dans les grande lignes toujours, le remplissage suit la même logique que dans cette démo
https://www.shadertoy.com/view/ts33DS

(le code est disponible mais un simple copier coller ne suffira pas a l'exploiter dans votre site web. Il y a toute une mise en place à faire (lié à la manière dont les shaders fonctionnent) et ça ne s'improvise pas. Le rendu de ce shader est fait en 4 passes, c'est à dire qu'en fait ce shader en contient 4 exécuté successivement l'un après l'autre pour produire le résultat final (et je ne parle là que de la partie remplissage progressif autonome des espaces vide)

J'ai l'impression, mais je ne suis pas certain, que dans votre effet, l'auteur fait aussi exactement le contraire. C'est a dire que la partie opaque de notre dégradé radial qui sert à gommer est dessiné dans un canvas vide qui tend à disparaitre progressivement (même logique que l'autre shader sauf qu'au lieu de remplir du vide par du plein, on remplit du plein par du vide). Cette autre couche, si elle existe (mais je pense que oui) est exécuté légérment après ou légérement avant le shader décrit au dessus qui s'occupe du remplissage. Le résultat de ce shader est également appliqué comme masque et permet de découvrir une autre image dont le contenu est très proche de l'autre image masquée mais pas tout à fait pareil, l'idée étant de produire une confusion visuel afin de complexifier le rétro-engineering que je suis en train de faire.

Très chouette effet en tout cas, mais y a du boulot !

Après, si c'est vraiment juste l'effet de vague qui vous intéresse, il y a d'autre moyen de le produire avec un arrière plan constitué de particules qui sont repoussés dans le périmètre de la souris et qul reviennent à leur place quand la souris est plus loin. Regardez ce code par exemple, c'est bien plus simple et toujours efficace ;)
https://codepen.io/rkgttr/pen/ZGZzJG

Merci beaucoup pour ce poste explicatif, c'est la première fois que je lis une réponse aussi intéressante sur le forum. Je suis triste de lire qu'il n'y a pas de solution 'miracle' pour reproduire cet effet mais je m'en douté un peu. Je vais suivre les pistes données pour essayer de refaire un effet similaire avec la superposition.