Chapter 4  Curves

Extract

Quadratic Bézier Spline

Figure 4-13. Quadratic Bézier Spline Segment

To better understand the concept of the quadratic Bézier spline segment, we start with a simple line from point P₁ to P₂ and add a third point C₁₂ not on this line forming a triangle. The Bézier curve passes through the control points P₁ and P₂, but will only approximate the control point C₁₂. Here the imagination is of some help, that C₁₂ acts with a certain gravitational force onto the originally straight line and deforms it elastically into a smooth curve. 

I want to show you an illustrative geometric approach to create a quadratic Bézier spline segment. We start again with the triangle P₁,C₁₂,P₂.

Figure 4-14. Quadratic Bézier Spline Creation

 We mark a point A₁ at 30% along the line from P₁ to C₁₂. Then we find another point A₂ at 30% along the line from C₁₂ to P₂. Connecting these points with a new line we set again a point B at 30% along this line from A₁ to A₂. This point B is now a point on our quadratic Bézier spline segment. 

If we repeat this geometric construction from 0% to 100% using steps with a width of 10%, we yield an image according the second triangle. All the new lines are tangents to the curve – we call them the “convex hull” - and all new points B are points on our spline, a simple parabola. Here are its characteristics:

·        When starting in P₁ the curve is heading straight for C₁₂.

·        When arriving in P₂ it is coming from the direction of C₁₂.

·        The whole curve is contained inside the triangle P₁,C₁₂,P₂.

·        If the points P₁,C₁₂,P₂ are collinear (placed on a line), the resulting curve is also a line.

·        The curve cannot intersect itself.

Now that we understood, how the quadratic Bézier spline works, we still need to know, how SVG is helping us to create it via the <path> element.

For this we introduce here the absolute and relative quadratic Bézier curveto Q and q command.

Syntax:

     Q|q x1, y1, x, y

         x1 = x-coordinate of the approximating control point
         y1 = x-coordinate of the approximating control point
         x = x-coordinate of new curve point
         y = y-coordinate of new curve point

The Q command specifier is followed by two pairs of x-/y-coordinates. The first one determines the control point and the second one is the end point of the Bézier segment. Let’s apply this path command to generate a smooth curved vase.

Figure 4-15. Vase using quadratic Bézier Segments

( view this picture as svg )

 <path stroke="sienna" stroke-width="2" fill="none"
      d="M  80,180
         Q  50,120  80,60
         Q  90, 40  80,20
         Q 100, 20 120,20
         Q 110, 40 120,60
         Q 150,120 120,180
         Z" />

We start the outline of the vase at its lower left corner (80,180) with an absolute moveto M command. Then we add a quadratic bézier curveto Q segment with the control point (50,120) ending in (80,60). From here we continue with another Q command approximating the control point in (90,40) to the point (80,20).

Please note, that we wanted to preserve the smoothness of the curve, when going over from the first spline segment (body?) to the second one (neck?). To accomplish this we need to have the tangent at the first spline’s endpoint equal to the second spline’s startpoint. And for this a curve point’s preceding control point, the curve point itself and the succeeding control point must be on the same line (collinear) with the curve point between the control points.

Figure 4-16. Tangents with equal, opposite and different direction

( view this picture as svg )

Since a smooth junction between two spline segments is a very common demand, SVG provides us with a special simplifying smooth quadratic bézier curveto T command.

Syntax:

     T|t x, y

         x = x-coordinate of new curve point
         y = y-coordinate of new curve point

Figure 4-17. Automatically generated control points

( view this picture as svg )

The T command specifier is simply followed by a pair of x/y-coordinates setting the end point of the Bézier segment. The ommitted control point is automatically created from the previous control point by reflection relative to the path’s current point. 

Let’s now apply the quadratic Bézier spline to our car.

Figure 4-18. Quadratic Car

( view this picture as svg )