How the pen tool works

•

I've never really considered how the pen tool works. Turns out, it relies on Bezier Curves and how they work is super interesting🧵:

The key to Bezier Curves is something called linear interpolation. If we have two points, A and B, connected with a straight line, we can imagine a third point moving along that line. This point is interpolating (linearly) between the other two.

Let's add another point, C. We now have two interpolated points, one between A and C and the other between C and B. Both points are controlled by the same value , t.

The magic happens when you connect the interpolated points with a new line. If we track the interpolated point on this new line, it draws a curve. This is called a Quadratic Bezier Curve.

This is kind of amazing because we can get some incredible curves from just moving the control point, C. (A and B are called anchor points)

Shit gets real when you add another control point to the mix, D. If we draw another interpolated line between the already interpolated lines we can track the curve between these four points. (Look at the gif for a while and you'll get it)

This is known as a Cubic Bezier Curve and is what you're using when you create a shape with the pen tool. You're just stringing sets of these curves together.

if you want to go deeper on the maths, @FreyaHolmer has an amazing video on Bezier Curves here: youtube.com/watch?v=aVwxzDHniEw

And @runemadsen has an excellent chapter on them in his book: programmingdesignsystems.com/shape/custom-shapes/index.html#custom-shapes-pANLh0l

Also this great p5.js video from @shiffman youtube.com/watch?v=enNfb6p3j_g