NaN

Curves II: Cubic Curves

Quadratic curves are great, but as we saw in the previous section, they can be pretty limiting — there are only so many shapes you can make with only one control point!

This pill shape, for example, doesn't look quite right using quadratic curves:

  1. M5.05.0
  2. h5.0
  3. q5.02.50.05.0
  4. h-5.0
  5. q-5.0-2.50.0-5.0
  6. Z
051015051015

But if we change the quadratic curves to cubic curves instead, we get a much smoother pill shape:

  1. M5.05.0
  2. h5.0
  3. c4.00.04.05.00.05.0
  4. h-5.0
  5. c-4.00.0-4.0-5.00.0-5.0
  6. Z
051015051015

We were able to make the curve look better because we had an extra control point to work with.

Syntax

We saw the cubic curve syntax just now but here it is more formally. To draw a cubic curve, we use the C command:

C x1 y1 x2 y2 x y

For example:

  1. M5.013.0
  2. C0.05.020.05.015.013.0
0510152005101520(0.0, 5.0)(20.0, 5.0)(15.0, 13.0)

Notice that the command looks just like the quadratic curve command but with an extra pair of coordinates for the second control point.

You can kind of think of the cubic curve as a "generalization" of the quadratic curve — every quadratic curve can be represented as a cubic curve by putting the control points in the right place.

Try moving the control points in the sandbox so the bezier curve lines up with the quadratic curve behind it.

0510152005101520

Interestingly, the point where the two curves line up is not when the two control points are in the same place!

Multiple Bezier Curves

Just like how quadratic curves can use the T command to chain two quadratic curves together, cubic curves can use the S command to chain two cubic curves together.

The syntax, as you might expect, is the same as the T command but with an extra pair of coordinates for the second control point:

S x2 y2 x y

Here, we use the S command to create a hot air balloon shape:

  1. M6.010.0
  2. C6.08.04.010.04.05.0
  3. S11.00.011.05.0
  4. S9.08.09.010.0
  5. Z
  6. M 6.25 10
051015051015

Practice

Using both curve commands and the other commands we've seen, trace over this rainy cloud:

05101520250510152025