Computer-generated lines with a human feel

Sometimes, the perfect version of something is too perfect. Consider two drawings of a cube shown below.

The left-hand side cube is generated exactly as you’d expect – by drawing a number of straight lines. The cube on the right-hand side, however, is generated using an algorithm from Meraj et al.’s 2008 paper, Mimicking Hand-Drawn Pencil Lines.

This work may seem entirely unmotivated; why, after all, would someone want an imperfect drawing when one could have a precise one? Meraj et al. argue that there are two primary reasons one might wish to be able to generate images that appear to be drawn by a human:

1) communication of uncertainty — precisely rendered computer graphics imply an exactness and perfection that may overstate the fidelity of a simulation or representation; and

2) communication of abstract ideas – simple line drawings such as diagrams used in textbooks can communicate abstract ideas in ways that a photograph cannot.

I would add that a hand-drawn look can also give an image an artistic quality. For example, we can use Meraj et al.’s algorithm to render an animated L-system. The result is something that resembles a hand-drawn flip book animation.

While the paper provides many details, the proposed algorithm is fairly simple. The authors cite prior work that found a parametric polynomial that describes the arc and acceleration of the human arm as it draws a line starting from to :

Here, varies from zero to one. While these polynomials come from a fairly large experimental study, Meraj et al. argue that the variation from a straight line introduced by these polynomials isn’t sufficient to produce a “hand-drawn” look.

So, in addition to this polynomial, Meraj et al. add random deviations at various points along the curve given by the polynomials. To do this, primary control points are placed every steps along the curve. At the midpoint of each line segment that is created, a secondary control point is added, and random noise is added to this second control point. The variable is set based on the total length of the line (longer lines get more control points).

In the example above, the black squares represent the primary control points and the red squares represent the secondary (noise) control points. The final line is drawn by fitting a quadratic spline between each set of three points. Note that the control points are denser around the edges of the line (humans make more mistakes when starting and stopping) than in the middle.

The results can also be used to sketch fractals, like the Sierpinski triangle. You can press the plus and minus button the change the degree of the fractal. The current degree is 1.

At degree five, the deviations from straight lines becomes very noticeable. I find the lack of crisp detail closely matches my attempts at drawing such small triangles. The results are satisfyingly realistic.

Meraj et al. dedicate a significant portion of their paper to mimicking the texture and pattern of pencil markings. They use statistical techniques based on local correlations in scanned images of pencil markings. Unfortunately, the authors did not publish their data, so I am not able to reproduce the results.

Here’s an animated rendering of another L-system that looks like seaweed:

You can use my implementation of Meraj et al.’s algorithm by installing the NPM package.

npm install --save humanlines

You can also check out the code on GitHub. Feel free to report any issues there or to me directly via Twitter.

Thanks to Raymond Fan, UToronto, for pointing out typos in this post.