Quale algoritmo viene utilizzato nell'animazione della "Finestra" di uTorrent?


8


In una versione recente di uTorrent, se apri la finestra Informazioni , vedrai uno sfondo animato, che è una specie di onde che si protraggono per sempre.
Come si può ottenere questo? Questo tipo di algoritmo / classe di algoritmi è noto?
Grazie.
inserisci qui la descrizione dell'immagine


1
@trichoplax Ho rimosso la foto e aggiunto una GIF. Grazie.
Wfi Okly,

Sembra un effetto ciclismo palette. L'immagine stessa è statica.
PaulHK,

Risposte:


9

Come hai scoperto e menzionato nella tua risposta, il modello in background sembra essere una somma di gradienti sinusoidali.

Tuttavia, l'esempio collegato alla tua risposta è più complicato di quello usato da µTorrent. Lo sfondo della finestra Informazioni sembra essere un modello statico, piuttosto che il modello sinusoidale animato utilizzato nel post al plasma.

Diversi gradienti sinusoidali sono stati sommati per dare una singola immagine, e l'illusione del movimento è data semplicemente spostando i colori in quell'immagine, piuttosto che generare un numero di immagini diverse. Ciò è più evidente se ti concentri sul centro di uno degli anelli di colore. Nel modello µTorrent noterai che ogni anello rimane in un posto e ha il colore che scorre dentro o fuori di esso. Al contrario, gli anelli di colore nel modello completamente animato si muovono, a volte dividendo o fondendosi.

L'approccio semplificato utilizzato da µTorrent ricorda le animazioni utilizzate in passato durante il ricalcolo dei modelli sinusoidali che ogni fotogramma non era realistico.



2

L'effetto può essere approssimativamente ricreato sommando 2 (o più) sinusoidi radiali insieme e animando la fase risultante attraverso un'altra funzione sinusoidale.

Utilizzare www.shadertoy.com per verificare.

   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
Per qualcosa di più interessante puoi anche animare l'origine delle forme radiali. -> float d = sin (lunghezza (uv - vec2 (0,5)) * 35.0) + sin (lunghezza (uv - vec2 (0.2 + sin (iGlobalTime), 0.3)) * 45.0);
PaulHK,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.