hr-studioFoundations · 03
A computational design primer · Curves & Splines

Smooth lines from a handful of points.

Every curve in a font, a logo, or a car's silhouette is really just a few points and a rule for blending between them. Start with the simplest blend — a slide between two points — and build all the way up to a curve you can draw through points of your own. Grab anything and move it.

Scroll to begin
i.

The blend between two points

Everything starts here. Pick a fraction t from 0 to 1 and you get the point that fraction of the way from A to B: (1−t)·A + t·B. At 0 you're at A, at 1 you're at B, at 0.5 exactly halfway. This single idea — a weighted blend — is the seed of every curve below.

Slide t, and drag A or B.

Linear interpolation · a slide from A to B
ii.

A curve from nested blends

Now blend the blends. With three points, slide along the first edge and along the second at the same fraction t, then blend those two moving points. The final point traces a smooth Bézier curve — and the whole scaffold of moving chords is the de Casteljau construction, the most beautiful idea in the subject.

Drag the three points; the construction sweeps on its own.

Watch the chords build the curve
iii.

The pen tool — anchors and handles

Add a fourth point and you get the cubic Bézier — the exact curve behind the pen tool in every design app. The two end points are anchors the curve passes through; the two inner points are handles that pull the curve and set its direction as it leaves each anchor. Longer handle, lazier curve.

Drag the hollow handles to steer; drag the solid anchors to move.

Anchors set position · handles set tangent
iv.

Joining curves without a kink

One Bézier can't make a complex shape, so we chain them — a spline. At a join, the curves always meet (that's easy), but meeting smoothly is the trick: the handle coming in and the handle going out must point in a straight line through the join. Break that and you get a corner; honour it and the curve flows through.

Toggle the smooth join, then drag a handle near the seam.

Collinear handles = smooth seam
v.

The spline sandbox

Now draw your own. These points aren't handles to steer — the curve runs through every one of them, the way a Catmull-Rom spline threads a smooth path through a set of dots. Tap empty space to drop a point, drag to shape it, tap a point to remove it. Pull the tension from slack and rounded to taut and straight, and close the loop when you want a solid shape.

Tap to add · drag to move · tap a point to remove
From one slider between two dots to a curve flowing through a dozen — it's blends all the way up. Give the computer a few points and a rule, and it draws the smooth thing you meant.