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.

figure 1a figure 1b figure 1c

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:
sin36° ≈ 0.5878
cos36° ≈ 0.8090
sin72° ≈ 0.9511
cos72° ≈ 0.3090

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

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:

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.

figure 2a1 figure 2a2

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:

figure 2b1 figure 2b2

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 2c1 figure 2c2

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

figure 2d1 figure 2d2

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

figure 2e1 figure 2e2


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

figure 3a1 figure 3a2

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

figure 3b1 figure 3b2

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

figure 3c1 figure 3c2

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.

figure 4a1 figure 4a2

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

figure 4b1 figure 4b2

figure 4c1 figure 4c2

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

figure 4d1 figure 4d2