June 2021

Inspired by Excalidraw, I recently spent some time diving into the algorithm for making a computer drawing look sketched or hand drawn. It’s pretty straightforward, but not that easy to parse out from the rough.js codebase or this research paper it’s based on. Here I’ve tried to summarize it in its simplest form.

For lines and curves, you simply shift the endpoints by some random offset, and add an additional point near the middle for a bit of bowing.

Circles and ellipses are approached the same way. You shift the points a bit, and then connect them with a curve.

There are a lot of different algorithms for drawing a spline through a set of points, but I opted for a simple bezier curve with the control points calculated based on the slope and distance between neighboring points.

Hachures are added to fill a shape, which are just a series of lines drawn between opposite edges. By first rotating the shape and then calculating the vertical bounds of each edge, you can then scan it from top to bottom, drawing horizontal lines as you go. Randomly bowing and shifting the straight lines makes them look sketched as well.

And that’s all there is to it! I’ve added the algorithm and a bunch of examples to a fork of elm-collage, where you can play with it more. Here are a few of the examples:

Kinda fun, and in my opinion the sketched look helps reflect the uncertainty and lack of precision that is common in many ideas, for example those that you’d usually draw up on a whiteboard or a napkin.