Bézier curves applied to regular polygrams.
Version of Tuesday 5 November 2019.
Dave Barber's other pages.

The regular pentagram (figure 1a) has been a geometric figure of fascination for centuries. This report discusses some artistic variations employing Bézier curves. Examples using polygrams of more than five vertices will also be shown.

For reference, most examples will be drawn overlying the pizza of figure 1b, as combined in figure 1c. The pizza is assumed to have a radius of one unit, with its center at the origin of a Cartesian coordinate system.

As is customary, x-values (abscissae) increase from left to right. However, note that y-values (ordinates) increase from top to bottom, as is often seen in computer graphics; rather than from bottom to top, as found in most mathematical treatments. Hence the point at the top of the pentagram of figure 1c has the coordinates (0, −1), not (0, +1). Here are all the coordinates of the star in figure 1:

xy
center 0.0000 0.0000
top 0.0000−1.0000
upper right +0.9511−0.3090
lower right +0.5878 +0.8090
lower left −0.5878 +0.8090
upper left −0.9511−0.3090
where:
 sin 36° ≈ 0.5878 cos 36° ≈ 0.8090 sin 72° ≈ 0.9511 cos 72° ≈ 0.3090

Bézier curves, widely supported in graphical software, can be categorized by degree:

• The linear (degree 1) always turns out to be a straight line, and thus receives little attention. It has two control points, one on each end.
• The quadratic (degree 2) Bézier is the simplest that can actually be curved. It has three control points, one on each end, and one between them.
• The cubic (degree 3) Bézier is widely used. It has four control points, one on each end, and two between them. It is the lowest degree that allows specification of the location of each endpoint, as well as specification of the slope the curve at each endpoint. It is effective in making smooth spline curves.
• Higher degrees work similarly.
• The Bézier curve of degree 0 exists as a degenerate case. It has one control point, and that point is the entire curve.

The entire curve lies within the convex hull of all the control points. In other words, the curve never ventures outside the smallest convex polygon that contains all the control points.

The Scalable Vector Graphics code used to produce the images below has direct support for quadratic and cubic Bézier curves. The SVG code was itself generated by a custom-built program in the C++ language. Incidentally, the human-readable image files may be downloaded, examined and modified using an ordinary text editor.

Figure 2a1 shows how a quadratic Bézier curve can be substituted for the straight line which would have run from point A directly to point C:

• In red is the curve itself.
• In green are the three control points and the straight lines connecting them. Cartesian coordinates of all three control points are listed below the pizza.
At point A, the curve starts out tangent to the A-B line, but moves away toward point C, where it finishes tangent to the B-C line. Figure 2a2 shows five such curves connected to make a star, now in red.

Point B can be any point in the plane, arbitrarily selected for artistic effect. If point B happens to coincide with A or C, a straight line results. Naturally, point B is rotated in multiples of 72° for the other sides of the pentagram.

In figure 2b, point B is at the center of the pizza. As a result, each of the five curves is tangent to the next:

In figure 2c, the curve is convex in the other direction. The ordinate of point B is −(1 + √5), leading to a smooth curve:

Figure 2d shows that Bézier substitution can also be made in a pentagon:

For some choices of point B, the curves will intersect at places other than their endpoints:

Figure 3a has Bézier curves used on a heptagon. Here, no curve crosses any other curve:

There are two varieties of heptagons. In figure 3b, each curve crosses two other curves:

In the heptagram of figure 3c, each curve crosses four other curves:

Crossing of zero (3a), two (3b), or four (3c) other curves will apply as long as the curves do not deviate greatly from a straight line.

The general idea extends to polygons or polygrams with any number of sides.

Figure 4a employs a cubic Bézier curve.

In figures 4b and 4c, all instances of points B and C have the same ordinate; but their abscissae differ with great effect.

If the line from A to B crosses the line from C to D, a loop might be formed: