Flowing or moving colors on a texture?
Author
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
Quote:Original post by Grafalgar"Plasma Effects" may be what you're looking for.
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.
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:
- 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.
- In the fragment shader you lerp between the original texture coordinates and the dudvMap offset coordinates, based on the distance:
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
- 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
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.
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.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
