Pen Tool Trainer

Almost everyone meets the pen tool the same way. You click, and a straight line appears. You click again, hold a moment too long, and the line swings out into a curve you did not ask for. Two thin arms sprout from the point and follow the pointer. Nothing about a real pen behaves like this, and the first hour is mostly spent undoing.

The confusion has a single cause. A beginner tries to push the line where it should go, the way a pencil is pushed. The pen tool works at the ends of each piece, and the piece in between is computed.

A curve steered from its ends

The curve in question is a cubic Bézier curve. It is named for Pierre Bézier, who published his work on it in 1962 while at Renault. Pomax’s primer on the subject notes that Paul de Casteljau had begun studying the same curves at Citroën in 1959 without publishing, and that the mathematics underneath goes back to Sergei Bernstein’s papers of 1912. Both men worked for car makers. The letters and logos came afterwards.

A cubic curve is set by four points. Two of them are the ends, and the curve passes through those. The other two are control points, and the curve usually never touches them. MDN’s guide to paths puts their job in one line: the control points essentially describe the slope of the line starting at each point. The curve leaves the first end heading toward the first control point, and it arrives at the second end coming from the direction of the second. The browser’s own canvas uses the same recipe: its curve call takes two control points and an end point, and starts from wherever the path currently is.

Drawing programs give these four points friendlier names. The ends are anchor points. The control points are handles, drawn as short arms reaching out of each anchor. One open-source drawing program’s guide says it simply: every node you create has two handles, and these handles define the shape of the curve. Direction is where the arm points. Strength is how long it is.

How a computer finds the curve from four points is worth a minute, because it explains a trick the tool relies on. De Casteljau’s method, which the Michigan Tech course notes prefer to direct evaluation for its numerical stability, picks a ratio, marks that ratio along each side of the control polygon, joins the marks, and repeats until one point is left. That point is on the curve. The same construction also hands over, for free, the control points of the two halves. A curve can therefore be cut in two without changing its shape at all, which is why adding a point to a path does not have to disturb it.

Smooth points, corners and cusps

Join two curves at an anchor and the anchor has an arm on each side. If the two arms lie on one straight line through the anchor, the path flows through without a visible join. Bartosz Ciechanowski states the condition exactly: for the tangency of neighbouring curves to be consistent, the control points on either side of the join have to lie on the same straight line. Many tools tie the two arms together so that moving one turns the other. That is a smooth point.

A corner point is the opposite case. Its arms are pulled in, or they point wherever they like, and the path changes direction on the spot. A corner whose arms are both extended but not in line is often called a cusp. The dip at the top of a heart is one. So is the tip of a leaf.

The arms of a smooth point need not be the same length. This matters more than it seems. A long arm keeps the curve travelling in its direction for longer before it bends away, so two arms of different lengths give a curve that is tight on one side of the anchor and lazy on the other. An ellipse needs exactly that at each of its four points.

Every pen tool builds these three kinds of point from the same two gestures. A click makes a corner. A press and drag makes a smooth point and pulls its handles out as you go; one program’s help page says you drag to determine the length and slope of the curve. In one painting program, pressing Enter finishes the path. Tools then add some way to break the pair of arms, so that one can move alone.

Where the points belong

Given that freedom, where should anchors go? The advice from people who draw outlines for a living is unusually consistent. The FontForge community’s design book says modern font formats strongly suggest a point at each horizontal and vertical extreme of a path, the places where the curve reaches its smallest and largest x and y. One type design tutorial says to insert nodes where the path has completely horizontal or vertical tangents. A font editor’s manual says it is best to add points where the curve is horizontal or vertical, at corners, or where the curve changes inflection.

Fonts are the strictest school for this, since the outline formats themselves are made of on-curve and off-curve points; FreeType’s documentation describes TrueType outlines as second-order arcs steered by points on and off the curve. But the rule is not a font superstition. At an extreme the tangent is horizontal or vertical, so the handles are too. A handle that only moves along one axis is easy to judge by eye and easy to match with its neighbour. Put the anchor anywhere else and both handles sit at awkward angles that must be tuned against each other.

The second rule is to use few points. The same tutorial says it flatly: fewer points mean less trouble. The FontForge book ties the two rules together: anchors placed at the extremes are what produce proper curves with the fewest control points. Each extra anchor is another place where two curves must agree on a direction, and wherever they almost agree, the eye finds a bump.

The circle that is not quite a circle

The circle is the best test of both rules, and it comes with a surprise. A Bézier curve cannot draw one. Ciechanowski notes that plain Bézier curves can only approximate a circular arc. What every drawing program hands you when you ask for a circle is four cubic curves doing an extremely good impression.

Four is what the extremes rule predicts: top, right, bottom and left. Each anchor is a smooth point with horizontal or vertical handles, and the only number left to choose is the handle length. Ask the middle of each quarter arc to land exactly on the true circle and the answer falls out: four thirds of the square root of two minus one, about 0.5523 of the radius. Spencer Mortensen’s analysis gives the same constant and measures the result. The curve stays just outside the true circle, and its largest radial error is 0.027 percent.

That is under three parts in ten thousand. On a circle a metre across, the outline strays by about an eighth of a millimetre. The type tutorial’s rule of thumb agrees from the practical side, saying a circle or ellipse usually clocks in at handles of roughly 55 to 56 percent. Mortensen also shows that the standard constant is not the best possible; letting the end points move a hair cuts the error about five times. Nobody bothers, because nobody can see it.

Here is the same fact as an exercise you can repeat. Take a circle of radius 300 centred on a board 1,000 units wide. The clean solution uses 4 points, each dragged out to handles about 166 units long, which is 0.5523 times 300.

Now draw it the beginner’s way: eight clicks around the rim and no dragging. The largest gap is the sag of a straight side below its arc, 300 times one minus the cosine of 22.5 degrees, or about 23 units. Against the circle’s bounding diagonal of 849 units that is 2.7 percent. The trainer on this page grades that attempt 13 out of 100. Twice the points, and the outline lies nearly three hundred times further from a true circle.

Habits worth unlearning

The octagon is the first beginner habit: clicking where dragging was needed, then adding points to hide the corners. The cure is to place fewer anchors than feels safe and pull longer handles than feels natural. On a quarter circle the handle is more than half the radius, and it is easy to stop short.

The second habit is putting anchors in the middle of a curve, where it looks busiest, rather than at the extremes. The third is dragging a handle off its line on a smooth stretch, which leaves a kink that shows only when the shape is enlarged. The fourth is fixing a poor curve by adding a point instead of moving a handle. Each has the same remedy. Stop, look at where the curve is flat against an imaginary box, and move the anchor there.

None of this can be absorbed by watching someone else do it. The handle has to be in your own hand, with a clear signal about how far off the result was. A meta-analysis of 225 studies of university science teaching found that students in classes built around doing scored 0.47 standard deviations higher on examinations than students who were lectured, and that the lectured students were 1.5 times more likely to fail. Drawing is not physics, but the mechanism is hard to argue with. Attempt, measure, adjust.

Measuring has limits, and they are worth stating. A score that compares your path with a reference can tell you how far the two lie apart and how many points you spent. It cannot tell you whether a curve is beautiful, or whether a logo needs that anchor for a reason no reference could know. Distance is also blind to speed: two paths can trace the same shape with very different handles, and only one of them will be pleasant to edit next week.

So treat the number as a mirror for one skill. Few points, placed at extremes, with handles in line and long enough. Get that into the hand, and the tool that fought you at the first click becomes the one you reach for.