Smoothness

Smoothness decides how closely the traced outline follows the edge of the pixels between one corner and the next. At 0 it keeps every ripple; at 100 it draws long, even curves from corner to corner. Whatever the setting, corners stay corners, and runs that are nearly straight become truly straight.

What it does

“Smoothness” runs from 0 to 100 and starts at 40. The outline is shaped in several steps, and every distance in them is scaled to the shape's own size, measured as the diagonal of its bounding box:

1. The raw edge. The tracer walks along the cracks between front and back pixels, so its first outline is a staircase of one-pixel steps.
2. The staircase taken out. Every point is averaged with its two neighbors on each side. This happens at every setting, even 0.
3. Cut at the corners. The outline is divided at its corners, as found by Corner angle and span, and each run from one corner to the next is treated on its own, so no smoothing ever reaches around a corner.
4. Evened out. Each point of a run is averaged with its neighbors along the run, over a reach that grows from nothing at 0 to 3% of the shape's size at 100. The reach shrinks toward each end of the run, so the corners themselves do not move.
5. Straightened. Where both sides of a corner are straight, the corner is first moved to where the two lines actually cross, by up to 4 pixels, so a square comes out square. Then a run whose every point lies within the straightening tolerance of the straight line between its ends becomes a true straight line, with no handles at all. That tolerance is a fifth more than the fit tolerance below, and never under 0.75 pixels.
6. Fitted. Every other run is fitted with cubic Bézier curves, split wherever the fit strays further than a tolerance of half a pixel plus, at 100, 0.8% of the shape's size. If the fitted curve then bows more than 3 pixels (or twice the tolerance, if that is larger) away from the traced line anywhere, the fit is thrown away and the run keeps its points, so a cut never takes in paper that was not traced.

At each corner the anchor keeps two independent handles, one for each side. A shape with no corners at all, a circle or a pebble, is fitted all the way around, and the point where the fit began is made smooth like any other. With “Preview” on “Outlines” you see the result, with a small square on each corner, before you trace.

These are the same fitting steps the Draw tool uses for a line drawn by hand; the trace only finds its corners in its own way first. See Drawing.

Why it works this way

A pixel edge is a staircase, and a staircase cut in paper looks like a mistake. Traced raw, one shape can have thousands of points, each of them a point you would have to move to change it. Fitting curves turns the staircase into a line a person could have drawn, with few enough points to edit with Points and Curves.

Smoothing only between corners is the whole trick. One curve fitted around a whole shape rounds every corner in it, because a fit cannot tell a corner from a bend: a square comes out as a cushion. Cut the outline at its corners first and each run can be as smooth as you like while the corners stay sharp, with a handle from each side.

Straight runs become straight lines because cut paper is full of them: the edge of a building, a window frame, a sheet of paper photographed square on. A run that is straight to within a pixel was meant to be straight, and a line with a faint wobble in it reads as a hand that shook.

Everything is scaled to each shape so that the same drawing traces the same way from a small photo or a large one, and so that a leaf and a wall in the same photo are each smoothed in proportion to themselves, not by one fixed number of pixels.

The metaphor

Smoothness borrows the loft floor. Shipbuilders drew a hull's lines full size on the floor of a mold loft, bending a long, thin, springy batten through the marked points and holding it with heavy weights, called ducks. Then they sighted along the batten, looking for bumps. A line with no bumps was fair, and the work of adjusting it was fairing. Draftsmen did the same on the drawing board with small splines and ducks, and with French curves, shaped templates slid along until part of one matched the line.

The metaphor holds well. A batten, like the fit, passes near the points without chasing every one, and a stiffer batten, like a higher Smoothness, makes longer and calmer curves. It breaks at the corners, and in a telling way: a batten cannot turn a sharp corner at all. Where a hull had a hard angle, a knuckle, the loftsman ended one batten and began another, which is exactly what cutting the outline at its corners does. And a batten finds its shape by physics, bending as little as it can, where the fit finds its shape by averaging and by measuring distances.

A history

In art

William Hogarth, in The Analysis of Beauty (1753), argued that a serpentine, S-shaped line, his line of beauty, gives a form a liveliness that straight lines and right angles lack. Two centuries later Matisse described his cut-outs as drawing with scissors. A scissor cut is a committed line: it cannot be sketched, hesitated over or rubbed out, and it rewards the long, continuous curve.

The trace faces the same choice from the other side. It starts with every hesitation of the pixels in it, and Smoothness decides how many of them to keep. At 0 you get the photograph's line; at 100, something nearer the scissors'.

In printing

