8
$\begingroup$


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.
enter image description here

$\endgroup$
2
  • 1
    $\begingroup$ @trichoplax I removed the pic and added a GIF. Thanks. $\endgroup$
    – Wfi Okly
    Commented Jul 20, 2016 at 11:30
  • $\begingroup$ Looks like a palette cycling effect. The image itself is static. $\endgroup$
    – PaulHK
    Commented Jul 20, 2016 at 13:19

3 Answers 3

9
$\begingroup$

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.

$\endgroup$
2
$\begingroup$

After some searching, I found out it's called Plasma.
Plasma Effect

$\endgroup$
2
$\begingroup$

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);
   }
$\endgroup$
1
  • 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$
    – PaulHK
    Commented Jul 26, 2016 at 8:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.