Animated Fractal Shaders
Many times, natural objects have surfaces with details. These details may appear in several layers, each layer resembling the others but having its own scale and rythmn. For instance, if we stand ten feet from a white wall, we may notive large splotches of dirt. If we stand three feet away, we see another layer of dirt which is similar to the larger layer but distinct because the splotches are smaller, ganier. If we stand with our nose to the wall, we will be surprised yet again by another layer of dirt, this one even smaller than the last. All of the dirt may have the same pattern but simply varies in frequency. This is essentially a fractal - a pattern which increases in detail but retains its initial appearance no matter what the scale. No matter how close you look at the dirt, you will be alarmed that the dirt has dirt of its own (even at the atomic level). Using a fractal for such patterns increases the realism of organic objects.
So, I was sitting in the lab late one night, and suddenly I saw this snippet of code in my head and the resulting fractal it would create.There was wave upon wave of brilliant colors, each layer resembling the last. Call it a revelation maybe.
So, here is the idea. At each point, we check to see if its inside a circle centered in the middle of the grid. If it is, we color the pixel and we're done. Otherwise, we'll increase the resolution and the frequency of the pattern and check again. We keep doing this until we find ourselves inside of a circle, no matter how small. Maybe a picture will help. Imagine the red x is the current pixel we're shading. Let's step through the algorithm.
First, we check to see if this point is within the basic pattern of four circles. It's not, so we increase the frequency of the pattern and rotate the pattern space.
Ok, here we are at the second level. Notice the pattern is more complex. Note that because we have already tested the previous level of detail, we only need to test the current level. In other words, we only need to worry about the cyan circles. We're still not inside one so we need to increase frequency and rotate the space again.
Ah! On the third level we are inside a circle. So, we stop there and color the pixel dark blue. Note that the color changes at each level to create the nice gradient of rainbow colors.
So, for each point, we continue down levels until the point is found to be inside a circle.
Lots of fun things can then be done once we have the basic shader. For instance, noise was applied to the radius to create the jagged edges. Also, color and rotation may be animated to make things even more fun. Plus, this is really just the beginning of a much more practical shader. Fractals are closely related to L-systems; if we can create a fractal within a shader, it is only a small jump to create an l-system within a shader. Possibly, there could be vines or vains grown procedurally using a shader. Here are some movies for your viewing pleasure.
Here is the source code:
