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.
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.
love this http://rectangleworld.com/demos/FractalGradient/FractalGradient2.html
How do I put it as a background image for my site ?
(not in a specific canvas with determined wdth and height). I d like it to be a responsive background.
November 1, 2012 @ 10:27 am
|Hi Olivier,
Glad you like it. You can dynamically create a canvas (or any DOM element) within your JavaScript code rather than in the HTML. I’m afraid I don’t know the code off the top of my head, though!
November 13, 2012 @ 11:59 am
|This is great! Thanks for making the code available. In answer to the above question a simple solution (if your not code friendly) would be to create your gradient and then take a screen shot and turn that into a image. It would be a static background but depending on how similar top and bottom of your new image are you can use CSS to create a repeating background image.
.image{
background: url(folder/image.jpg);
background-repeat: repeat;
}
November 3, 2013 @ 3:06 pm
|Thanks for your comments! I’m thinking there must be a way to do what you’re describing with toDataURL, but I haven’t tried it.
November 3, 2013 @ 3:39 pm
|Your gradient was useful to me at least !
I used it for this generative clock as a texture for the big planet : http://chronos.space
So thank you 🙂
I didn’t take the time to customize it though.
January 29, 2017 @ 1:25 pm
|How cool! I hadn’t thought to use it for planets. What a nice idea. Glad you found some use for it! Thanks for your note.
January 30, 2017 @ 4:13 am
|