In my last post, I presented some generative art based on slowly morphing curves drawn to the canvas. The curves were created by a fractal subdivision process. Here, I create some similar images, but in a different way. Click on the screencaps below to see two different versions of the effect, and see below for the source code and comments on how the images are generated.

White background, muted colors

HTML5 generative art 1
Black background, additive colors

HTML5 generative art 2


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

About the code

The shapes generated here are similar to those in my last post, so I’ll refer you to that post for a little more background on the creation process. The shapes generated there were created by stacking “noisy circles” on top of each other as they sweeped across the canvas, creating an overall structure which looked like wrinkled tubes. For the new effect presented here, I decided to see what the shapes would look like if the lines were drawn like strings along the length of these tubes rather than around them. The images use 2049 strings (that’s 2^11 + 1).

Thus the basic idea for the shapes created here is the same as in my previous post, but they are drawn in a much different way, and this required some significant reworking of the code. In short, here is how the curves are drawn. First, several “noisy circles” are generated, and although they are not drawn to the canvas, you can think of them as being spaced out at equal intervals along the length of the canvas. Then one at a time, curves are drawn from one of these circles to the next, by smoothly interpolating the radius values. Check out the code to see how the x and y coordinates of the center of the circle are interpolated as the radius is also interpolated. Note that a cosine function is used to make the transition of y coordinates and radius values smoother.


The lines drawn along the length of the structures have varying colors, which transition between two or three randomly chosen colors. To transition from one color to the next, we use a parameter ranging from 0 to 1. But I decided to make this more interesting by using the same sort of fractal-subdivision function which is also being used to define the changing radius around a given noisy circle. See my post on imperfect circles for more information on this fractal subdivision process and how it is used to create imperfection.

As a result of the fractal function used to define the colors, the color of the strings transition from one color to another in a somewhat noisy way, but without any sudden jumps in color.

For the images generated on the white background, I opted for darker, more muted colors. The colors are randomly created by selecting low red, green, and blue values, and the alpha value of the lines is very low in order to create a build up effect for overlapping lines.

For the images created on the black background, a little more visual interest is created by using additive colors. That is, colors which lie on top of each other will have their light values added together. This is easily accomplished by changing the global composite operation of the canvas context:

context.globalCompositeOperation = "lighter";

Have fun!

What else can be done with a noisy function like the one created here to create the noisy circles? I have a lot more ideas on generative art pieces which involve drawing geometric objects with parameters which transition in a random but not completely wild way. I hope to have the chance to put some more things together and shre them here. And I hope you’ll also have a look at the code here and in my last few posts, and have some fun experimenting.