Type designers have wrestled with this problem since letters became outlines. From 1972 Peter Karow developed Ikarus at URW in Hamburg, a system for turning drawn letters into digital outlines. A letter drawn about ten centimeters high was traced on a digitizing tablet, and the operator marked its points by kind, as beginnings, corners, tangents and curves; the curves were then computed between them. Karow presented Ikarus to type designers at the ATypI conference in Warsaw in 1975.

The outline font formats that followed, among them Adobe's PostScript Type 1, describe letters with Bézier curves, and nearly all digital type is now drawn with Bézier curves of one degree or another. The shapes the trace makes are of the same kind as the letters on this page.

In technology

The loft floor passed into mathematics. Robin Forrest has described how the British aircraft industry of the Second World War lofted its templates with thin wooden splines, a technique borrowed from ship design; in 1946 Isaac Schoenberg gave the name spline to smooth curves pieced together from polynomials, after the draftsman's tool. In the car industry, Paul de Casteljau at Citroën found in 1959 a way of computing such curves from a few control points, but his employer kept it secret. Pierre Bézier at Renault reached equivalent curves independently, published them and built them into the UNISURF design system, and so the curves bear his name.

Fitting such curves to a jagged line is a problem of its own. Urs Ramer (1972) and David Douglas and Thomas Peucker (1973) showed how to simplify a line by keeping only the points that stand more than a tolerance away from the straight line between the points kept, the idea behind the straightening step here. Philip J. Schneider's “An Algorithm for Automatically Fitting Digitized Curves”, published in Graphics Gems in 1990, fits Béziers to points and splits the run where the error is worst; Paper.js, the drawing library this app is built on, uses it for its curve fitting. Commercial autotracing began with Adobe Streamline, shown in 1989. Its descendant, Live Trace, arrived inside Illustrator in 2005 and is now called Image Trace. Peter Selinger's open-source Potrace, released in 2001, fits its curves around an optimal polygon.

In professional software

Every tracer decides how tightly a curve hugs the pixels, and most drawing programs can smooth or simplify a path afterwards. The names vary (paths, smoothing, simplify, fit tolerance), but the trade is always the same: fewer points and calmer curves against a closer fit to the edge.

• Adobe Illustrator. ‘Paths’, under ‘Advanced’ in the ‘Image Trace’ panel, sets how closely the traced path follows the pixels: higher values fit tighter, lower values looser. After tracing, ‘Object › Path › Simplify’ gives a slider that removes anchor points, and its ‘More Options’ dialog adds ‘Simplify Curve’ and ‘Corner Point Angle Threshold’.
• Inkscape. ‘Optimize’ in ‘Path › Trace Bitmap’ joins neighboring Bézier segments to cut the number of nodes, with a value that sets how hard it tries. ‘Path › Simplify’, ⌘L (Ctrl+L), does a similar job on any path afterwards.
• CorelDRAW. PowerTRACE’s ‘Smoothing’ slider trades nodes for smoothness: higher values give fewer nodes and curves that follow the bitmap less closely.
• LightBurn. In ‘Trace Image’, ‘Smoothness’ turns more of the traced segments into curves, and ‘Optimize’ reduces the number of nodes.
• Autodesk AutoCAD. PEDIT smooths a polyline: its ‘Fit’ option passes arcs through every vertex, and ‘Spline’ uses the vertices as control points for a smoother curve. The SPLINE command, drawing through fit points, has a ‘Tolerance’ that lets the curve stray from the points you pick, much like the fit tolerance here.
• Autodesk Fusion (formerly Fusion 360). Sketch splines come in two kinds: a fit point spline passes through every point you place, while a control point spline is only pulled toward its points, like Bézier handles, and tends to give the evener curve.

What carries over. Start loose and tighten only where the shape needs it: a path with fewer points is easier to edit and cuts more cleanly. Watch the corners. A simplify command that works on a whole path can round them off, which is why Illustrator gives you a corner angle to protect them; Studio Notan smooths only between the corners it has found.

Try this

• Set “Preview” to “Outlines” and move “Smoothness” from 0 to 100 on a photo of a leaf. At 0 the outline shivers; at 100 it swings. The corner squares stay where they are.
• Trace a photo of a window or a building, then look at the waiting shape with Points: you will find runs with no handles at all, true straight lines.
• At Smoothness 100, compare a big shape and a small one in the same trace. Both are evened out in proportion to their own size.

Going further

See Corner angle and span, Draw and Curves.

• William Hogarth, The Analysis of Beauty
• Gerald Farin, Curves and Surfaces for CAGD