Какой алгоритм используется в анимации uTorrent «Об окне»?


8


В последней версии uTorrent, если вы откроете окно « О программе» , вы увидите анимированный фон, который является своего рода волнами, которые продолжаются вечно.
Как этого достичь? Является ли этот вид хорошо известного алгоритма / класса алгоритмов?
Спасибо.
введите описание изображения здесь


1
@trichoplax Я удалил картинку и добавил GIF. Спасибо.
Wfi Okly

Выглядит как эффект палитры. Само изображение статично.
PaulHK

Ответы:


9

Как вы обнаружили и упомянули в своем ответе, шаблон на заднем плане выглядит как сумма синусоидальных градиентов.

Однако пример, связанный с вашим ответом, более сложен, чем пример, используемый µTorrent. Фон окна «О программе» выглядит статичным, а не анимированным синусоидальным рисунком, используемым в плазменной стойке.

Несколько синусоидальных градиентов были суммированы, чтобы дать одно изображение, и иллюзия движения дается простой циклической сменой цветов в этом одном изображении, а не генерацией множества разных изображений. Это наиболее заметно, если вы сосредоточены на центре одного из цветных колец. В шаблоне µTorrent вы заметите, что каждое кольцо остается в одном месте, и его цвет течет либо в него, либо из него. В отличие от этого, цветные кольца в полностью анимированном узоре движутся вокруг, иногда разделяясь или сливаясь.

Упрощенный подход, используемый µTorrent, напоминает анимации, использовавшиеся в прошлом при пересчете синусоидальных паттернов, каждый кадр не был реалистичным.



2

Эффект можно примерно воссоздать, сложив вместе 2 (или более) радиальных синусоиды и затем анимируя полученную фазу с помощью другой функции синуса.

Используйте www.shadertoy.com для проверки.

   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
Для чего-то более интересного вы также можете анимировать происхождение радиальных фигур. -> float d = sin (длина (uv - vec2 (0,5)) * 35,0) + sin (длина (uv - vec2 (0,2 + sin (iGlobalTime), 0,3)) * 45,0);
PaulHK
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.