Sign in to follow this  
Grafalgar

Flowing or moving colors on a texture?

Recommended Posts

Hi all, I'm looking for some resources on manipulating a texture's pixel data to achieve that fancy "flowing color" effect you see in music visualizers. I've been googling "color flow" and "texture color move" and all that but am getting results that have nothing to do with graphics, so I assume that the technique(s) must have a different name. What I would like to accomplish is given any texture, a point on the texture and a 2D vector, "flow" the colors along the vector as if the texture was the top of a still pool of water, and you're introducing a small current. I'm not looking for a water simulator, just techniques on how to move/smudge/manipulate the colors around in a flowy-kinda-manner, while remaining efficient. I hope that makes an ounce of sense.. any help would be greatly appreciated! -Grafalgar

Share this post


Link to post
Share on other sites
Quote:
Original post by Grafalgar
I'm looking for some resources on manipulating a texture's pixel data to achieve that fancy "flowing color" effect you see in music visualizers. I've been googling "color flow" and "texture color move" and all that but am getting results that have nothing to do with graphics, so I assume that the technique(s) must have a different name.
"Plasma Effects" may be what you're looking for.

Share this post


Link to post
Share on other sites
Never tried Media Player and/or procedural/mathematical shaders, but here is a relative cheap & simple try:

- Make a seamless DUD/DV (offset) texture. Like wet paint dripping down. Each pixel gives an offset in the X and Y direction. The more intense the pixel, the bigger the offset on that pixel.

- In the vertex shader you must calculate the UV coordinates for the DU/DV map. You could use the same coordinates as the original texture, and eventually multiply them to tile the DU/DV map further. Now the difficult part comes, rotating the dudv texture coordinates into a certain direction:

dudvCoords.xy = baseTexCoords.xy * TileFactor;
// Apply an offset downwards (-y)
// The offset is a global variable that increase every cycle with a certain
// (low) speed, depending how strong the current is
dudvCoords.y += flowTimer;

// Rotate the texture coordinates in the same way as the current 2D direction
... can't tell you quickly how to do that. My math is, uhm, not that good :)
... Do something with a matrix or (co)sines maybe

- In the vertex shader you can also calculate the distance between the point and the vertex as a factor between 0 and 1. 1==maximum current, 0=no current anymore.

// Current Point is a world 3D coordinate in this case.
// But you can also do with with texture coordinates maybe
distance = 1 - saturate( length( currentPoint - vertexPoint ) * x );

- In the fragment shader you lerp between the original texture coordinates and the dudvMap offset coordinates, based on the distance:

offsetCoords.xy = originalTexcoords + tex2D( dudvMap, dudvCoords ).xy;
texcoords.xy = lerp( originalTexcoords, offsetCoords, distance );

result = tex2D( diffuseMap, texcoords ).rgb;


This will make shift the pixels with a pattern at a certain point. You could improve the effect by adding a bumpMap with the same offset coordinates to make specular highlights and shadowing at the places where the texture "drips".

Greetings,
Rick

Share this post


Link to post
Share on other sites
Its all about feedback.

Given a function F(p) which transforms an image p, utilize it as a recurrence relation p = F(p), rendering at each step and drawing new stuff into p as well.

Here, "transform" isnt as simple as "rotation, translation, and scaling", but you can begin with that.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this