In a recent version of uTorrent , if you open the About Window, you will see an animated background , which is kind of waves that go on forever.
How can this be achieved? Is this kind of a well-known algorithm/class of algorithms?
Thanks.
-
1$\begingroup$ @trichoplax I removed the pic and added a GIF. Thanks. $\endgroup$– Wfi OklyCommented Jul 20, 2016 at 11:30
-
$\begingroup$ Looks like a palette cycling effect. The image itself is static. $\endgroup$– PaulHKCommented Jul 20, 2016 at 13:19
3 Answers
As you discovered and mentioned in your self-answer, the pattern in the background appears to be a sum of sinusoidal gradients.
However, the example linked to in your answer is more complicated than that used by µTorrent. The background of the About window appears to be a static pattern, rather than the animated sinusoidal pattern used in the plasma post.
Several sinusoidal gradients have been summed to give a single image, and the illusion of movement is given by simply cycling the colours in that one image, rather than generating a number of different images. This is most noticeable if you focus on the centre of one of the rings of colour. In the µTorrent pattern you will notice that each ring stays in one place, and has colour flowing either into it or out of it. In contrast, the rings of colour in the fully animated pattern move around, occasionally dividing or merging.
The simplified approach used by µTorrent is reminiscent of animations used in the past when recalculating the sinusoidal patterns each frame was not realistic.
The effect can be roughly recreated by adding 2 (or more) radial sinusoids together and than animating the resulting phase through another sine function.
Use www.shadertoy.com to verify.
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$\begingroup$ For something more interesting you can animate the origin of radial shapes too. -> float d = sin(length(uv - vec2(0.5)) * 35.0) + sin(length(uv - vec2(0.2+sin(iGlobalTime),0.3)) * 45.0); $\endgroup$– PaulHKCommented Jul 26, 2016 at 8:21