Welcher Algorithmus wird in der Animation des "About-Fensters" des uTorrent verwendet?


8


Wenn Sie in einer neueren Version von uTorrent das Info- Fenster öffnen , wird ein animierter Hintergrund angezeigt, bei dem es sich um Wellen handelt, die für immer andauern.
Wie kann dies erreicht werden? Ist dies ein bekannter Algorithmus / eine bekannte Klasse von Algorithmen?
Vielen Dank.
Geben Sie hier die Bildbeschreibung ein


1
@trichoplax Ich habe das Bild entfernt und ein GIF hinzugefügt. Vielen Dank.
Wfi Okly

Sieht aus wie ein Palettenzyklus-Effekt. Das Bild selbst ist statisch.
PaulHK

Antworten:


9

Wie Sie in Ihrer Selbstantwort entdeckt und erwähnt haben, scheint das Muster im Hintergrund eine Summe von sinusförmigen Gradienten zu sein.

Das in Ihrer Antwort verknüpfte Beispiel ist jedoch komplizierter als das von µTorrent verwendete. Der Hintergrund des Info-Fensters scheint ein statisches Muster zu sein und nicht das animierte sinusförmige Muster, das im Plasmapfosten verwendet wird.

Mehrere sinusförmige Gradienten wurden summiert, um ein einziges Bild zu ergeben, und die Illusion von Bewegung wird durch einfaches Durchlaufen der Farben in diesem einen Bild erzeugt, anstatt eine Anzahl verschiedener Bilder zu erzeugen. Dies macht sich am deutlichsten bemerkbar, wenn Sie sich auf die Mitte eines der Farbringe konzentrieren. Im µTorrent-Muster werden Sie feststellen, dass jeder Ring an einer Stelle bleibt und Farbe entweder in ihn hinein oder aus ihm heraus fließt. Im Gegensatz dazu bewegen sich die Farbringe im vollständig animierten Muster und teilen sich gelegentlich oder verschmelzen.

Der vereinfachte Ansatz von µTorrent erinnert an Animationen, die in der Vergangenheit verwendet wurden, als die sinusförmigen Muster neu berechnet wurden. Jedes Bild war nicht realistisch.



2

Der Effekt kann grob wiederhergestellt werden, indem 2 (oder mehr) radiale Sinuskurven addiert und dann die resultierende Phase durch eine andere Sinusfunktion animiert werden.

Verwenden Sie www.shadertoy.com zur Überprüfung.

   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
Für etwas Interessanteres können Sie auch den Ursprung radialer Formen animieren. -> float d = sin (Länge (uv - vec2 (0,5)) * 35,0) + sin (Länge (uv - vec2 (0,2 + sin (iGlobalTime), 0,3)) * 45,0);
PaulHK
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.