9th August, 2018

Reuleaux Polygons

Reuleaux triangle, pentagon and hexagon.

I have always been fascinated by the Reuleaux triangle. It is a shape formed by the intersection of three circles. Sort of like a ballooned up equilateral triangle.

Reuleaux polygons are a generalization of the Reuleaux triangle. They are a curvilinear polygons i.e., made up of circular arcs and have an odd number of sides.

Construction

The Reuleaux triangle is constructed by drawing circles from each vertex of an equilateral triangle. Where the radius of these circles equals the side length of the triangle.

Reuleaux polygons are constructed using a similar process. Group three consecutive vertices to form a triangle. Then draw a circle from each vertex. The radius of this circle is the distance between the first and the third vertex. Then move onto the next three vertices and so on. Try changing the side count slider, in the demo above, to see this visualized.

SVG Arc Command

To draw these circular arcs in SVG we can use the arc command.

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

Where rx is the x-radius of the ellipse and ry is the y-radius. Keep rx equal to ry to create circular arcs.

Given these radii, there are two ellipses that can connect any two points. On those ellipses there are two possible paths to connect the points. In total, there are four possible arcs connecting any two points.

The large-arc-flag allows you to pick an arc greater than or less than 180 degrees. The sweep-flag controls if the arc should move clockwise or anti-clockwise.

Reuleaux Polygons With SVG

The first step is to get the location of each vertex of the polygon. In a previous blog post, I explained how you can use polar coordinates to generate the vertices of a regular polygon. You can follow the same process to get the vertices of a Reuleaux polygon. The only difference is that instead of connecting those vertices with a line you need to connect them with arcs.

Compute the vertices of the polygon using the polygon generator.
```
const pts = polygon([cx, cy], sideCount, radius);
```
The radius of the arcs will be the distance between the first and the third vertex.
```
const r = dist(pts[0], pts[2]);
```
Draw the path. For Reuleaux polygons we need the arc to be less than 180 degrees and the sweep-flag direction should match the direction you define your points in (clockwise or anti-clockwise).

function reuleauxPolygonConstruction([cx, cy], radius, sideCount) {

const pts = polygon([cx, cy], sideCount, radius);
const r = dist(pts[0], pts[2]);
const [head, ...tail] = pts;

return [
  // move to the first vertex
  'M', head[0], head[1],
  // Connect adjacent vertices with an arc
  ...tail.map(p => `A ${r} ${r} 0 0 1 ${p[0]} ${p[1]}`),
  // Connect the last and the first vertices with an arc
  `A ${r} ${r} 0 0 1 ${head[0]} ${head[1]}`,
  // Close the shape
  'Z',
].join(' ');

Curve Of Constant Width

Although it is possible to construct curvilinear polygons with even number of sides. Reuleaux polygons always have an odd number of sides because they are constant-width shapes. Therefore, every vertex must be able to associate an opposite arc. This is possible only if we have an odd number of arcs.

A curve of constant width is a convex planar shape whose width (defined as the perpendicular distance between two distinct parallel lines each having at least one point in common with the shape’s boundary but none with the shape’s interior) is the same regardless of the orientation of the curve.
— wikipedia

Any curve of constant width can rotate within a square while staying within it at all times. Notice, how as it rotates, its axis does not stay fixed at a single point. It follows a curve around the center of the square.

This property of being able to rotate within a square is leveraged to create bits that drill a nearly square hole. The drill bit itself is a Reuleaux triangle and is mounted in a chuck that allows for the bit to rotate without having a fixed centre of rotation.

Morphing

Lastly, just for fun, here are some polygons morphing between their regular form and Reuleaux form using flubber.