Stroke processing

Raw pointer input is often shaky, so smoothing the path before rendering a stroke can help. Some methods, such as Laplacian smoothing, average out these fluctuations. Here, we take a different approach: resampling the line drawn by the user to reduce the number of points, then connecting them smoothly. Draw on the canvas with the mouse. The gray line shows the raw path at one-pixel width; the blue and red lines show the Natural and Hobby curves, respectively.

Both methods use the same knots, so the Span slider adjusts their balance between fidelity and smoothness at the same time. We sample one knot per span along the path's arc length. This removes wobble between knots, so the span determines the strength of the smoothing.

In the first demo, you may have noticed that the lines sometimes jump abruptly when a new point is added. The methods in this demo prevent this by keeping the portion already drawn on the canvas fixed. Compare two curves that preserve the settled portion of a growing stroke: a Catmull-Rom spline (blue) and a cubic B-spline (green). The stability readout shows how much that portion moves each time a point is added. For both curves, the movement remains exactly zero.

The Natural and Hobby curves each solve a system across all knots. Adding a knot therefore recalculates the entire curve. Its influence decreases with distance but never reaches zero.

Each segment of a Catmull-Rom or B-spline curve depends only on its four surrounding knots. Adding a knot changes only the final segments; everything before them stays fixed.

The Catmull-Rom curve passes through every knot, but it is only C1 continuous, so its curvature may change abruptly at the knots. The B-spline is C2 continuous and therefore smoother, but it approximates the knots rather than passing through them.

Many strokes in this project wrap the drawn path at a set width, but very sharp corners can render poorly, especially when you quickly scribble back and forth. In this demo, a line is split whenever its direction changes beyond a threshold angle. A fast zigzag becomes a series of short strokes instead of one folded line.

This demo shows how all four smoothing methods work on actual strokes, not just bare lines. Select a method from the dropdown to compare them.

This demo shows how the splitting method works on actual strokes.

At the start of a stroke, only a few points are available, making it hard to predict the direction of the user's movement. This can cause flickering. To prevent it, each stroke stays hidden until it has enough arc length to establish a stable direction, then appears in a settled state.

A sharp turn can fold a wide ribbon over itself. To prevent this, the amount of smoothing is tied to the stroke width: narrow strokes follow the hand closely, while wide strokes round off their turns.