In my last post I presented a method for drawing imperfect circles in an HTML5 canvas. The imperfection was coded using a fractal subdivision process to create a noise function. Here I tweak the subdivision algorithm a little, and apply the same basic idea to drawing rectangles. Click on the two screenshots below to see two examples of imperfect rectangles which (to me, anyway) appear to be drawn by a human with paints or markers:


html5 canvas imperfect rectangles

Blocks of color:

html5 canvas imperfect rectangles


The complete code for both examples can be downloaded here:

About the code

If you haven’t yet, you should first read my last post where I explain the fractal subdivision process used to create a randomized function, which is then used to randomize the drawing of shapes. An important feature of the randomized functions used there is that they had the same beginning and ending values, which was desired for the drawing of a closed shape. The rectangles drawn here similarly drawn, but we apply the randomization in a different way.

When drawing circles, we allowed the radius of the circles to vary as we traversed around a center point. For the rectangles drawn here, we allow the lines to stray a bit from their trajectory as we draw from one rectangle corner to the next. The direction in which the lines are allowed to stray is perpendicular to the drawing direction. Coding this behavior is accomplished by setting some “drift vectors”, one for each line to be drawn.

For example, when drawing a horizontal line, we only want the drifting to only occur in the vertical direction, so we set a drift vector with x component 0 and y component equal to the maximum desired drift. Have a look inside the code to see how these vectors are used to accomplish the drifting.

Tweaking the fractal subdivision

As I noted in my last post, the fractal functions used for the imperfect circles were random but did not go through points in a uniform probability distribution (see that post for more details). A small tweak to the subdivision algorithm provides a more uniform distribution of points. Previously, we subdivided our curve at exact midpoints between existing line segments. Here, we select a subdivision point randomly at a point somewhere between 1/3 and 2/3 the distance between endpoints.

To see the resulting effect, have a look at the screenshots below which show about 2500 fractal curves drawn on top of each other. (See my previous post for more explanation of what these pictures represent.) The first image shows the exact midpoint method, and the second shows the more variable subdivision method. (Click on the images to see larger versions.) Note that the midpoint method tends to favor a maximum or minimum value for the function halfway between the endpoints (and also to a lesser extent at the 1/4 and 3/4 positions).

fractal subdivision curve

fractal subdivision curve

What else can we draw?

The code here can easily be adapted to drawing any polygon. For adaptability, I purposefully defined the vertices of the square with an array, and the drift vectors are also stored in an array. You can draw different shapes by setting new vertices, and creating drift vectors which are perpendicular to the lines as they are drawn between vertices.

Have fun with the code. I’m sure I’ll be spending more time exploring imperfection!