Here’s another experiment which makes use of a noisy data set defined by fractal subdivision, this time applied to create some interestingly textured gradients. I’ve used this one-dimensional fractal subdivision technique before: to draw imperfect circles and rectangles, and to create some “sweeping fractal lines” art (here and here).

I can’t promise that the gradients I’m creating here are actually useful for anything, but I hope you’ll enjoy them anyway! (Perhaps with some modification they could be used for a randomly generated background for part of a webpage?)

Click on each of the screenshots below to see two different examples which make use of the same basic code, but with a modification of parameters. In the demos, you can click repeatedly on the gradients to see them regenerate.

horizontal

horizontal and vertical crossing

Download

The complete code for all of the above examples can be downloaded here: FractalGradient.zip

About the code

These textures are created by layering several rectangles filled with a “fractal gradient” on top of each other. A fractal gradient is created by first defining a randomized set of data according to a fractal subdivision process. More information on this process can be found in my earlier post here (although I am using the slightly modified version of the algorithm which I first used here.) This fractal subdivision process creates a noisy function, but in such a way that abrupt changes are avoided. Below is a picture of a gradient of a single color created in this way:

Notice how the color is noisy, but with some clusters of dark and light.

This gradient is a simple linear gradient, but with many “color stops” defined from beginning to end. The color stops all have the same basic RGB color, but with varying alpha values. The alpha values are defined by the fractal data which is created by the subdivision process.

The final effect is created by layering several rectangles filled with these gradients on top of each other, each with its own independent fractal gradient. When we draw these rectangles on top of each other, we set the globalCompositeOperation for the context to "lighter", which causes the colors to have an additive effect. For a little more interest, we allow these gradients to be tilted randomly by a small angle instead of all being defined along exactly the same line. In the second version, we overlap horizontal and vertical gradients, which creates some interesting patterns.

Modifying the code

The fractal gradients can be used in your own project simply by borrowing the createLinearFractalGradient function contained within the examples here. This function returns a gradient which can be used as a fillStyle for any drawing in the canvas context. The twelve parameters of the createLinearFractalGradient are as follows:

• the canvas context which will be used for drawing,
• the beginning point and ending point for the linear gradient (four variables defining two points (x0, y0) and (x1,y1)),
• a maximum “variation angle” which allows the gradient to be randomly tilted away from the line just defined,
• red, green, and blue values,
• a base alpha value,
• an alpha variation amount (the maximum change in alpha throughout the gradient), and
• the number of iterations to use in the subdivision (so for example, setting this to 8 will result in 2^8+1=513 color stops).

In the examples above I use randomized colors (with the second version favoring red and green over blue), but you could easily select your favorite colors explicitly.

Experiment!

Again, I’m not sure if this particular example is useful, but I find the gradients pleasant to look at and I hope the idea may inspire you. I have already found a lot of applications for a noisy data set defined by this subdivision process, and I’m sure there are many more. Have a look at the code and extract the createRandomData function for your own creative purposes.