Quel algorithme est utilisé dans l'animation de la «fenêtre À propos» de l'uTorrent?

8


Dans une version récente d'uTorrent, si vous ouvrez la fenêtre À propos , vous verrez un arrière-plan animé, qui est une sorte d'ondes qui durent éternellement.
Comment cela peut il etre accompli? Ce type d'algorithme / classe d'algorithmes est-il bien connu?
Merci.
entrez la description de l'image ici

Wfi Okly
la source
1
@trichoplax J'ai supprimé la photo et ajouté un GIF. Merci.
Wfi Okly
Ressemble à un effet de cycle de palette. L'image elle-même est statique.
PaulHK

Réponses:

9

Comme vous l'avez découvert et mentionné dans votre auto-réponse, le motif en arrière-plan semble être une somme de gradients sinusoïdaux.

Cependant, l'exemple lié à votre réponse est plus compliqué que celui utilisé par µTorrent. L'arrière-plan de la fenêtre À propos semble être un motif statique, plutôt que le motif sinusoïdal animé utilisé dans le post plasma.

Plusieurs gradients sinusoïdaux ont été additionnés pour donner une seule image, et l'illusion du mouvement est donnée en faisant simplement défiler les couleurs de cette image, plutôt que de générer un certain nombre d'images différentes. Ceci est plus visible si vous vous concentrez sur le centre de l'un des anneaux de couleur. Dans le motif µTorrent, vous remarquerez que chaque anneau reste au même endroit et que la couleur y coule ou en sort. En revanche, les anneaux de couleur du motif entièrement animé se déplacent, se divisant ou fusionnant de temps en temps.

L'approche simplifiée utilisée par µTorrent rappelle les animations utilisées dans le passé lorsque le recalcul des motifs sinusoïdaux de chaque image n'était pas réaliste.

trichoplax
la source
2

Après quelques recherches, j'ai découvert qu'il s'appelait Plasma.
Effet plasma

Wfi Okly
la source
2

L'effet peut être grossièrement recréé en ajoutant 2 (ou plus) sinusoïdes radiaux ensemble et en animant la phase résultante à travers une autre fonction sinusoïdale.

Utilisez www.shadertoy.com pour vérifier.

   void mainImage( out vec4 fragColor, in vec2 fragCoord )
   {
       vec2 uv = fragCoord.xy / iResolution.xy;
       float d = sin(length(uv - vec2(0.5)) * 35.0) + sin(length(uv - vec2(0.2,0.3)) * 45.0);
       d = sin(d * 4.0 + iGlobalTime * 4.0)*0.5+1.0;
       fragColor = vec4(d,d,d,1.0);
   }
PaulHK
la source
1
Pour quelque chose de plus intéressant, vous pouvez également animer l'origine des formes radiales. -> float d = sin (longueur (uv - vec2 (0,5)) * 35,0) + sin (longueur (uv - vec2 (0,2 + sin (iGlobalTime), 0,3)) * 45,0);
PaulHK