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


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.



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);
   }

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
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.